關於Babel6的6個變化

近年來Babel已經成為一種將ES2015和JSX轉化為傳統JavaScript代碼的必備工具。

但是Babel6相對以前的版本改變巨大。

以前的babel包已經廢棄了，直接運行babel已經沒辦法將ES2015轉化為ES5，以前的文檔也下架了。

但是不要慌，為了讓你跟上變化，

我整理了6大重要的變化清單，

如果你覺得還不夠，可以參考我的文檔ES6和Babel6完全指南手冊，裡面覆蓋了大量的實踐，還有CLI, Webpack, Mocha和 Gulp等知識點。

1.babel的npm包已經沒用了。新的版本，babel被拆分為多個包：

• babel-cli, 包括了babel命令行接口
• babel-core, 包括了Node有關的API和require鉤子
• babel-polyfill, 可以建立一個完整的ES2015環境

為了防止意外的版本衝突，記得將從package.json文件中刪除老版本的babel, babel-core，並執行npm uninstall來實現物理刪除。

2.所有的轉化(transform)現在都以插件的方式提供，

包括ES2015和JSX。因此，默認是不帶任何轉化效果的，你需要手工安裝對應的插件。而且轉化ES2015需要20多個插件。還好不用手工一個個安裝這些插件，Babel通過預設集(preset)來解決這個問題。

3.Babel6裡面的預設集(preset)就是各種插件的組合。

以前Babel5的功能在Babel6裡面體現為兩個預設集。

 npm install babel-preset-es2015 babel-preset-react --save-dev

但是記得即使通過npm安裝了預設集，也要需要設置Babel才能使用

4..babelrc現在是必須要了。

因為Babel6默認不會啟用ES2015和React轉化，因此gulpfile.babel.js和mocha都沒辦法正常運行。

只有在項目根目錄下提供.babelrc文件才能解決這個問題。

{
 "presets": ["es2015", "react"]
}
 

5.Stage 0現在是獨立的預設集(preset)，不再是命令行選項。

以前你是通過傳遞命令行參數 --stage 0給babel命令來啟用ES7的轉化。現在你需要安裝和加載babel-preset-stage-0安裝包。

6.以前的--external-helpers選項現在也變成插件了。

為了防止重複引用Babel的helper，現在需要手工安裝和加載babel-plugin-transform-runtime安裝包，

在你的代碼中需要通過require引用babel-runtime包（即使你在使用babel-polyfill）

做到以上6點，你就可以開足馬力，體驗Babel6提供的包，插件，預設集和選項等特徵了。

問題來了，Webpack裡面怎麼辦？

如果要通過命令行傳遞預設集(preset)怎麼辦？

為了保持本文的簡潔性，這部分內容請參考我的另外一篇文章 - ES6和Babel6完全指南手冊 - 這篇文章覆蓋了 CLI, Webpack, Gulp和 Mocha等內容。

技術日新月異，怎麼樣才能跟得上變化？

隨著ES2015的標準化，對於Babel是否是JavaScript程序猿的必備工具已經沒有爭議了。但是如果要把整個JavaScript相關平臺引入到每一個新的項目呢？JavaScript的生態環境的變化之快簡直讓人目不暇接。

不過還好，不是說你一定要上所有的新東西。

對於大部分項目，開發人員經常關注的是擴展性問題。不過在沒有遇到這個問題的時候，將精力放在最重要的工具上往往意味著更加高效。

上就是今天的分享啦~

技術乾貨可以私信發送【微信】加朗妹兒微信喲~