1

正常来说项目都可以忽略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

}

以上都是比较常规的配置,但是配置过程中会出现报错

本地跑起来会报错:
image.png

浏览器运行报错:
image.png

主要原因是es6的importcommonjs声明冲突
有人说,在引入包的页面上,直接将import改成require就可以,
但是实际上还是会报错
如下:
image.png

其实也是有解决方案的
babel.config.js中多配置一个属性sourceType就可以

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType: 'unambiguous',
}

babel官方描述sourceType
主要有三个值
script: 可以编译不包含import/export,非严格模式
module: 可以编译ES6+的语法,含import/export
unambiguous:兼容以上二者


fashen007
4.7k 声望156 粉丝

被偏爱的,有恃无恐吧了


引用和评论

0 条评论