美文网首页
关于"Unexpected strict mode reserv

关于"Unexpected strict mode reserv

作者: jijiwuming | 来源:发表于2018-05-23 14:17 被阅读0次

    问题表现[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下应该就是放静态文件的】

    相关文章

      网友评论

          本文标题:关于"Unexpected strict mode reserv

          本文链接:https://www.haomeiwen.com/subject/idkrjftx.html