如何解决d3-array报unknown Statement of type "ForOfStatement"编译错误

问题现象 #

项目执行生产环境优化构建时编译失败，d3-array/src/number.js、d3-array/src/merge.js编译环节抛出语法错误，提示未知ForOfStatement类型语句，具体报错信息：

正在创建优化的生产构建...
编译失败。
错误指向文件：./node_modules/d3-array/src/merge.js
模块构建失败（触发来源：./node_modules/babel-loader/lib/index.js）
错误详情：node_modules/d3-array/src/merge.js: 未知的"ForOfStatement"类型语句

报错对应代码片段：

// merge.js 触发报错的代码段
for (const array of arrays) {
  yield* array;
}

// number.js 触发报错的代码段
export function* numbers(values, valueof) {
  if (valueof === undefined) {
    for (let value of values) {
      if (value != null && (value = +value) >= value) {
        yield value;
      }
    }
  } else {
    let index = -1;
    for (let value of values) {
      if ((value = valueof(value, ++index, values)) != null && (value = +value) >= value) {
        yield value;
      }
    }
  }
}

根因说明 #

• 高版本d3-array源码使用了ES6+标准的for...of循环、Generator生成器语法，项目配置的babel-loader默认跳过node_modules目录下所有文件的语法转译，构建时无法直接识别这类高版本语法，直接抛出错误。
• 本地使用的babel转译插件版本过旧，本身不支持for...of、Generator语法的转换，也会触发同类报错。

修复方法 #

• 调整webpack的babel-loader规则，将d3-array加入转译白名单，不跳过该模块的语法转换
  找到项目webpack配置里babel-loader的exclude项，修改规则放行d3-array模块，示例配置：

  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules[\\/](?!d3-array)/
  }
  

• 补全babel转译依赖，支持for...of和Generator语法转换
  安装所需转译插件：

  npm install --save-dev @babel/plugin-transform-for-of @babel/plugin-transform-regenerator
  

  在babel配置文件（.babelrc或babel.config.js）中启用插件：

  {
    "plugins": [
      "@babel/plugin-transform-for-of",
      "@babel/plugin-transform-regenerator"
    ]
  }
  

• 若不需要使用高版本d3的新特性，可直接将d3-array降级到兼容旧构建链的稳定版本：

  npm install d3-array@2.12.1 --save
  

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