最近做的一个 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
来源: http://www.jianshu.com/p/852b36e33328