我发现了很多关于webpack中发生的“意外字符”@“的东西,但没有一个是专门与externals
webpack选项的错误相关的,也没有一个是有用的。我以前用过这个,带和不带@-符号,没有任何麻烦,所以我不知道为什么webpack现在变得暴躁。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = () => {
return {
mode: 'production',
target: 'node',
entry: './build.ts',
output: {
path: __dirname,
filename: `build.js`
},
node: {
__dirname: false,
__filename: false,
},
resolve: {
extensions: ['.ts', '.js'],
mainFields: ['es2015', 'module', 'main', 'browser']
},
module: {
rules: [
{
test: /\.ts$/i,
loader: 'ts-loader',
options: { configFile: 'tsconfig-build.json' },
exclude: [/\/node_modules\//]
}
]
},
externals: ['chalk', '@tubular/util'],
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
terserOptions: {
mangle: false,
output: { max_line_len: 511 }
}
})],
},
};
};
@是我想要排除的包名的必要部分,我以前排除过这样的包,所以这既神秘又烦人。
有谁知道这是怎么回事吗?
3条答案
按热度按时间1hdlvixo1#
我找到了一个解决方案,我也面临着同样的问题与Vue.js项目
--mode production
。所有其他模式都工作正常。这基本上是使用官方文档中的对象语法。
c90pui9n2#
我找到了一个答案,但肯定不是我想要的答案。
如果我使用
webpack-node-externals
包,我可以像这样外部化所有node_modules
:在这种特殊情况下,排除所有节点外部元素正好可以,所以
webpack-node-externals
解决了我眼前的问题。但是如果我想更有选择性,并且想排除名称中带有@的软件包,我手上仍然有一个谜。ua4mk5z43#
Webpack
externals选项依赖于externalsType 1。默认情况下,externalsType
是var
,这意味着您希望此变量存在于全局范围内。例如,如果我们通过脚本链接在浏览器中导入
jQuery
:在
window
对象中将有一个名为jQuery
的全局变量,因此Webpack
配置如下:声明:
当你发现一个来自
jquery
的导入时,把它从bundle中删除,并在它的位置使用jQuery
全局变量。如果你把这个配置没有
externals
:Webpack会尝试用一个名为
@tubular/util
的全局变量来替换这些requires或import:这肯定会抛出一个错误。
在您的特定情况下,通过脚本标记导入的
@tubular/util
创建了一个tbUtil
全局变量,因此您的配置应该是:如果有人试图编译
Node
包,并且他们想从包中排除一些已经安装的包,也可能出现此错误。例如,如果您使用此externals
配置而没有指定正确的externalsType
,则会得到类似的错误。在这些情况下,您应该根据需要指定适当的
externalsType
(这些是所有选项):然后,
Webpack
将取代变成这样
而且它不会在捆绑包中附带
@babel/core
。