Webpack 4:React Library 的生产模式失败
2019-01-16
278
我正在尝试构建我的 React 库,但是在
mode: production
下失败。当我将库导入另一个应用程序时,我收到以下消息:
Uncaught TypeError: Cannot set property props of #<TWithProps> which has only a getter
.
随后是:
上述错误发生在 <_class3> 组件中
问题是它似乎捆绑了我的库,但是在导入捆绑的库时,我收到上述 2 个错误。 此外 这不会发生在开发模式下。
我尝试遵循许多指南,但它们都导致相同的结果。我的第一个假设是这可能是由于我的最小化插件(我尝试过
UglifyPlugin
和
TerserPlugin
)但事实并非如此。我还在 webpack 的文档中看到,如果提供了最小化插件,它应该使用它。但是看起来似乎不是这样?
这是我的 webpack
module.exports = {
mode: 'production',
entry: {
index: [
'babel-polyfill',
'./src/index.js',
],
},
output: {
path: srcBuild,
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
libraryTarget: 'commonjs',
libraryExport: 'default',
},
optimization: {
noEmitOnErrors: true,
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true,
terserOptions: {
mangle: false,
compress: {
reduce_funcs: false,
reduce_vars: false,
keep_classnames: true,
keep_fnames: true,
keep_fargs: true,
pure_getters: true,
},
},
}),
],
}
我希望我的库能够像在
mode: development
中一样正常运行。
2个回答
请问您如何从其他应用程序使用您的库?您的配置中有
libraryTarget: 'commonjs'
。如果您不知道客户端将如何使用您的库,建议的选项是通过设置
libraryTarget: 'umd'
将导出设置为
umd
。
这应该允许您使用 ES6
import
或只是
require
它,webpack 或其他应用程序的捆绑器将负责解决它们。
Fernando Kramer
2019-01-16
通过添加此插件解决了这个问题
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
KennyNguyen
2019-01-17