前陣子重構(gòu)了一個(gè)挺有意思的項(xiàng)目，是一個(gè)基于瀏覽器環(huán)境的數(shù)據(jù)采集sdk。公司各個(gè)產(chǎn)品的前端頁(yè)面中都嵌入了這個(gè)sdk，用于采集用戶(hù)的行為數(shù)據(jù)，上傳到公司的大數(shù)據(jù)平臺(tái)，為后續(xù)的運(yùn)營(yíng)決策分析提供數(shù)據(jù)支撐。

筆者接手這個(gè)項(xiàng)目的時(shí)候，前任開(kāi)發(fā)者已經(jīng)把功能都寫(xiě)差不多了。唯一需要做的就是做下模塊化拆分和代碼規(guī)范，以便后續(xù)的開(kāi)發(fā)維護(hù)。模塊化拆分用webpack，代碼規(guī)范用eslint。既然要重構(gòu)，那就順手用es6重寫(xiě)吧。callback也不要了，全換成promise，async、await也用起來(lái)，反正怎么爽怎么寫(xiě)。

問(wèn)PM瀏覽器最低兼容到哪個(gè)版本，PM說(shuō)兼容公司各個(gè)產(chǎn)品所兼容的最低版本就行。和公司各個(gè)產(chǎn)品的前端負(fù)責(zé)人溝通后發(fā)現(xiàn)，居然有兼容IE8的，真是我了個(gè)fk。

google了一下Webpack+Babel+ES6兼容IE8，果然坑很多。試了好幾篇博客給出的方案，都跑不通。也沒(méi)怎么研究具體哪里有問(wèn)題，因?yàn)槟切┙鉀Q方案里面的webpack和babel都是舊版的，跑通了也不高興用。筆者分析了那些博客中提出的幾個(gè)關(guān)鍵性問(wèn)題，然后參考webpack和babel最新的官方文檔，總結(jié)出一套最新的Webpack4+Babel7+ES6兼容IE8的方案。

ES6兼容IE8需要解決四個(gè)問(wèn)題

語(yǔ)法支持

IE瀏覽器不支持ES6的語(yǔ)法，只在IE10、IE11中支持了部分ES6的API，所以在IE瀏覽器中使用ES6需要把ES6的代碼編譯成ES5才能執(zhí)行。方法也很簡(jiǎn)單，就是用babel-loader。這部分沒(méi)什么坑，所以我也就不細(xì)說(shuō)了。給個(gè)網(wǎng)站，大家可以自行查看ES5、ES6在各瀏覽器版本中的支持情況

https://kangax.github.io/compat-table/es6/

ES3保留關(guān)鍵字

如果在IE8下通過(guò)object.propertyName的方式使用ES3中的保留關(guān)鍵字（比如default、class、catch），就會(huì)報(bào)錯(cuò)

SCRIPT1048: 缺少標(biāo)識(shí)符

webpack有一款loader插件es3ify-loader專(zhuān)門(mén)用來(lái)處理ES3的關(guān)鍵字兼容問(wèn)題。這個(gè)插件的作用就是把這些保留字給你加上引號(hào)，使用字符串的形式引用。

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

// 編譯后
function(t) { return t["default"]; }

然而，筆者親身實(shí)踐后發(fā)現(xiàn)，UglifyJS本來(lái)就已經(jīng)提供了對(duì)IE瀏覽器的支持，不需要額外引入es3ify-loader。webpack默認(rèn)的UglifyJS配置不支持ie8，需要手動(dòng)配下。

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

執(zhí)行環(huán)境

解決了前面兩個(gè)問(wèn)題只能保證語(yǔ)法上不報(bào)錯(cuò)，但使用ES6中的API（比如Promise）還是會(huì)報(bào)錯(cuò)。另外，IE8對(duì)ES5的API支持也很差，只支持了少量的API，有些API還只是支持部分功能（比如Object.defineProperty）。所以，要在IE8中完美運(yùn)行ES6的代碼，不僅需要填充ES6的API，還要填充ES5的API。

babel為此提供了兩種解決方案： @babel/polyfill、@babel/runtime。具體使用方法官方文檔已經(jīng)寫(xiě)的很詳細(xì)了，筆者就不贅述了。這里糾正墨白同學(xué)文中的一個(gè)錯(cuò)誤，就是@babel/polyfill現(xiàn)在已經(jīng)支持按需加載，準(zhǔn)確的說(shuō)也不能算是錯(cuò)誤，因?yàn)槟淄瑢W(xué)在寫(xiě)這篇文章的時(shí)候還不支持按需加載。具體方法我就不細(xì)說(shuō)了，文檔里都有，配置下browserlist和@babel/preset-env的useBuiltsIns屬性就可以了。

我只說(shuō)下我在實(shí)際開(kāi)發(fā)過(guò)程中碰到的坑。

雖然@babel/polyfill、@babel/runtime都支持按需加載，但都只能識(shí)別出業(yè)務(wù)代碼中使用到的缺失的API，如果第三方庫(kù)有用到這些缺失的API，babel不能識(shí)別出來(lái)，自然也就不能填充進(jìn)來(lái)。比如regenerator-runtime中用到的Object.create和Array.prototype.forEach。解決辦法是，在入口文件處手動(dòng)引入缺失的API。

模塊化加載

筆者原來(lái)是想用ES6的模塊化加載方案，因?yàn)檫@樣可以利用webpack的tree shaking，移除冗余代碼，使打包出來(lái)的文件體積更小。但在IE8下測(cè)試發(fā)現(xiàn)Object.defineProperty會(huì)報(bào)錯(cuò)'Accessors not supported!'。報(bào)錯(cuò)代碼如下

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

我用@babel/plugin-transform-modules-commonjs轉(zhuǎn)成commonjs加載就可以把這個(gè)坑繞過(guò)去，但同時(shí)也意味著放棄了tree shaking。

總結(jié)

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才用了這個(gè)插件，代價(jià)是不能tree shaking
        // 沒(méi)有IE8兼容需求的同學(xué)可以把這個(gè)插件去掉
        '@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')

最后附上文章開(kāi)頭提到的sdk源碼，筆者已將公司業(yè)務(wù)相關(guān)代碼去除，將通用部分開(kāi)源。https://github.com/xtTech/dc-sdk-js

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論