之前在用babel 的時(shí)候有個(gè)地方一直挺暈的芥玉，@babel/preset-env 和 @babel/plugin-transform-runtime都具有轉(zhuǎn)換語法的能力， 并且都能實(shí)現(xiàn)按需 polyfill ,但是網(wǎng)上又找不到比較明確的答案收毫， 趁這次嘗試 roullp 的時(shí)候試了試.
如果我們什么都不做， 沒有為babel 編寫參數(shù)及配置肤粱， 那babel 并沒有那么大的威力， 它什么都不會做壶愤， 正是因?yàn)楦鱾€(gè)預(yù)設(shè)插件的靈活組合对雪、賦能怜庸， 讓 babel 充滿魅力当犯， 創(chuàng)造奇跡
首先是 @babel/preset-env
@babel/preset-env
這是一個(gè)我們很常用的預(yù)設(shè)， 幾乎所有的教程和框架里都會讓你配置它割疾， 它的出現(xiàn)取代了 preset-es20** 系列的babel 預(yù)設(shè)嚎卫， 你再也不需要繁雜的兼容配置了。 每出一個(gè)新提案就加一個(gè)杈曲？ 太蠢了驰凛。
有了它胸懈， 我們就可以擁有全部担扑， 并且！ 它還可以做到按需加載我們需要的 polyfill趣钱。 就是這么神奇涌献。
但是吧， 它也不是那么自動化的首有， 如果你要是不會配置燕垃，很有可能就沒有用起它的功能
不管怎么養(yǎng)， 首先試一下井联，眼見為實(shí)
首先創(chuàng)建一個(gè) index.js,內(nèi)容如下卜壕， 很簡單
function test() {
new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
console.log(arr)
然后我們在根目錄下創(chuàng)建一個(gè) .babelrc文件, 幫我們剛剛說的預(yù)設(shè)加進(jìn)去
{
"presets": [
["@babel/preset-env"]
]
}
然后我我們打包一下（這里我用的是roullup）
看一下產(chǎn)出的結(jié)果
我們可以看到， 它babel幫我們做了這幾件事情:
- 轉(zhuǎn)換箭頭函數(shù)
- const 變?yōu)?var
奇怪烙常， 為什么 babel 不幫我們轉(zhuǎn)換 map ? 還有 promise 這些也都是es6的特性呀
嗯～轴捎，會不會是我們的目標(biāo)瀏覽器不對， babel 覺得不需要轉(zhuǎn)換了， 會不會是這樣侦副， 那我們加一個(gè) .browserslistrc 試一下
那就侦锯。讓我們在根目錄下創(chuàng)建一個(gè) .browserslistrc
好。現(xiàn)在讓我們再打包一次.
咦秦驯， 沒什么效果尺碰。 跟剛剛一樣啊。 說明不是目標(biāo)瀏覽器配置的問題译隘， 是babel 做不了這個(gè)事亲桥。
因?yàn)槟J(rèn) @babel/preset-env 只會轉(zhuǎn)換語法，也就是我們看到的箭頭函數(shù)固耘、const一類两曼。
如果進(jìn)一步需要轉(zhuǎn)換內(nèi)置對象、實(shí)例方法玻驻，那就得用polyfill, 這就需要你做一點(diǎn)配置了,
這里有一個(gè)至關(guān)重要的參數(shù) "useBuiltIns"悼凑，他是控制 @babel/preset-env 使用何種方式幫我們導(dǎo)入 polyfill 的核心， 它有三個(gè)值可以選
entry
這是一種入口導(dǎo)入方式, 只要我們在打包配置入口 或者 文件入口寫入 import "core-js" 這樣一串代碼璧瞬， babel 就會替我們根據(jù)當(dāng)前你所配置的目標(biāo)瀏覽器(browserslist)來引入所需要的polyfill 户辫。
像這樣， 我們在 index.js 文件中加入試一下core-js
// src/index.js
import "core-js";
function test() {
new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
console.log(arr)
babel配置如下
[
"presets": [
["@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
當(dāng)前 .browserslistrc 文件(更改目標(biāo)瀏覽器為 Chrome 是為了此處演示更直觀嗤锉，簡潔)渔欢， 我們只要求兼容 chrome 50版本以上即可（當(dāng)下最新版本為78）
Chrome > 50
那打包后如何呢？
恐怖如斯啊瘟忱，babel把我們填寫的 import "core-js"替換掉奥额， 轉(zhuǎn)而導(dǎo)入了一大片的polyfill， 而且都是一些我沒有用到的東西访诱。
那我們提升一下目標(biāo)瀏覽器呢垫挨？ 它還會導(dǎo)入這么多嗎？
此時(shí)触菜， 我們把目標(biāo)瀏覽器調(diào)整為比較接近最新版本的 75(當(dāng)下最新版本為78)
// .browserslistrc
Chrome > 75
此刻打包后引入的 polyfill 明顯少了好多九榔。
但同樣是我們沒用過的。
這也就是印證了上面所說的涡相， 當(dāng) useBuiltIns 的值為 entry 時(shí)哲泊， @babel/preset-env 會按照你所設(shè)置的目標(biāo)瀏覽器在入口處來引入所需的 polyfill,
不管你需不需要。
如此催蝗，我們可以知道切威， useBuiltIns = entry 的優(yōu)點(diǎn)是覆蓋面積就比較廣， 一股腦全部搞定丙号， 但是缺點(diǎn)就是打出來的包就大了多了很多沒有用到的 polyfill, 并且還會污染全局
useage
這個(gè)就比較神奇了先朦， useBuiltIns = useage 時(shí)且预，會參考目標(biāo)瀏覽器（browserslist） 和 代碼中所使用到的特性來按需加入 polyfill
當(dāng)然， 使用 useBuiltIns = useage, 還需要填寫另一個(gè)參數(shù) corejs 的版本號烙无，
core-js 支持兩個(gè)版本锋谐， 2 或 3， 很多新特性已經(jīng)不會加入到 2 里面了截酷， 比如: flat 等等最新的方法涮拗， 2 這個(gè)版本里面都是沒有的， 所以建議大家用3
此時(shí)的 .babelrc
{
"presets": [
["@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}
此時(shí)的 index.js
function test() {
new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
const hasNumber = (num) => [4, 5, 6, 7, 8].includes(num)
console.log(arr)
console.log( hasNumber(2) )
此時(shí)的 .browserslistrc
> 1%
last 10 versions
not ie <= 8
打包后:
nice ,夠神奇迂苛， 我們用的幾個(gè)新特性真的通通都加上了
這種方式打包體積不大三热，但是如果我們排除node_modules/目錄，遇上沒有經(jīng)過轉(zhuǎn)譯的第三方包三幻，就檢測不到第三方包內(nèi)部的 ‘hello‘.includes(‘h‘)這種句法就漾，這時(shí)候我們就會遇到bug
false
剩下最后一個(gè) useBuiltIns = false , 那就簡單了， 這也是默認(rèn)值 念搬， 使用這個(gè)值時(shí)不引入 polyfill
@babel/runtime
這種方式會借助 helper function 來實(shí)現(xiàn)特性的兼容抑堡，
并且利用 @babel/plugin-transform-runtime 插件還能以沙箱墊片的方式防止污染全局， 并抽離公共的 helper function , 以節(jié)省代碼的冗余
也就是說 @babel/runtime 是一個(gè)核心朗徊， 一種實(shí)現(xiàn)方式首妖， 而 @babel/plugin-transform-runtime 就是一個(gè)管家， 負(fù)責(zé)更好的重復(fù)使用 @babel/runtime
@babel/plugin-transform-runtime 插件也有一個(gè) corejs 參數(shù)需要填寫
版本2 不支持內(nèi)置對象 爷恳， 但自從Babel 7.4.0 之后有缆，擁有了 @babel/runtime-corejs3 ， 我們可以放心使用 corejs: 3 對實(shí)例方法做支持
當(dāng)前的 .babelrc
{
"presets": [
["@babel/preset-env"]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": 3
}
]
]
}
當(dāng)前的 index.js
function test() {
new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
const hasNumber = (num) => [4, 5, 6, 7, 8].includes(num)
console.log(arr)
console.log( hasNumber(2) )
打包后如下:
我們看到使用 @babel/plugin-transform-runtime 編譯后的代碼和之前的 @babel/preset-env 編譯結(jié)果大不一樣了温亲，
它使用了幫助函數(shù), 并且賦予了別名 棚壁， 抽出為公共方法， 實(shí)現(xiàn)復(fù)用栈虚。 比如它用了 _Promise 代替了 new Promise 袖外， 從而避免了創(chuàng)建全局對象
上面兩種方式一起用會怎么樣
useage 和 @babel/runtime
useage 和 @babel/runtime 同時(shí)使用的情況下比較智能， 并沒有引入重復(fù)的 polyfill
個(gè)人分析原因應(yīng)該是： babel 的 plugin 比 prset 要先執(zhí)行节芥， 所以preset-env 得到了 @babel/runtime 使用幫助函數(shù)包裝后的代碼在刺，而 useage 又是檢測代碼使用哪些新特性來判斷的逆害， 所以它拿到手的只是一堆 幫助函數(shù)头镊， 自然沒有效果了
實(shí)驗(yàn)過程如下：
當(dāng)前index.js
function test() {
new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
const hasNumber = (num) => [4, 5, 6, 7, 8].includes(num)
const hasNumber2 = (num) => [4, 5, 6, 7, 8, 9].includes(num)
console.log(arr)
console.log( hasNumber(2))
console.log( hasNumber2(3) )
當(dāng)前 .babelrc
{
"presets": [
["@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": 3
}
]
]
}
打包結(jié)果:
entry 和 @babel/runtime
跟 useage 的情況不一樣， entry 模式下魄幕， 在經(jīng)過 @babel/runtime 處理后不但有了各種幫助函數(shù)還引入了許多polyfill相艇， 這就會導(dǎo)致打包體積無情的增大
個(gè)人分析: entry 模式下遭遇到入口的
import "core-js"及就立即替換為當(dāng)前目標(biāo)瀏覽器下所需的所有 polyfill, 所以也就跟 @babel/runtime 互不沖突了， 導(dǎo)致了重復(fù)引入代碼的問題纯陨， 所以這兩種方式千萬不要一起使用坛芽， 二選一即可
實(shí)現(xiàn)過程如下:
當(dāng)前 index.js:
import "core-js"
function test() {
new Promise()
}
test()
const arr = [1,2,3,4].map(item => item * item)
const hasNumber = (num) => [4, 5, 6, 7, 8].includes(num)
const hasNumber2 = (num) => [4, 5, 6, 7, 8, 9].includes(num)
console.log(arr)
console.log( hasNumber(2))
console.log( hasNumber2(3) )
當(dāng)前 .babelrc
{
"presets": [
["@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime", {
"corejs": 3
}
]
]
}
當(dāng)前 .browserslistrc 的目標(biāo)版本(為了減少打包后的文件行數(shù)為又改為chrome 了留储， 懂那個(gè)意思就行)
Chrome > 70
打包結(jié)果:
總結(jié)
- @babel/preset-env 擁有根據(jù) useBuiltIns 參數(shù)的多種polyfill實(shí)現(xiàn)，優(yōu)點(diǎn)是覆蓋面比較全（entry）咙轩， 缺點(diǎn)是會污染全局获讳， 推薦在業(yè)務(wù)項(xiàng)目中使用
- entry 的覆蓋面積全， 但是打包體積自然就大活喊，
- useage 可以按需引入 polyfill, 打包體積就小丐膝， 但如果打包忽略node_modules 時(shí)如果第三方包未轉(zhuǎn)譯則會出現(xiàn)兼容問題
- @babel/runtime 在 babel 7.4 之后大放異彩， 利用 corejs 3 也實(shí)現(xiàn)了各種內(nèi)置對象的支持钾菊， 并且依靠 @babel/plugin-transform-runtime 的能力帅矗，沙箱墊片和代碼復(fù)用， 避免幫助函數(shù)重復(fù) inject 過多的問題煞烫， 該方式的優(yōu)點(diǎn)是不會污染全局浑此， 適合在類庫開發(fā)中使用
上面 1， 2 兩種方式取其一即可滞详， 同時(shí)使用沒有意義, 還可能造成重復(fù)的 polyfill 文件
