我不确定标题是否合适。但这正是我想要实现的目标——
我已经创建了一个react可重用组件，它将返回一个特定于环境的头。当我说环境特定时，我的意思是，在回旋镖环境中，我需要使用一些在其他环境中不支持的回旋镖特定包。
为此，我创建了两个独立的头组件，一个用于具有回旋镖UI外壳的回旋镖环境(在其他环境中不支持(，另一个用于其他环境。
现在，通过我的CustomHeader组件，我将基于环境道具来呈现标头。
renderDynamicHeader() {
let {project, headerText, productName, customHeaderStyle, logoutLink, onSwitcherItemClick, headerPanel, onIconClick, logoLink, headerIcons, navigation, baseURL, features, platform, bmrgCustomIcons} = this.props;
let {environment} = this.props;
if(environment !== 'boomerang' && environment !== 'production' && environment !== undefined) {
return <NonBoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} onSwitcherItemClick={onSwitcherItemClick} onSwitcherItemClick={onSwitcherItemClick} headerPanel={headerPanel} onIconClick={onIconClick} logoLink={logoLink} headerIcons={headerIcons}/>
} else {
const BoomerangHeader = lazy(() => import(/* webpackChunkName: "BoomerangHeader" */ "../BoomerangHeader/index"));
return (
<Suspense fallback={<NonBoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} onSwitcherItemClick={onSwitcherItemClick} onSwitcherItemClick={onSwitcherItemClick} headerPanel={headerPanel} onIconClick={onIconClick} logoLink={logoLink} headerIcons={headerIcons}/>}>
<BoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} navigation={navigation ? navigation : undefined} baseURL={baseURL? baseURL : undefined} features={features? features : undefined} platform={platform ? platform : undefined} bmrgCustomIcons={bmrgCustomIcons} onIconClick={onIconClick}/>
</Suspense>
);
}
}
我的webpack.config.js文件中有这样的配置：
const path = require('path')
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin')
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
externals: [nodeExternals()],
output: {
filename: 'index.js',
publicPath: 'dist/',
path: path.resolve(__dirname, 'dist'),
library: '',
libraryTarget: 'commonjs',
chunkFilename: '[name].js'
},
plugins: [new CleanWebpackPlugin()],
module: {
rules: [{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /.scss$/,
use: ['style-loader', 'css-loader', {
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
}],
include: path.resolve(__dirname, './src')
}
]
}
}
但是当我进行构建时，回旋镖头组件的内部依赖项被附加/捆绑在主index.js文件中
这是我的BoomerangHeader.js文件中的导入语句
import React, {Component} from 'react'
import {UIShell} from '@boomerang/carbon-addons-boomerang-react';
import axios from 'axios';
import './boomerangHeader.scss';
我可以在dist文件夹的index.js文件中看到一个导出语句
(r=[{key:"renderDynamicHeader",value:function(){console.log("inside renderDynamicHeader library");var t=this.props,e=t.project,r=t.headerText,a=t.productName,l=t.customHeaderStyle,b=t.logoutLink,s=t.onSwitcherItemClick,x=t.headerPanel,d=t.onIconClick,c=t.logoLink,p=t.headerIcons,f=t.navigation,g=t.baseURL,h=t.features,_=t.platform,u=t.bmrgCustomIcons,w=this.props.environment;if("boomerang"!==w&&"production"!==w&&void 0!==w)return console.log("inside non boomerang if block"),n.a.createElement(m,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,onSwitcherItemClick:s,onSwitcherItemClick:s,headerPanel:x,onIconClick:d,logoLink:c,headerIcons:p});console.log("trying to lazy load boomerang file");var v=Object(i.lazy)((function(){return o.e(0).then(o.bind(null,9))}));return console.log("successfully imported boomerang file"),console.log(v),n.a.createElement(i.Suspense,{fallback:n.a.createElement(m,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,onSwitcherItemClick:s,onSwitcherItemClick:s,headerPanel:x,onIconClick:d,logoLink:c,headerIcons:p})},n.a.createElement(v,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,navigation:f||void 0,baseURL:g||void 0,features:h||void 0,platform:_||void 0,bmrgCustomIcons:u,onIconClick:d}))}},{key:"render",value:function(){var t=this.renderDynamicHeader();return n.a.createElement("div",null,t)}}])&&_(e.prototype,r),a&&_(e,a),b}(i.Component)},function(t,e){t.exports=require("@boomerang/carbon-addons-boomerang-react")},function(t,e){t.exports=require("axios")}]));
我希望这个需求声明单独保存在另一个文件中。由于延迟加载/代码分割，boomerangHeader块也被单独创建，但这个require语句没有被分割到不同的文件中。
我尝试了webpack的splitChunks插件，但也没有将其从主捆绑包中分离出来。
有没有任何可能的方法，我们可以从这个捆绑包中删除这个require语句，并将其单独保存在其他一些文件中，这样我就可以在非回旋镖环境中工作时忽略该文件。或者有什么方法可以忽略"；模块未找到"；客户端应用程序出错？
如果有人能在这方面帮助我，那就太好了。
关于如何将导入语句从webpack捆绑包拆分到一个单独的文件，我找不到任何合适的解决方案，因为我想这就是webpack的工作方式。我想把它分开，这样我就可以根据条件忽略那个文件。
但是，在客户端应用程序中忽略包本身似乎解决了这个问题。
if (isnotBoomerang) {
var newClientPlugins = [];
newClientPlugins.push(
new webpack.IgnorePlugin(/@boomerang/)
);
newClientPlugins.push(
new HtmlWebPackPlugin({
template: APP_DIR + '/client/index.html',
})
);
client['plugins'] = newClientPlugins;
}