与webpack捆绑在一起时应如何将material-ui外部化 [英] How should material-ui be externalized when bundling with webpack
问题描述
我将material-ui/index.js
中的material-ui打包到material-ui.js中,以供外部使用.
导入语句就像
I packed material-ui from material-ui/index.js
into material-ui.js for serving it externally.
The import statements are like
import FlatButton from 'material-ui/FlatButton';
应该如何将webpack配置为将material-ui排除为外部依赖项?\我相信更改导入将有助于外部化,但不知道此后如何处理material-ui.
How should webpack be configured to exclude material-ui as external dependency?\ I believe changing imports as this would help in externalizing but have no idea how to deal with material-ui thereafter.
import material-ui from 'material-ui'
推荐答案
经过大量研究,我发现可以解决此问题;
After a lot of research here is what I have found to solve this problem;
- 将此方法放在模块上方.在webpack.config中导出
function externalForMaterialUi(context, request, callback) {
if (/@material-ui.+/.test(request)) {
const name = request.replace(/^.*[\\\/]/, '')
return callback(null, 'root MaterialUI.' + name);
}
callback();
}
然后您应该从webpack外部部分中调用该方法;
And after you should call the method from your webpack externals section;
externals: [
externalForMaterialUi,
]
通过这种方式,您捆绑包中所有的material-ui软件包都将被排除.
with this way all the packages of material-ui from your bundle will be excluded.
另一种方法是在内部外部部分中逐一包含所有材料包;
Another way of doing this is including all the material packages one by one inside externals section;
externals: [
{
'@material-ui/types': {
root: 'MaterialUI',
commonjs2: 'material-ui',
commonjs: 'material-ui',
amd: 'MaterialUI',
umd: 'MaterialUI',
},
'@material-ui/pickers': {
root: 'MaterialUI',
commonjs2: 'material-ui',
commonjs: 'material-ui',
amd: 'MaterialUI',
umd: 'MaterialUI',
},
'@material-ui/core': {
root: 'MaterialUI',
commonjs2: 'material-ui',
commonjs: 'material-ui',
amd: 'MaterialUI',
umd: 'MaterialUI',
},
'@material-ui/lab': {
root: 'MaterialUI',
commonjs2: 'material-ui',
commonjs: 'material-ui',
amd: 'MaterialUI',
umd: 'MaterialUI',
},
},
],
这篇关于与webpack捆绑在一起时应如何将material-ui外部化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!