React应用生产构建minify压缩失败，无react-script依赖如何解决

问题根因 #

你当前遇到的构建压缩失败是因为项目依赖的d3-array新版本使用了ES6+的新语法，而你eject后导出的旧版本React构建配置默认不会对node_modules下的依赖做语法转译，老旧的压缩工具无法识别新语法就会抛出minify失败错误。

解决方案 #

• 方案1：调整转译规则，将d3相关依赖纳入babel转译范围 #

  你当前的配置默认跳过了所有node_modules下文件的转译，修改两处配置即可：

  1. 打开config/webpack.config.prod.js（生产构建配置文件），找到babel-loader的配置项，将原来的exclude: /node_modules/规则修改为排除除d3相关包外的node_modules文件：

     exclude: /node_modules\/(?!(d3-array|d3-scale|d3-color)\/)/
     // 后面括号里加所有你用到的d3子包即可
     

  2. 同步修改package.json中jest配置的transformIgnorePatterns字段，避免单测报错：

     "transformIgnorePatterns": [
       "[/\\\\]node_modules[/\\\\](?!(d3-array)/).+\\.(js|jsx|mjs)$"
     ]
     

  改完重新执行构建即可。

• 方案2：降级d3到兼容ES5的版本 #

  不想修改构建配置的话，直接将d3及相关依赖降级到最后一批输出ES5代码的版本即可，执行以下安装命令：

  npm install d3@6.x
  # 如果仅单独安装了d3-array，执行：
  npm install d3-array@2.x
  

  d3 v6及对应版本的子包都是编译为ES5语法输出的，不需要额外转译就能直接压缩。

• 方案3：升级压缩工具配置适配新语法 #

  如果你不想降级依赖也不想加转译规则，可以修改生产配置的压缩器参数，打开config/webpack.config.prod.js找到terser-webpack-plugin的配置项，将terserOptions下的ecma参数设置为2015或更高：

  terserOptions: {
    ecma: 2020,
    // 其他原有配置保持不变
  }
  

  这个方案适合你的构建工具版本本身支持高版本ECMA语法的情况，如果修改后还是报错，建议升级terser-webpack-plugin到最新版。

• 方案4：全量升级eject后的构建配置 #

  你当前的构建配置是旧版react-scripts eject出来的，长期来看可以参考最新版react-scripts的配置，全量升级babel、webpack、压缩工具等相关依赖的版本，彻底解决高版本语法兼容问题，不过改造成本相对较高。

内容的提问来源于stack exchange，提问作者LittleFunny