Create React App项目中Dygraphs压缩构建失败问题求助

我之前也碰到过一模一样的坑！Create React App默认会跳过node_modules目录的代码转译，而Dygraphs源码里的部分ES6语法（或者未做预转译的特性），在生产构建时会被Terser压缩器卡住，导致报错。下面是几个亲测有效的解决办法：

方法一：直接使用预构建的Dygraphs版本 #

这是最简单快捷的方案，直接导入Dygraphs已经转译压缩好的dist文件，避开未转译的源码：

// 替换原来的源码导入
import Dygraph from 'dygraphs/dist/dygraph.min';
// 别忘了同步导入样式文件，否则图表样式会错乱
import 'dygraphs/dist/dygraph.min.css';

预构建的dygraph.min.js已经处理过所有兼容问题，完全适配CRA的生产构建流程。

方法二：让CRA转译Dygraphs模块（需修改配置） #

如果必须使用源码版本，可以配置CRA把Dygraphs纳入转译范围：

情况1：已经执行过npm run eject弹出配置 #

• 打开项目根目录下的config/webpack.config.js
• 找到module.rules里的oneOf数组，定位到babel-loader的规则
• 修改exclude规则，让它排除除了Dygraphs之外的node_modules内容：

  // 修改前
  exclude: /node_modules/,
  // 修改后
  exclude: /node_modules(?!\/dygraphs)/,
  

情况2：不想弹出配置（推荐用craco） #

• 先安装craco工具：npm install @craco/craco --save-dev
• 在项目根目录创建craco.config.js，添加如下配置：

  module.exports = {
    babel: {
      loaderOptions: {
        exclude: /node_modules(?!\/dygraphs)/,
      },
    },
  };
  

• 修改package.json里的脚本命令，把react-scripts替换成craco：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

• 重新执行npm run build即可。

方法三：降级Dygraphs到稳定版本 #

部分新版本的Dygraphs可能引入了未做兼容处理的语法，试试降级到已知兼容的旧版本，比如：

npm install dygraphs@2.1.0 --save

这个版本的源码转译兼容性更好，大概率能绕过构建报错。

额外小提示 #

• 构建前可以先清空缓存：npm run build -- --no-cache，避免旧编译缓存干扰结果
• 无论用哪种方案，都要确保导入了Dygraphs的CSS文件，否则图表会失去样式

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