談談Babel v6的新特性及未來定位
Babel 6剛發布不久,整個版本經歷了徹底的重構和定位,目標是從一個單一的JavaScript轉換器轉向為一個JavaScript工具平臺, 新的版本帶來了很多全新的特性,并且在使用上也做出了很多重要的改變。本文翻譯自Babel的官方博客,向你介紹Babel 6的定位、 特點、與使用方法。
Statement
- 原文地址: https://babeljs.io/blog/2015/10/29/6.0.0/
- 譯者: 景莊 ,Web開發者,主要關注JavaScript、Node.js、React、Docker等。
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引入了插件預設值的概念, 可以用于組織相似的插件用于簡單的消費。例如:
$ npm install --save-dev babel-preset-es2015
{
"presets": ["es2015"]
}</code></pre>
目前,官方的預設包括 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 ***
export default function ( {Plugin, types: t} ) {
return new Plugin('ast-transform', {
visitor: { ... }
});
}
*** Babel 6 ***
export default function ( { types: t} ) {
return {
visitor: { ... }
};
}
簡單入門
安裝Babel
需要注意的是,已經不再有 babel
包了。在這之前, babel
包囊括了整個編譯器、所有的轉換器以及一個CLI工具, 這么做的缺點就是它會導致很多不必要的下載,并且代碼也令人困惑。因此,現在我們將它分為兩個單獨的包: babel-cli
和 babel-core
。
$ npm install --global babel-cli
or
$ npm install --save-dev babel-core</code></pre>
如果你想要在命令行使用Babel,你可以安裝 babel-cli
,或者你需要在一個Node項目中使用Babel,你可以使用 babel-core
。
我們希望你盡快將你的代碼升級到Babel 6,這將成為未來的主流。
增加插件和預設值
默認情況下,Babel 6并沒有攜帶任何轉換器,因此如果對你的代碼使用Babel的話,它將會原文輸出你的代碼,不會有任何的改變。
因此你需要根據你需要完成的任務來單獨安裝相應的插件。例如,如果你想使用箭向函數的話:
首先安裝箭向函數插件:
$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions
然后在你的 .babelrc
文件中加入下面的代碼:
{
"plugins": ["transform-es2015-arrow-functions"]
}
現在如果你對一個使用了箭向函數的源代碼文件使用Babel的話它將會被成功的編譯。非常簡單吧。
Babel插件被設計用來漸增的編譯代碼。假設你想使用ES2019的特性的話,那么代碼首先被編譯為ES2018, 然后是ES2017,直到編譯為瀏覽器支持的版本。這允許了用戶能夠使用它們想要使用的原生實現。
這也對單一的標準有效,例如ES2015常數將會被編譯到ES2015的 let
變量。因此,如果你需要使用ES2015的其他特性的話, 你也可以按照類似的方法安裝相應的插件:
$ npm install --save-dev babel-plugin-transform-es2015-constants
$ npm install --save-dev babel-plugin-transform-es2015-block-scoping
然后是配置文件
{
"plugins": [
"transform-es2015-constants",
"transform-es2015-block-scoping"
]
}
當然手動配置這些單一特性非常的繁瑣,這只適用于你僅僅使用了某幾個ES2015的新特性,如果不是這種情況, 或者更一般的情況,你可以直接安裝插件的預設,例如:
$ npm install --save-dev babel-preset-es2015
在 .babelrc
中配置:
{
"presets": ["es2015"]
}
當然我們也為React準備了一個預設:
$ npm install --save-dev babel-preset-react
它的配置信息:
{
"presets": ["react"]
}
最后
這對Babel而言是個非常令人激動的發布。
任何參與過開源項目的人都會體會到,這是一個非常艱巨的任務,涉及到非常多的工作,但最終到發布的時候, 需要非常的感謝整個社區的力量。我們非常激動的發布Babel 6,我們希望Babel在未來能夠成為最好用的JavaScript工具, 所以趕緊來嘗試最新的版本吧。
來自: http://wwsun.github.io/posts/babel-v6-released.html
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!