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

最近項目須要兼容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",
複製代碼

2. 在項目工程中，新建一個.babelrc配置文件，內容以下

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}
複製代碼

3. 在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須要在瀏覽器運行的，否則怎麼把原生對象插進全局變量呢？

4. 安裝 babel-polyfill

npm install --save babel-polyfill
複製代碼

注意--save選項而不是--save-dev，由於這是一個須要在源代碼以前運行的

5. 在webpack項目主入口 js 文件的頂部 import 'babel-polyfill'
6. 更新 .babelrc 文件

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "usage"
    }]
  ]
}
複製代碼

若是咱們沒有將 "useBuiltIns" 選項的設置爲 "usage" ，就必須在其餘代碼以前 require 一次完整的 polyfill

如今 webpack 打包後，項目應該是能夠正常在ie下正常使用es6了