导入d3时出现Unexpected token语法错误问题求助

该语法错误由未转译的ES6+语法导致，具体触发点是d3-array包内的箭头函数语法：

• 你使用的d3 v6及以上版本，其依赖的所有d3-*子包默认输出ES6+语法的代码，不会主动做ES5兼容处理
• 默认情况下Babel会跳过整个node_modules目录的转译，所以当构建流程读取到d3-array内的箭头函数语法时，无法识别就抛出了对应语法错误
• 你当前的Babel配置仅配置了@babel/preset-typescript，缺少可以把ES6+语法转成ES5的@babel/preset-env预设，进一步加剧了兼容问题

可根据项目情况选择以下任意一种方案处理：

• 方案1：调整Babel转译范围，将d3相关包加入转译白名单
  修改webpack配置中babel-loader的exclude规则，放开对d3相关包的转译限制，示例配置：

  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        loader: 'babel-loader',
        // 只排除node_modules中除d3及d3子包以外的内容
        exclude: /node_modules\/(?!(d3|d3-array|d3-scale|d3-shape|d3-interpolate)\/)/
      }
    ]
  }
  

• 方案2：补充Babel兼容预设
  先安装@babel/preset-env依赖：

  npm install @babel/preset-env --save-dev
  

  然后修改Babel配置文件（.babelrc或babel.config.json），加入preset-env配置：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": "last 2 versions, ie 11"
      }],
      "@babel/preset-typescript"
    ]
  }
  

• 方案3：降级d3版本（无需修改构建配置的备选方案）
  d3 v5版本默认输出ES5兼容的代码，不会存在ES6语法报错问题，直接执行命令降级即可：

  npm install d3@5
  

• 方案4：调整构建工具预构建配置
  如果你使用的是Vite等支持依赖预构建的工具，将d3加入预构建依赖列表即可，工具会自动对d3做兼容转译。

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