【爬坑日記】使用webpack、babel-loader/babel-polyfill解決ie瀏覽器不支援es6

BenjaminC發表於2019-04-03
WebBabel瀏覽器

最近專案需要相容ie（真是的萬惡的ie..），打包後的專案一直報錯，原因就是ie不支援很多es6的寫法，比如箭頭函式等。使用babel解決ie相容也應該是目前大多數都採取的方案。

以下為自己總結的解決過程，若有不對還望多多指正。

babel是什麼(官網)

  1. 安裝依賴
npm install --save-dev babel-core babel-loader@7 babel-preset-env
複製程式碼
  • babel-core：babel的核心包
  • babel-loader：babel的loader包
  • babel-preset-env：包括支援現代 JavaScript（ES2015，ES2016 等）的所有外掛（也可以自定義單一功能外掛，詳情見官網）

注意：安裝babel-loader時，需要指定7.x的版本，否則在打包過程中會報錯，我安裝的版本如下

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
複製程式碼
  1. 在專案工程中，新建一個.babelrc配置檔案，內容如下
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}
複製程式碼
  1. 在webpack.config.js中配置babel
module:{
    rules:[
        {
            test:'/\.js$/',
            use:['babel-loader'],
            exclude:/node_module/
        }
    ]
}
複製程式碼

至此已經用 babel 在構建過程中轉譯語法糖，比如說將 ES7/ES6/JSX 中的語法部分（例如箭頭函式）轉譯成 ES5。 但若要使用像 Promise 或 WeakMap 這樣的新內建函式，像 Array.from 或 Object.assign 這樣的靜態方法，像Array.prototype.includes 這樣的例項方法，以及 generator 函式等，還需要引入一個 babel-polyfill，需要注意 polyfill 則是解決原生物件的問題，比如說你的瀏覽器不支援 Promise，babel 就給你建一個 Promise 供你使用。所以，polyfill需要在瀏覽器執行的，不然怎麼把原生物件插進全域性變數呢？

  1. 安裝 babel-polyfill
npm install --save babel-polyfill
複製程式碼

注意--save選項而不是--save-dev，因為這是一個需要在原始碼之前執行的

  1. 在webpack專案主入口 js 檔案的頂部 import 'babel-polyfill'
  2. 更新 .babelrc 檔案
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "usage"
    }]
  ]
}
複製程式碼

如果我們沒有將 "useBuiltIns" 選項的設定為 "usage" ，就必須在其他程式碼之前 require 一次完整的 polyfill

現在 webpack 打包後，專案應該是可以正常在ie下正常使用es6了

相關文章