vue项目使用D3.js V6版本ie浏览器白页问题处理

 问题描述:vue项目中用到D3.js 的v6版本,而ie浏览器对此的表现是白页。语法错误,指向箭头函数。

原因:看了网上*上的一个帖子D3.js v6 for IE11 (Pass-through CDN with JavaScript Transpilation to ES5)之后才留意到D3.js V6版本把依赖的子包拆了出来,单独针对d3配置babel-polyfill的话达不到预期效果。

解决:vue.config.js中添加D3.js相关的子包的配置依赖

module.exports = {
  transpileDependencies: [/node_modules\d3S*\/,'delaunator']
};

知识点:

transpileDependencies

  • Type: Array<string | RegExp>

  • Default: []

    默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。

  • 正则表达式样例:“/node_modules\d3S*\/” 

通常情况下 transpileDependencies 配置采用Array<string>即可满足需要,鉴于D3.js拆分出来的子包太多,且有共同特征(以d3开头),因此这里配置采用正则表达式的形式

delaunator 是测试过程中发现的另一个需要配置的依赖,具体哪儿用到了还未发现。