Webpack4+Babel7+ES6兼容IE8的示例分析
這篇文章主要介紹Webpack4+Babel7+ES6兼容IE8的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、蒙城網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為蒙城等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
ES6兼容IE8需要解決四個(gè)問題
語法支持
IE瀏覽器不支持ES6的語法，只在IE10、IE11中支持了部分ES6的API，所以在IE瀏覽器中使用ES6需要把ES6的代碼編譯成ES5才能執(zhí)行。方法也很簡(jiǎn)單，就是用babel-loader。這部分沒什么坑，所以我也就不細(xì)說了。給個(gè)網(wǎng)站，大家可以自行查看ES5、ES6在各瀏覽器版本中的支持情況
https://kangax.github.io/compat-table/es6/
ES3保留關(guān)鍵字
如果在IE8下通過object.propertyName的方式使用ES3中的保留關(guān)鍵字（比如default、class、catch），就會(huì)報(bào)錯(cuò)
SCRIPT1048: 缺少標(biāo)識(shí)符
webpack有一款loader插件es3ify-loader專門用來處理ES3的關(guān)鍵字兼容問題。這個(gè)插件的作用就是把這些保留字給你加上引號(hào)，使用字符串的形式引用。
// 編譯前
function(t) { return t.default; }
// 編譯后
function(t) { return t["default"]; }然而，筆者親身實(shí)踐后發(fā)現(xiàn)，UglifyJS本來就已經(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è)問題只能保證語法上不報(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)寫的很詳細(xì)了，筆者就不贅述了。這里糾正墨白同學(xué)文中的一個(gè)錯(cuò)誤，就是@babel/polyfill現(xiàn)在已經(jīng)支持按需加載，準(zhǔn)確的說也不能算是錯(cuò)誤，因?yàn)槟淄瑢W(xué)在寫這篇文章的時(shí)候還不支持按需加載。具體方法我就不細(xì)說了，文檔里都有，配置下browserlist和@babel/preset-env的useBuiltsIns屬性就可以了。
我只說下我在實(shí)際開發(fā)過程中碰到的坑。
雖然@babel/polyfill、@babel/runtime都支持按需加載，但都只能識(shí)別出業(yè)務(wù)代碼中使用到的缺失的API，如果第三方庫(kù)有用到這些缺失的API，babel不能識(shí)別出來，自然也就不能填充進(jìn)來。比如regenerator-runtime中用到的Object.create和Array.prototype.forEach。解決辦法是，在入口文件處手動(dòng)引入缺失的API。
模塊化加載
筆者原來是想用ES6的模塊化加載方案，因?yàn)檫@樣可以利用webpack的tree shaking，移除冗余代碼，使打包出來的文件體積更小。但在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è)坑繞過去，但同時(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
// 沒有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')以上是“Webpack4+Babel7+ES6兼容IE8的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁(yè)名稱：Webpack4+Babel7+ES6兼容IE8的示例分析
網(wǎng)站路徑：http://chinadenli.net/article42/gighec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)頁(yè)設(shè)計(jì)公司、小程序開發(fā)、域名注冊(cè)、網(wǎng)站排名、服務(wù)器托管
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
