一、前言
开发vue项目过程中,在development模式下发现在IE10,、IE11中无法运行,打开控制台发现已经报错。错误信息提示语法错误,打开定位到的报错位置,可以发现是严格模式报错。编译的代码中出现严格模式可能是因为代码中存在es6而没有被转换为es5,而在项目中已经配置了babel;正常情况下是不会出现es6未被转换的情况的。
由于babel配置采用的是vue官方推荐的或者说vue官方默认的方案,那么是不是这个方案存在什么问题呢。
打开vue-cli官方文档,在其文档中看到这样的描述:
可以看到,默认情况下useBuiltIns的值为usage,而这种情况下如果项目中引入的依赖包需要特殊的polyfill是无法被检测出来的。那么可以肯定的是问题出自引用的依赖包中的代码包含高版本的es语法的特性而没有被检测出来进行polyfill。
二、解决方案
要解决这个问题可以通过引入browserslist包含的目标的所有polyfill。
1、安装babel/polyfill依赖包,如果已经安装过则可以跳过。
安装时执行:npm install --save @babel/polyfill
2、在vue.config.js中配置transpileDependencies。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。
可以根据控制台中报错的位置查看是哪个依赖报错了,这些依赖不一定是在package.json中引用的也可能是package.json中的依赖项的依赖项导致的。报错位置信息示例,如图。
配置如下:
const Terser = require('terser-webpack-plugin')
module.exports = {
// 此处省略其他配置
productionSourceMap: false,
// node_modules依赖项es6语法未转换问题
transpileDependencies: [
'ansi-regex',
'strip-ansi',
'vue-router'
]
}
3、配置babel。笔者项目中使用的babel.config.js方式。
module.exports = {
presets: [
['@vue/app', { useBuiltIns: 'entry' }]
]
}
4、在入口文件中导入polyfill。
在入口文件中添加 import '@babel/polyfill'。这会根据 browserslist 目标导入所有 polyfill,这样你就不用再担心依赖的 polyfill 问题了。
在完成以上配置后就不用再担心依赖的polyfill问题了,不过因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。