問(wèn)題表現(xiàn)[WHAT]

前段時(shí)間用vue-cli開(kāi)發(fā)頁(yè)面，一直以來(lái)由于webpack和babel都是框架自帶的，使用的也很好，就沒(méi)有特別注意過(guò)語(yǔ)法方面的問(wèn)題.

但是這次頁(yè)面在android 5.0及以下系統(tǒng)的模擬器上完全無(wú)法顯示，調(diào)試顯示dom未渲染，js報(bào)錯(cuò)"Unexpected strict mode reserved word"

本來(lái)這種問(wèn)題很常見(jiàn)嘛，嚴(yán)格模式下js保留字沖突，最常見(jiàn)的就是命名時(shí)采用了保留字，但這次不正常啊，我開(kāi)了eslint寫(xiě)的代碼，哪來(lái)的保留字沖突呢？

然后是極為惡心的查壓縮代碼手動(dòng)分段調(diào)試，最后定位到“l(fā)et”關(guān)鍵字上。

分析[WHY]

誒，不是有babel嗎？哪來(lái)的let呢？因?yàn)閷?xiě)有l(wèi)et的js文件是放置在static下的一個(gè)輔助腳本，通過(guò)import導(dǎo)入，而vue-cli的webpack相關(guān)配置如下

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

很明顯對(duì)吧，并不編譯static下文件

那么為什么報(bào)錯(cuò)信息為“Unexpected strict mode reserved word”呢，因?yàn)閘et在es5中并不是關(guān)鍵字，無(wú)法識(shí)別，但是在嚴(yán)格模式下視為保留字，而android 5.0的webview明顯將let認(rèn)為是一個(gè)變量而不是關(guān)鍵字，從而認(rèn)為采用了保留字作為變量名，故報(bào)錯(cuò)

解決方法[HOW]

通過(guò)上面的解釋?zhuān)黠@可以想出來(lái)怎么解決這個(gè)問(wèn)題：

方法1.將相關(guān)的需要babel編譯js文件移動(dòng)到src下，同時(shí)記得修改引用的路徑【推薦】

方法2.修改build/webpack.base.conf.js下配置，將static文件夾下內(nèi)容加入babel編譯【不推薦，因?yàn)閟tatic下應(yīng)該就是放靜態(tài)文件的】