最近做的一个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)
| Browser | Version | Date |
|---|---|---|
| Chrome | 58 | Apr 2017 |
| Firefox | 54 | Jun 2017 |
| Edge | 14 | Aug 2016 |
| Safari | 10 | Sep 2016 |
| Opera | 55 | Aug 2018 |
找到问题的原因在于浏览器不支持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
