在create-react-app中使用ES6 npm模块构建失败的解决办法咨询

我来分享几个可行的解决方案，帮你搞定这个构建时的代码压缩问题：

方案一：用react-app-rewired修改Webpack配置（推荐，无需eject） #

这个方法不用 eject 项目就能自定义Webpack规则，是社区常用的解决方案：

1. 先安装所需依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，添加以下配置来转译指定的依赖包（或所有node_modules）：

const { override, addBabelLoader } = require('customize-cra');

module.exports = override(
  // 如果你想转译所有node_modules中的包（注意：会增加构建时间）
  addBabelLoader({
    test: /\.js$/,
    include: /node_modules/,
    // 排除一些本身已经是ES5兼容的核心包，避免重复转译
    exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
    options: {
      presets: ['@babel/preset-env']
    }
  })

  // 如果你能确定哪些包有问题，更推荐只转译这些特定包，比如：
  // addBabelLoader({
  //   test: /\.js$/,
  //   include: [
  //     require('path').resolve(__dirname, 'node_modules/ipfs-api'),
  //     require('path').resolve(__dirname, 'node_modules/其他有问题的包名')
  //   ],
  //   options: {
  //     presets: ['@babel/preset-env']
  //   }
  // })
);

3. 修改package.json中的scripts命令，替换成react-app-rewired：

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

之后再执行npm run build应该就能正常完成构建了。

方案二：Eject项目后修改Webpack配置（不推荐，不可逆） #

如果你能接受eject项目（一旦执行就无法恢复），可以直接修改Webpack的babel-loader规则：

1. 执行eject命令：

npm run eject

2. 在config/webpack.config.js中找到babel-loader的配置块，修改include字段，把node_modules目录加入进去：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  // 把paths.appNodeModules加入include数组，或者直接指定有问题的包路径
  include: [paths.appSrc, paths.appNodeModules],
  loader: require.resolve('babel-loader'),
  options: {
    // 保留原有配置
  }
}

同样，建议只包含有问题的依赖包，避免不必要的转译拖慢构建速度。

方案三：升级或替换依赖包 #

有些依赖包的新版本可能已经修复了未转译为ES5的问题，你可以尝试：

• 检查有问题的依赖包是否有更新版本，执行npm outdated查看，然后升级到最新兼容版本
• 如果某个包一直有问题，看看是否有功能类似、且本身是ES5兼容的替代包

注意事项 #

• 转译所有node_modules会显著增加构建时间，所以优先选择只转译有问题的特定包
• 如果你使用的是较新版本的Create React App，可能已经内置了对部分现代语法的支持，可以先检查官方文档确认是否有其他配置项可以调整

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