babel的plugins和presets解析


 

babel可以將當前運行平台(瀏覽器、node服務器)尚不支持的下一代或幾代js語法編譯為當前支持的js語法版本,比如可以把es6 es7和es8的js代碼編譯為es5的代碼。

 

需要明確的幾個概念:

 

  • es2015 === es6
  • es2016 === es7
  • es2017 === es8

 

 

plugin: babel的插件,在6.x版本之后babel必需要配合插件來進行工作

preset: babel插件集合的預設,包含某一部分的插件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語法編譯為正式版本的js代碼

stage-X: 指處於某一階段的js語言提案。

  • 提案共分為五個階段:
  • stage-0: 稻草人-只是一個大膽的想法
  • stage-1: 提案-初步嘗試
  • stage-2: 初稿-完成初步規范
  • stage-3: 候選-完成規范和瀏覽器初步實現
  • stage-4: 完成-將被添加到下一年發布

 

當前 babel 推薦使用 babel-preset-env 替代 babel-preset-es2015 和 babel-preset-es2016 以及 babel-preset-es2017 ,env的支持范圍更廣,包含es2015 es2016 es2017的所有語法編譯,並且它可以根據項目運行平台的支持情況自行選擇編譯版本。

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

.babelrc

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

 

插件中每個訪問者都有排序問題。

這意味着如果兩次轉譯都訪問相同的”程序”節點,則轉譯將按照 plugin 或 preset 的規則進行排序然后執行。

  • Plugin 會運行在 Preset 之前。
  • Plugin 會從第一個開始順序執行。ordering is first to last.
  • Preset 的順序則剛好相反(從最后一個逆序執行)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM