React构建失败：无法压缩asn1.js文件，不升级react/react-scripts如何解决？

react-scripts@1.x 版本内置的压缩工具仅支持 ES5 语法，而 azure-storage 依赖的高版本 asn1.js 使用了 ES6+ 语法，导致压缩过程报错。

• 方案1：强制锁定asn1.js到兼容的ES5版本
  asn1.js@5.4.1是最后一个全量使用ES5语法的正式版本，你可以通过包管理器的依赖覆盖功能，强制项目内所有依赖统一使用该版本：

  1. 若使用Yarn包管理器，在package.json根节点添加如下配置：

  "resolutions": {
    "asn1.js": "5.4.1"
  }
  

  配置完成后执行yarn install重新安装依赖即可。
  2. 若使用npm >=8.3.0版本，在package.json根节点添加如下配置：

  "overrides": {
    "asn1.js": "5.4.1"
  }
  

  配置完成后执行npm install重新安装依赖。如果npm版本低于8.3.0，可以安装第三方工具npm-force-resolutions实现相同的版本锁定效果。

• 方案2：调整构建配置转译asn1.js语法
  通过react-app-rewired工具修改内置webpack配置，让babel额外转译node_modules下的asn1.js代码，适配旧版压缩工具的要求：

  1. 先安装适配react-scripts@1.x的配置修改工具：

  npm install react-app-rewired@1.6.2 customize-cra@0.9.1 --save-dev
  

  2. 项目根目录新建config-overrides.js文件，写入以下配置：

  const { override, babelInclude } = require('customize-cra');
  const path = require('path');
  
  module.exports = override(
    babelInclude([
      path.resolve('src'),
      // 对asn1.js额外执行语法转译
      path.resolve('node_modules/asn1.js')
    ])
  );
  

  3. 修改package.json中的scripts字段，将所有react-scripts替换为react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  }
  

  调整完成后重新执行生产构建命令即可正常打包。

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