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相关的子包的配置依赖
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 是测试过程中发现的另一个需要配置的依赖,具体哪儿用到了还未发现。