IE 頁面空白

報錯資訊

 此時頁面一片空白

報錯原因

Babel 預設只轉換新的 JavaScript 語法（如箭頭函式），而不轉換新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的物件或者方法。

例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。為了解決這個問題，我們使用一種叫做 Polyfill（程式碼填充，也可譯作相容性補丁）的技術。

簡單的說，相容問題一般是IE 對於es6 的部分新物件、表示式，語法並不支援，解決方案是使用 babel-polyfill 來正常使用ES6。

Polyfill 是什麼

舉個例子，有些舊瀏覽器不支援 Number.isNaN方法，Polyfill就可以是這樣的：

if(!Number.isNaN) {
    Number.isNaN = function(num) {
        return(num !== num);
    }
}

Polyfill就是類似這樣解決API的相容問題

解決方案

1、使用babel-polyfill

引入 babel-polyfill 

npm i -S babel-polyfill

如何使用

使用它時需要在你應用程式的入口點頂部或打包配置中引入。

在main.js 引入

import 'babel-polyfill'

或者在config中的 webpack.base.conf.js中 修改配置

entry:{
    app:['babel-polyfill','./src/main.js']      
}

2、在index.html 加入以下程式碼（非必須）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3、babel-loader 中指定模組轉碼

增加了poly-fill還是報錯，這一般是使用了第三方的ui框架、庫、外掛等，並且這些ui框架、庫、外掛底層有es6的語法。

找到webpack.base.conf.js 中的babel-loader

比如我這裡用了element-ui 跟 v-charts  修改成如下：

 {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/v-charts/src'),
          resolve('node_modules/vue-awesome'),
          resolve('node_modules/element-ui/packages'),
          resolve('node_modules/element-ui/src')
        ]
}

4、打包問題

如果是webpack程式碼打包出錯，一般到 github webpack Issues 中可以找到答案

這個錯誤是因為webpack-dev-server 版本問題

5、Babel 配置 .babelrc檔案

.babelrc是Babel的配置檔案，放在專案根目錄下。一般情況下.babelrc檔案不需要修改，如果以上都做了，還是報錯，可以看下官網文件來配置下該檔案

在專案使用 vue-cli 生成的程式碼中，根目錄有一個 .babelrc 檔案。在預設生成的模板內容中，增加 "useBuiltIns": "entry" ，這是一個指定哪些內容需要被 polyfill(相容) 的設定
useBuiltIns 有三個設定

• false - 不做任何操作
• entry - 根據瀏覽器版本的支援，將 polyfill 需求拆分引入，僅引入有瀏覽器不支援的polyfill
• usage - 檢測程式碼中 ES6/7/8 等的使用情況，僅僅載入程式碼中用到的 polyfill

{
  "presets": [
    ["env", {
      "modules": false,
      "useBuiltIns": "entry"
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

具體相關可以檢視Babel官網：https://www.babeljs.cn/

總結

1、用vue 寫的專案最多可以相容到IE9 及以上版本

2、使用 babel-polyfill

3、在babel-loader中指定需要轉碼的第三方的ui框架、庫、外掛路徑

4、配置 .babelrc檔案

5、Babel 是一個厲害的東西 https://www.babeljs.cn/