用 vue 框架开发的 SPA, 在测试环境和生产环境的代码都使用了 UglifyJsPlugin 插件进行压缩, 为了在测试环境方便定位错误, 开启了 sourcemap 功能, 在 ios10 下就不受影响, 但是将代码发布到测试环境后, 在 ios10 的手机上跑不起来, 无论是微信浏览器还是 Safari 浏览器, 都只能看到一个白白的屏幕.
手机连接电脑后, 在电脑端的 Safari 里, 报错如下:
SyntaxError: Cannot declare a let variable twice: 'e'.
但事实上, 并没有写过这样的代码, 而 webpack 编译后的语句是这样的:
- let e = e => { console.log(e);
- for (let e of [1, 2, 3])
- console.log(e);
- };
这段语法, 在 es6 的标准中是没有错的, 但 Safari 会认为这是错误的. 他们在第十七万一千零四十一号 bug 中承认了自己的错误:
We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter
当你定义一个与参数同名的 for 循环迭代变量时, 我们错误地认为这是一个语法错误.
解决方法:
进入 build 文件夹
找到 webpack.prod.conf.js 文件
在 UglifyJsPlugin 的定义里添加关于 mangle 的选项, 如下:
- new UglifyJsPlugin({
- uglifyOptions: {
- compress: {
- warnings: false
- },
- mangle: {
- safari10: true
- },
- safari10: true
- },
- sourceMap: config.build.productionSourceMap,
- parallel: true
- }),
来源: http://www.qdfuns.com/article/13237/d14c2bce32e8d15ba587eab202afd1ab.html