解决 Vue 浏览器兼容 edge safari ie 问题

最近做的一个Vue项目，遇到了在Edge浏览器，Safari（version: 9.xx）浏览器上打不开的问题。分别有以下报错：
Safari Error:

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

Edge Error:

SCRIPT1028: Expected identifier, string or number

const 和 ...（spread operator）语法都是ES6语法，这说明在Edge和safari 9 浏览器下都不支持ES6语法。带着这个判断，小编去查了一下es6的浏览器支持情况，果不其然，safari10以下和Edge14以下 和 IE 都不支持es6语法，具体ES6浏览器支持情况请参考以下表格：
Browser Support for ES6 (ECMAScript 2015)

找到问题的原因在于浏览器不支持ES6语法，所以需要使用Babel去编译。接下来是如何在前端项目中配置babel，使能够将ES6编译成ES5语法：

• 第一步，创建一个.babelrc文件在你的前端项目的根目录下，内容如下：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "transform-vue-jsx",
    "@babel/plugin-transform-runtime"
  ]
}

• 第二步，安装以上babel presets 和 plugins：

npm i @babel/preset-env transform-vue-jsx @babel/plugin-transform-runtime -S -D

• 第三部, 安装babel-loader, 配置到webpack.common.js 的loader，使其编译指定目录下的js文件:

npm i babel-loader -S -D

webpack.common.js loader配置: 
module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [path.join(__dirname, '..', 'src'),  path.join(__dirname, '..', 'node-modules')],
                options: {
                    presets: ['@babel/preset-env']
                }
            }
      ]
}

注意： 所有使用到了ES6语法的文件都需要配置在以上的 module> rules> include 里面。
重新运行项目，刷新浏览器发现页面恢复正常。

这篇文章涉及到的前端技术包括：ES6的新特性，babel的配置，等等。感兴趣的同学可以查看小编的其他文章或者自行学习。
参考文献： From ES5 to ESNext