关于"Unexpected strict mode reserved word"的其他出错可能

问题表现[WHAT]

前段时间用vue-cli开发页面,一直以来由于webpack和babel都是框架自带的,使用的也很好,就没有特别注意过语法方面的问题.

但是这次页面在android 5.0及以下系统的模拟器上完全无法显示,调试显示dom未渲染,js报错"Unexpected strict mode reserved word"

本来这种问题很常见嘛,严格模式下js保留字冲突,最常见的就是命名时采用了保留字,但这次不正常啊,我开了eslint写的代码,哪来的保留字冲突呢?

然后是极为恶心的查压缩代码手动分段调试,最后定位到“let”关键字上。

分析[WHY]

诶,不是有babel吗?哪来的let呢?因为写有let的js文件是放置在static下的一个辅助脚本,通过import导入,而vue-cli的webpack相关配置如下

{test:/\.js$/,loader:'babel-loader',include:[resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client')]}

很明显对吧,并不编译static下文件

那么为什么报错信息为“Unexpected strict mode reserved word”呢,因为let在es5中并不是关键字,无法识别,但是在严格模式下视为保留字,而android 5.0的webview明显将let认为是一个变量而不是关键字,从而认为采用了保留字作为变量名,故报错

解决方法[HOW]

通过上面的解释,明显可以想出来怎么解决这个问题:

方法1.将相关的需要babel编译js文件移动到src下,同时记得修改引用的路径【推荐】

方法2.修改build/webpack.base.conf.js下配置,将static文件夹下内容加入babel编译【不推荐,因为static下应该就是放静态文件的】

推荐阅读更多精彩内容