前陣子重構了一個挺有意思的專案,是一個基於瀏覽器環境的資料採集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的語法,只在IE10、IE11中支援了部分ES6的API,所以在IE瀏覽器中使用ES6需要把ES6的程式碼編譯成ES5才能執行。方法也很簡單,就是用babel-loader
。這部分沒什麼坑,所以我也就不細說了。給個網站,大家可以自行檢視ES5、ES6在各瀏覽器版本中的支援情況
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…