摘要:與簡單來說包括了和轉(zhuǎn)義和的包。雖然實際壓縮已經(jīng)能夠優(yōu)化掉大部分體積的,但是對于一些最新瀏覽器版本來說,任何的都是浪費資源的。以服務(wù)端渲染的方式從請求中獲取到的信息,然后返回對應(yīng)的。
使用@babel/polyfill可以讓你在任何es2015+的環(huán)境中編寫代碼,而不需要擔(dān)心兼容性問題。它會在全局變量上添加一些類似于原生的方法。但是webpack一直以來配置都特別復(fù)雜,直到webpack4才開始做0配置。項目中如果需要webpack的配置可能都是ctrl+c ctrl+v,沒有及時去更新,會對polyfill有一些誤解,比如說,項目中會同時出現(xiàn)babel-plugin-transform-runtime和babel-polyfill,在已經(jīng)使用了babel-polyfill的基礎(chǔ)上還是會擔(dān)心使用新語法帶來的問題。這篇文章將會解答一些與babel-polyfill相關(guān)的問題。
polyfill與core-js簡單來說polyfill包括了core-js和regenerator-runtime(轉(zhuǎn)義async和await的包)。
而且babel7.4.0開始@babel/polyfill改成直接引入core-js和regenerator-runtime了
</>復(fù)制代碼
As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):
</>復(fù)制代碼
import "core-js/stable";
import "regenerator-runtime/runtime";
polyfill與preset-env
preset-env中我們需要關(guān)注以下兩個屬性
targetstargets可以設(shè)置polyfill引入哪些方法的轉(zhuǎn)義,因為preset-env有一個內(nèi)置的json文件,可以根據(jù)用戶設(shè)置過濾所需要polyfill的方法
</>復(fù)制代碼
// corejs2-built-ins.json
{
"es6.array.copy-within": {
"chrome": "45",
"edge": "12",
"firefox": "32",
"safari": "9",
"node": "4",
"ios": "9",
"samsung": "5",
"opera": "32",
"electron": "0.35"
},
"es6.array.every": {
"chrome": "5",
"opera": "10.10",
"edge": "12",
"firefox": "2",
"safari": "3.1",
"node": "0.10",
"ie": "9",
"android": "4",
"ios": "6",
"phantom": "2",
"samsung": "2.1",
"electron": "1.1"
},
……
}
// 根據(jù)項目需要兼容的最低版本
{
"targets": {
"chrome": "58",
"ie": "11"
}
}
useBuiltIns
useBuiltIns有兩個特別有用的屬性,usage和entry,使用兩個屬性都是直接引用core-js對應(yīng)的包。
entry的用法:項目中import "@babel/polyfill";persets的options中使用useBuiltIns: "entry",配合targets選項,只import最低版本所需要的方法墊片
usage的用法:只需要在persets的options中使用useBuiltIns: "usage"即可將所有項目中用到所需要在最低瀏覽器版本不兼容的方法墊片,例如 includes 方法就會自動import "core-js/modules/es6.string.includes";`
</>復(fù)制代碼
//demo
// index.js
console.log("test123".includes("test"));
// webpack.config.js
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
targets: {
chrome: "58",
ie: "11"
},
useBuiltIns: "usage"
}
]
]
}
}
因為 includes 在 ie11 中不兼容,打包結(jié)果:
不使用@babel/preset-env,打包后文件 _900 多 bytes 不到 1kb_,不能兼容低版本瀏覽器
使用preset-env+useBuiltIns: "usage",babel 識別到使用了 includes 方法,加入 polyfill 的方法有[ "es6.string.includes", "es7.array.includes" ],打包后文件為 6.56kb
使用preset-env+useBuiltIns: "entry",并且手動 import @babel/polyfill(使用 useBuiltIns webpack 都會建議不需要手動 import polyfill,如果它檢測到用戶已經(jīng) import 了會提示 useBuiltIns 選用 entry 屬性),polyfill 的幾十個方法,也就是按照 targets 的配置將所有需要 polyfill 方法都打包進來,打包后文件為 76.7kb
</>復(fù)制代碼
{
"es6.array.copy-within",
"es6.array.fill",
"es6.array.find",
"es6.array.find-index",
"es7.array.flat-map",
"es6.array.from",
"es7.array.includes",
……
}
只使用 babel-loader+@babel/preset-env,打包文件大小為 86.3kb
因此,如果項目本身是有兼容性要求的話,一般都會使用 babel-loader 做兼容,因為很常見的 array.from 也是要做 polyfill 的,加上 preset-env + useBuiltIns 按需加載使用一些新語法其實不需要太擔(dān)心包大小的問題,也不需要手動 import @babel/polyfill
雖然在babel-preset-env官方文檔中看到usage還是experiment狀態(tài),但是可以在vue-cli的源碼看到默認打包的app的presets配置里useBuiltIns是usage,所以可以放心的用(其實babel6的時候usage就已經(jīng)是experiment,babel7也還是)
/vue-cli/packages/@vue/babel-preset-app/index.js
需要注意的是如果你使用的不是TC39 stage4的提案,你還是需要自己手動去設(shè)置babel-plugin,preset-env不會幫你引入其他stage的語法墊片
polyfill 與 plugin-transform-runtime如果有長時間使用過webpack,一定不會對babel-plugin-transform-runtime這個插件陌生,大家都有做兼容的環(huán)境的作用,甚至有些項目還會看到同時使用babel-polyfill和babel-plugin-transform-runtime,這種做法貌似在babel-preset-env出來之前是有一定道理的。
實際上transform-runtime的轉(zhuǎn)換是非侵入性的,也就是它不會污染你的原有的方法,比如掛在Array原型上的includes方法就只能使用babel-polyfill
transform-runtime的使用場景應(yīng)該是庫,遇到需要轉(zhuǎn)換的方法它會另起一個名字,否則會直接影響使用庫的業(yè)務(wù)代碼,平常的項目使用babel-polyfill即可。
polyfill.io雖然presets-env+實際壓縮已經(jīng)能夠優(yōu)化掉大部分體積的polyfill,但是對于一些最新瀏覽器版本來說,任何的polyfill都是浪費資源的。
這時候polyfill.io能夠解決這個問題。polyfill.io以服務(wù)端渲染的方式從請求中獲取到useragent的信息,然后返回對應(yīng)的polyfill。但據(jù)說是因為瀏覽器版本太多,國內(nèi)還有套殼的360/qq等瀏覽器,ua要是判斷失誤沒有其他回退的方案,因此沒有辦法廣泛應(yīng)用起來。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/104999.html
摘要:今天介紹怎么編譯的各種函數(shù)和語法。對于相關(guān)的匹配規(guī)則,除了匹配結(jié)尾的文件,還應(yīng)該去除文件夾下的第三庫的文件發(fā)布前已經(jīng)被處理好了。它需要在我們項目的入口文件中被引入,或者在中配置。個人網(wǎng)站原文鏈接系列教程二編譯 今天介紹webpack怎么編譯ES6的各種函數(shù)和語法。敲黑板:這是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本節(jié)課源碼 >>> 所有課程源碼 1....
對babel一直沒具體總結(jié)過,趁周末看了下文檔,記錄一下 babel作為一個compiler,主要用在轉(zhuǎn)換新的es標準實現(xiàn)來使所有瀏覽器都支持,這包含兩方面 新的es標準語法,箭頭函數(shù)、擴展運算符、塊級作用域等 轉(zhuǎn)化新的es標準方法或正被提議還未納入標準的方法,,Array.from、Map、Promise、String.includes等 babel編譯過程 babel的編譯過程分為三個階段...
摘要:經(jīng)過一番折騰,總算是把自己項目里的配置調(diào)整好了,所有文件從原來的縮小到。折騰了不少時間,改動其實就一個地方,就是配置文件,記錄一下自己折騰的過程。本以為那這兩種方式取其一就行了。這感覺和想象中的不一樣啊,說好的一個搞定一切的呢。。。 先是看到前端早讀課【第1065期】再見,babel-preset-2015,聽說現(xiàn)在有了babel-preset-env,別的什么preset都不需要了,...
摘要:,標題黨了,本文僅介紹相關(guān)生態(tài)和一些配置心得。函數(shù)是在時候常用的工具函數(shù),對編譯模塊時,會將用到的放到模塊頂部。用來看最終引入了哪些必須配合,貌似加入了此項以后,會得到類似于的效果。 Babel Sorry,標題黨了,本文僅介紹 Babel 相關(guān)生態(tài)和一些配置心得。 Babel 各個 package 的用途 babel-core: 核心部分 babel-cli: 允許使用命令行 ...
閱讀 2958·2021-11-23 09:51
閱讀 3783·2021-11-22 15:29
閱讀 3240·2021-10-08 10:05
閱讀 1558·2021-09-22 15:20
閱讀 976·2019-08-30 15:56
閱讀 1075·2019-08-30 15:54
閱讀 738·2019-08-26 11:54
閱讀 2640·2019-08-26 11:32