新的版本帶來了很多全新的特性,並且在使用上也做出了很多重要的改變。本文翻譯自Babel的官方部落格,向你介紹Babel 6的定位、
特點、與使用方法。
Babel 6
過去的一年發生了很多的事。我們(Babel)團隊在世界各地旅行並與當地的社群探討Babel,通過這種方式,
我們也認識了很多非常廖記不起的開發者和合作夥伴。
在過去的一年,Babel一直在探索自己在JavaScript社群的定位。因此在二月份的時候,我們做出了一個決定,
認為Babel不應該僅僅只是個ES6語法轉換器,取而代之的,它應該成為一個平臺,它應該包括一組精心設計的工具用於建立下一代JavaScript工具集。
當我們釋出Babel 5的時候,它開放了一組新的外掛API,允許任何人依賴Babel的全部功力來建立能直接插入轉換過程的工具。
僅僅幾個月的時間,它就形成了一個完整的工具生態體系。
從除錯工具、框架優化和程式碼壓縮到實驗性的新語法和機制,開發者能夠構建一切工具用於強化它們的程式碼庫。
而這些擴充套件也已經被證明是非常有創造力並且極其有效的。
有的開發者也利用了Babel的內建元件(internals)來構建複雜的工具,例如 documentationjs
,它利用了Babel的Babylon解析器用於替代已有的工具,達到了一個更加智慧的版本。
但是我們認為Babel可以走的更遠。Babel有能力驅動程式碼壓縮、程式碼規範(Linter)、程式碼格式化、語法高亮、程式碼完成工具、
型別檢查、codemod工具等一系列功能,Babel能夠讓JavaScript社群朝著更好的方向發展。
因此,我們釋出了Babel 6。
這應該有史以來Babel最重要的一次更新,因為它能讓Babel更堅實的邁向平臺化。
主要變化
模組化
模組化可能是Babel 6最大的一個變化,這個版本使用了儘可能模組化的方法進行了完整的重構,
通過設計統一的公共介面API,所有的轉化器都進行了重構。
所有的內部元件都被抽取出來重構為單獨的包,每個包都定義了一個輕量級的公共API,從而可以被其他元件所獨立依賴。
如果你想使用某些Babel內部元件執行某種構建任務,現在,你只需要單獨的去安裝這個包,然後就能完成任務。
在包目錄中你可以找到現存的所有的包和外掛。
可選的外掛
因為Babel現在的目標不僅僅是作為ES2015的轉換器,而是作為一個JavaScript工具平臺,因此我們決定讓所有的外掛都是可插拔的。
這就意味著,如果你現在直接安裝Babel的最新版本,那麼預設情況下它並沒有用來轉換ES2015的程式碼的功能,你需要安裝相應的轉換器外掛。
為了能夠徹底的簡化Babel的公共API,現在每個轉換器(transformer)都是徹底獨立的。
這就意味著“blacklist”、“whitelist”、“optional”、“nonStandard”和“modules”選項都被移除了,
但這並不意味你如果你要通過Babel來轉換程式碼會帶來更多的工作。
外掛預設
因為在配置檔案中指定和維護大量的轉化器資訊可能會導致大量的工作,因此Babel 6引入了外掛預設值的概念,
可以用於組織相似的外掛用於簡單的消費。例如:
1 2 3 4 5 |
$ npm install --save-dev babel-preset-es2015 { "presets": ["es2015"] } |
目前,官方的預設包括babel-preset-es2015
和babel-preset-react
,但是,我們希望未來能夠有更多的預設外掛。
我們也為不同的階段提供了預設,例如babel-preset-stage-0
(這和在Babel 5.x中在.babelrc
中指定stage: 0
的效果是一樣的)。
效能改進
效能依然是Babel最為核心的指標之一。Babel 5徹底的革新了轉換和遍歷管道,用於提升和改進Babel的效能,這在Babel 6中依然被使用。
在Babel管道中,遍歷過程是時間花費最主要的部分之一。使用任何的基於AST的工具你都希望能夠儘可能快的完成對語法樹的遍歷。
Babel的外掛也是按照這個方向進行設計的,因此它能夠非常快的完成遍歷工作。
Babel 6實現了一個新的優化方案,用於將所有的外掛合併在一次遍歷操作中。然後管理完整的遍歷過程,因此外掛無需再擔憂這個過程。
作為一個開發者,你只需要關注業務邏輯,Babel會幫你處理其餘的問題。
外掛API
我們收到很多的反饋認為建立API讓人迷惑,因此在Babel 6中,它變得更加簡單了。注意這是個非常大的變化,但是它應該能夠減少困惑。
** Babel 5 **
1 2 3 4 5 |
export default function ( {Plugin, types: t} ) { return new Plugin('ast-transform', { visitor: { ... } }); } |
** Babel 6 **
1 2 3 4 5 |
export default function ( { types: t} ) { return { visitor: { ... } }; } |
簡單入門
安裝Babel
需要注意的是,已經不再有babel
包了。在這之前,babel
包囊括了整個編譯器、所有的轉換器以及一個CLI工具,
這麼做的缺點就是它會導致很多不必要的下載,並且程式碼也令人困惑。因此,現在我們將它分為兩個單獨的包:
babel-cli
和babel-core
。
1 2 3 |
$ npm install --global babel-cli # or $ npm install --save-dev babel-core |
如果你想要在命令列使用Babel,你可以安裝babel-cli
,或者你需要在一個Node專案中使用Babel,你可以使用babel-core
。
我們希望你儘快將你的程式碼升級到Babel 6,這將成為未來的主流。
增加外掛和預設值
預設情況下,Babel 6並沒有攜帶任何轉換器,因此如果對你的程式碼使用Babel的話,它將會原文輸出你的程式碼,不會有任何的改變。
因此你需要根據你需要完成的任務來單獨安裝相應的外掛。例如,如果你想使用箭向函式的話:
首先安裝箭向函式外掛:
1 |
$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions |
然後在你的.babelrc
檔案中加入下面的程式碼:
1 2 3 |
{ "plugins": ["transform-es2015-arrow-functions"] } |
現在如果你對一個使用了箭向函式的原始碼檔案使用Babel的話它將會被成功的編譯。非常簡單吧。
Babel外掛被設計用來漸增的編譯程式碼。假設你想使用ES2019的特性的話,那麼程式碼首先被編譯為ES2018,
然後是ES2017,直到編譯為瀏覽器支援的版本。這允許了使用者能夠使用它們想要使用的原生實現。
這也對單一的標準有效,例如ES2015常數將會被編譯到ES2015的let
變數。因此,如果你需要使用ES2015的其他特性的話,
你也可以按照類似的方法安裝相應的外掛:
1 2 |
$ npm install --save-dev babel-plugin-transform-es2015-constants $ npm install --save-dev babel-plugin-transform-es2015-block-scoping |
然後是配置檔案
1 2 3 4 5 6 |
{ "plugins": [ "transform-es2015-constants", "transform-es2015-block-scoping" ] } |
當然手動配置這些單一特性非常的繁瑣,這隻適用於你僅僅使用了某幾個ES2015的新特性,如果不是這種情況,
或者更一般的情況,你可以直接安裝外掛的預設,例如:
1 |
$ npm install --save-dev babel-preset-es2015 |
在.babelrc
中配置:
1 2 3 |
{ "presets": ["es2015"] } |
當然我們也為React準備了一個預設:
1 |
$ npm install --save-dev babel-preset-react |
它的配置資訊:
1 2 3 |
{ "presets": ["react"] } |
最後
這對Babel而言是個非常令人激動的釋出。
任何參與過開源專案的人都會體會到,這是一個非常艱鉅的任務,涉及到非常多的工作,但最終到釋出的時候,
需要非常的感謝整個社群的力量。我們非常激動的釋出Babel 6,我們希望Babel在未來能夠成為最好用的JavaScript工具,
所以趕緊來嘗試最新的版本吧。