因為業務需要一定要使用安卓4.4的webview瀏覽頁面，測試的時候發生了白屏問題，很自然想到使用babel轉換部分ES6語法.

Babel 轉換 Promise 和 Symbol ES6語法的配置

# 兩項都需要放到生產依賴npm install babel-polyfill --savenpm install es6-promise --save

// main.jsimport 'babel-polyfill';import Es6Promise from 'es6-promise';Es6Promise.polyfill();

// babel.config.jsprocess.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;module.exports = { presets: [  [   '@vue/app',   {    useBuiltIns: 'entry',    polyfills: [     'es6.promise',     'es6.symbol',    ],   },  ], ], plugins,};

// 使用vue cli3構建的vue項目// vue.config.jsmodule.exports = { transpileDependencies: ['webpack-dev-server/client'], chainWebpack: (config) => { config.entry.app = ['babel-polyfill', './src/main.js']; }}

但結果還是白屏，那么決定使用Babel把語法轉換成安卓4.4以上，應該沒有問題了。

// .browserslistrc>= 1%last 1 major versionnot deadAndroid >= 4.4

不同運行環境下的嚴格模式

結果還是白屏，查閱眾多網絡文章，同樣沒有很好的答案...

百思不得其解，無奈之下在 Android Studio 上下載了個4.4的模擬器，在內置瀏覽器上打開頁面，使用 Chrome 遠程調試 Android 上的瀏覽器, 在 Chrome 上地址欄輸入 chrome://inspect/#devices 選擇相應模擬器設備的 inspect 就會彈出 console 調試。

沒想到發現報錯是 Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode ，意思是在嚴格模式下的對象里不能重復定義相同屬性，但是這在現代瀏覽器(Chrome)的嚴格模式上運行是沒有問題的，其結果是后定義的屬性值會覆蓋前定義的屬性值，例如：

'use strict'var test = { a: 1, a: 2,}// 結果test會定義成 => {a: 2}

但是為什么會這樣呢，在打包后的報錯js文件里將其格式化后發現是組件的屬性重復定義了,

<van-nav-bar title="標題" left-text="返回" right-text="按鈕" left-arrow @click-left="onClickLeft" @click-right="onClickRight" :left-arrow="true"/>

我的項目里 Vant 的 left-arrow 被我重復定義了，組件會被轉義成js：

所以說不同運行環境的嚴格模式還是會有不一樣的結果，

在網上查了下資料總結了嚴格模式下的幾種錯誤：

1. 我上面遇到的對象屬性重復定義

2. 在函數聲明中相同的參數名

SyntaxError: Strict mode function may not have duplicate parameter names.

例如：

function fix(a,b,a) {      return a+b;    }

3. 用前導0聲明8進制直接量

SyntaxError: Octal literals are not allowed in strict mode.

var a = 012;

4. 在eval中聲明變量、重新聲明、刪除或重寫eval和arguments這兩個標示符

SyntaxError: Assignment to eval or arguments is not allowed in strict mode.

例如：

'use strict';eval('var foo = 2');

5. 用delete刪除顯示聲明的標識符、名稱和具名函數

SyntaxError: Delete of an unqualified identifier in strict mode.

例如：

function temp() {  'use strict';  var test = 1;  delete test; }

6. 代碼中使用擴展的保留字，例如 interface , let , yield , package , private 等

SyntaxError: Unexpected strict mode reserved word

7. 使用了 with

SyntaxError: Strict mode code may not include a with statement

8. 函數中不可訪問caller、callee以及arguments

例如：

function foo(){ 'use strict'; foo.caller;  // TypeError foo.arguments; // TypeError arguments.callee; // TypeError}foo();

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。