Angular5导入D3-selection时浏览器报语法错误问题已解决

我来分享下我们团队刚解决的同款问题——正好也是Angular5项目，一导入select from 'd3-selection'就触发Firefox的「SyntaxError: function statement requires a name」和IE的「Uncaught SyntaxError: Unexpected token (」错误，折腾了半天终于搞定了，给你参考：

问题根源 #

Angular5配套的TypeScript版本（通常是2.4.x左右）和Webpack打包工具对ES6+语法的转译支持有限，而较新版本的d3-selection使用了旧版浏览器（比如IE11、旧Firefox）不兼容的语法特性（比如箭头函数、不符合规范的匿名函数声明写法），导致转译不彻底就直接跑到浏览器里报错了。

具体解决步骤 #

• 锁定兼容的d3-selection版本
  我们降级到了对旧浏览器更友好的v1.4.0版本，执行命令：

  npm install d3-selection@1.4.0 --save
  

  这个版本的代码没有使用太新的语法，能被Angular5的打包工具正确转译为ES5。

• 完善polyfill配置
  打开项目根目录下的src/polyfills.ts，确保以下polyfill都取消注释并启用（如果没有的话手动添加）：

  // ES6+核心API的polyfill
  import 'core-js/es6/function';
  import 'core-js/es6/object';
  import 'core-js/es6/array';
  import 'core-js/es6/map';
  import 'core-js/es6/set';
  
  // 针对IE的额外polyfill
  import 'core-js/es7/object';
  import 'classlist.js';
  

  如果classlist.js没安装，先执行npm install classlist.js --save。

• 调整TypeScript编译配置
  打开tsconfig.json，确认compilerOptions里的配置：

  {
    "compilerOptions": {
      "target": "es5", // 强制编译为ES5兼容代码
      "lib": ["es2015", "dom"], // 引入必要的ES2015和DOM类型定义
      // 其他原有配置保持不变
    }
  }
  

• 重新打包/启动服务
  执行ng build --prod重新构建生产包，或者重启开发服务ng serve，之后再在Firefox和IE里测试就不会报错了。

我们当时也是试了各种排查方法，最后定位到是d3版本兼容性的问题，加上polyfill和编译配置的调整就彻底解决了，你可以照着试试~

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