vue-cli3+babel7项目兼容IE

正常来说项目都可以忽略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:兼容以上二者