Webpack 4：React 库的生产模式失败答案

【问题标题】：Webpack 4: Production mode fails for React LibraryWebpack 4：React 库的生产模式失败
【发布时间】：2019-06-10 23:02:57
【问题描述】：

我正在尝试构建我的反应库，但是它在 mode: production 上失败了。当我将我的库导入另一个应用程序时，我收到以下消息：

Uncaught TypeError: Cannot set property props of #<TWithProps> which has only a getter.

接着是：

The above error occurred in the <_class3> component

问题是它似乎捆绑了我的库，但是在导入捆绑的库时，我得到了上面的 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 中一样正常运行。

【问题讨论】：

标签： reactjs webpack webpack-4

【解决方案1】：

请问您是如何使用其他应用程序中的库的？您的配置中有libraryTarget: 'commonjs'。如果您不知道您的客户将如何使用您的库，建议的选项是通过设置libraryTarget: 'umd' 将导出设置为umd。

这应该允许您使用 ES6 import 或仅使用 require 它，webpack 或其他应用程序的捆绑器将负责解决它们。

【讨论】：

嘿，我在做 ``` import MyLibrary from 'MyLibrary': const { myComponent1, myComponent2 } = MyLibary; ```这在开发模式下工作得很好

【解决方案2】：

添加这个插件解决了

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),

【讨论】：