正常来说项目都可以忽略IE,无奈我们还是有一些比较传统的大企业要用我们的系统,所以还得支持IE10~11;
网上比较多资料都比较旧了,自己撸了一些就不想看了,大部分都是因为不同的babel版本不一样
正常来说vue-cli3的项目、默认配置会将es6+的转成e5,在babel.confi.js
中加上以下配置即可
module.exports = {
presets: [
'@vue/app'
]
}
默认忽略node_moudules,但是有些包可能并没有做好转化,所以需要我们转化
vue官方也提供了比较好的属性transpileDependencies
来将node_modules里面的部分包加到babel的转化
如下配置,在vue.config.js
中添加
module.exports = {
// ...省略多余配置
transpileDependencies: [''], // node_modules里面的包名,比如nprogress
}
以上都是比较常规的配置,但是配置过程中会出现报错
本地跑起来会报错:
浏览器运行报错:
主要原因是es6的import
和commonjs
声明冲突
有人说,在引入包的页面上,直接将import
改成require
就可以,
但是实际上还是会报错
如下:
其实也是有解决方案的
在babel.config.js
中多配置一个属性sourceType
就可以
module.exports = {
presets: [
'@vue/app'
],
sourceType: 'unambiguous',
}
babel官方描述sourceType
主要有三个值script
: 可以编译不包含import
/export
,非严格模式module
: 可以编译ES6+的语法,含import
/export
unambiguous
:兼容以上二者
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。