Webpack4+Babel7+ES6兼容IE8

前陣子重構了一個挺有意思的項目，是一個基於瀏覽器環境的數據採集sdk。公司各個產品的前端頁面中都嵌入了這個sdk，用於採集用戶的行爲數據，上傳到公司的大數據平臺，爲後續的運營決策分析提供數據支撐。

筆者接手這個項目的時候，前任開發者已經把功能都寫差很少了。惟一須要作的就是作下模塊化拆分和代碼規範，以便後續的開發維護。模塊化拆分用webpack，代碼規範用eslint。既然要重構，那就順手用es6重寫吧。callback也不要了，全換成promise，async、await也用起來，反正怎麼爽怎麼寫。

問PM瀏覽器最低兼容到哪一個版本，PM說兼容公司各個產品所兼容的最低版本就行。和公司各個產品的前端負責人溝通後發現，竟然有兼容IE8的，真是我了個fk。

google了一下Webpack+Babel+ES6兼容IE8，果真坑不少。試了好幾篇博客給出的方案，都跑不通。也沒怎麼研究具體哪裏有問題，由於那些解決方案裏面的webpack和babel都是舊版的，跑通了也不高興用。筆者分析了那些博客中提出的幾個關鍵性問題，而後參考webpack和babel最新的官方文檔，總結出一套最新的Webpack4+Babel7+ES6兼容IE8的方案。

ES6兼容IE8須要解決四個問題

語法支持

IE瀏覽器不支持ES6的語法，只在IE十、IE11中支持了部分ES6的API，因此在IE瀏覽器中使用ES6須要把ES6的代碼編譯成ES5才能執行。方法也很簡單，就是用babel-loader。這部分沒什麼坑，因此我也就不細說了。給個網站，你們能夠自行查看ES五、ES6在各瀏覽器版本中的支持狀況

kangax.github.io/compat-tabl…

ES3保留關鍵字

若是在IE8下經過object.propertyName的方式使用ES3中的保留關鍵字（好比default、class、catch），就會報錯

SCRIPT1048: 缺乏標識符
複製代碼

webpack有一款loader插件es3ify-loader專門用來處理ES3的關鍵字兼容問題。這個插件的做用就是把這些保留字給你加上引號，使用字符串的形式引用。

// 編譯前
function(t) { return t.default; }

// 編譯後
function(t) { return t["default"]; }
複製代碼

然而，筆者親身實踐後發現，UglifyJS原本就已經提供了對IE瀏覽器的支持，不須要額外引入es3ify-loader。webpack默認的UglifyJS配置不支持ie8，須要手動配下。

{
  mode: 'production',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          ie8: true
        }
      })
    ]
  }
}
複製代碼

執行環境

解決了前面兩個問題只能保證語法上不報錯，但使用ES6中的API（好比Promise）仍是會報錯。另外，IE8對ES5的API支持也不好，只支持了少許的API，有些API還只是支持部分功能（好比Object.defineProperty）。因此，要在IE8中完美運行ES6的代碼，不只須要填充ES6的API，還要填充ES5的API。

babel爲此提供了兩種解決方案：@babel/polyfill、@babel/runtime。具體使用方法官方文檔已經寫的很詳細了，筆者就不贅述了。想了解二者之間的差異的同窗能夠看下大搜車墨白同窗的文章，babel-polyfill VS babel-runtime

這裏糾正墨白同窗文中的一個錯誤，就是@babel/polyfill如今已經支持按需加載，準確的說也不能算是錯誤，由於墨白同窗在寫這篇文章的時候還不支持按需加載。具體方法我就不細說了，文檔裏都有，配置下browserlist和@babel/preset-env的useBuiltsIns屬性就能夠了。

我只說下我在實際開發過程當中碰到的坑。

雖然@babel/polyfill、@babel/runtime都支持按需加載，但都只能識別出業務代碼中使用到的缺失的API，若是第三方庫有用到這些缺失的API，babel不能識別出來，天然也就不能填充進來。好比regenerator-runtime中用到的Object.create和Array.prototype.forEach。解決辦法是，在入口文件處手動引入缺失的API。

模塊化加載

筆者原來是想用ES6的模塊化加載方案，由於這樣能夠利用webpack的tree shaking，移除冗餘代碼，使打包出來的文件體積更小。但在IE8下測試發現Object.defineProperty會報錯'Accessors not supported!'。報錯代碼以下

if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
複製代碼

我用@babel/plugin-transform-modules-commonjs轉成commonjs加載就能夠把這個坑繞過去，但同時也意味着放棄了tree shaking。

總結

package.json

{
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime": "^7.3.4",
    "babel-loader": "^8.0.4",
    "core-js": "^3.0.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9",
    "webpack-merge": "^4.1.4"
  }
}
複製代碼

webpack配置

{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env'
            ],
            plugins: [
              [
                '@babel/plugin-transform-runtime'
              ],
              [
                // 筆者爲了兼容IE8才用了這個插件，代價是不能tree shaking
                // 沒有IE8兼容需求的同窗能夠把這個插件去掉
                '@babel/plugin-transform-modules-commonjs'
              ]
            ]
          }
        }
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          ie8: true,
        }
      })
    ]
  }
}
複製代碼

入口文件按需引入缺失的API

require('core-js/features/object/define-property')
require('core-js/features/object/create')
require('core-js/features/object/assign')
require('core-js/features/array/for-each')
require('core-js/features/array/index-of')
require('core-js/features/function/bind')
require('core-js/features/promise')
複製代碼

最後附上文章開頭提到的sdk源碼，筆者已將公司業務相關代碼去除，將通用部分開源。github.com/xtTech/dc-s…