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

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

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

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

1 2 3

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

知识点：

transpileDependencies

• Type: Array<string | RegExp>

• Default: []

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

• 正则表达式样例：“/node_modules\\d3\S*\\/” 

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

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