babel的plugins和presets解析

babel可以將當(dāng)前運(yùn)行平臺(tái)(瀏覽器、node服務(wù)器)尚不支持的下一代或幾代js語(yǔ)法編譯為當(dāng)前支持的js語(yǔ)法版本,比如可以把es6 es7和es8的js代碼編譯為es5的代碼。

需要明確的幾個(gè)概念:

es2015 === es6

es2016 === es7

es2017 === es8

plugin: babel的插件,在6.x版本之后babel必需要配合插件來(lái)進(jìn)行工作

preset: babel插件集合的預(yù)設(shè),包含某一部分的插件plugin

{? "plugins": ["transform-es2015-arrow-functions"],? "presets": ["es2015"]}


babel-preset-es2015: 可以將es2015即es6的js代碼編譯為es5

babel-preset-es2016: 可以將es2016即es7的js代碼編譯為es6

babel-preset-es2017: 可以將es2017即es8的js代碼編譯為es7

babel-preset-stage-x: 可以將處于某一階段的js語(yǔ)法編譯為正式版本的js代碼

stage-X: 指處于某一階段的js語(yǔ)言提案。

提案共分為五個(gè)階段:

stage-0: 稻草人-只是一個(gè)大膽的想法

stage-1: 提案-初步嘗試

stage-2: 初稿-完成初步規(guī)范

stage-3: 候選-完成規(guī)范和瀏覽器初步實(shí)現(xiàn)

stage-4: 完成-將被添加到下一年發(fā)布


當(dāng)前 babel 推薦使用 babel-preset-env 替代 babel-preset-es2015 和 babel-preset-es2016 以及 babel-preset-es2017 ,env的支持范圍更廣,包含es2015 es2016 es2017的所有語(yǔ)法編譯,并且它可以根據(jù)項(xiàng)目運(yùn)行平臺(tái)的支持情況自行選擇編譯版本。

使用方法: '.babelrc' 中 'es2015' 改為 'env',

.babelrc

{? "presets": ["env", "stage-2"] }

插件中每個(gè)訪問(wèn)者都有排序問(wèn)題。

這意味著如果兩次轉(zhuǎn)譯都訪問(wèn)相同的”程序”節(jié)點(diǎn),則轉(zhuǎn)譯將按照 plugin 或 preset 的規(guī)則進(jìn)行排序然后執(zhí)行。

Plugin 會(huì)運(yùn)行在 Preset 之前。

Plugin 會(huì)從第一個(gè)開(kāi)始順序執(zhí)行。ordering is first to last.

Preset 的順序則剛好相反(從最后一個(gè)逆序執(zhí)行)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容