babel6 快速指南

月野兔兔兔發表於2017-03-27
Babel

最近在學習es6的時候發現網上很多的babel教程都非常混亂，babel5和babel6的教程摻雜讓人不知道該怎麼辦，於是翻譯+整理了babel6的官方文件，作為快速入門~

相對於之前的babel5,babel6不再是一個整的大的package,而是拆分了很多個小的packages可供選擇安裝

基礎安裝 Installing Babel

如果你想在CLI(command-line interface命令列介面)使用的話，請安裝babel-cli

$ npm install --global babel-cli複製程式碼

如果你想結合node.js來寫的話，需要安裝babel-core

$ npm install --global babel-core複製程式碼

外掛和預設 Plugins and Presets

babel6裡並沒有預設的轉換規則，所以你安裝瞭如上兩項，用babel執行你的檔案會發現並沒有什麼變化，因此我們需要安裝所需外掛，並在.babelrc檔案做一些設定

例如使用箭頭函式

$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions複製程式碼

同時在.babelrc檔案新增：

{
  "plugins": ["transform-es2015-arrow-functions"]
}複製程式碼

當然還有很多細節我們不可能一點點全部去安裝，我們如果想要轉換某些特性的話，可以去安裝某個版本的預置，babel可以去向下相容

$ npm install --save-dev babel-preset-es2015複製程式碼
//.babelrc檔案
{
  "presets": ["es2015"]
}複製程式碼

如果想包含所有javascript版本的話：

$ npm install --save-dev babel-preset-env複製程式碼
//.babelrc檔案
{
  "presets": ["env"]
}複製程式碼

編譯使用

  • 在安裝了babel-cli之後，在命令列使用babel命令去編譯檔案：
      babel es6.js複製程式碼
    輸出編譯後的檔案:
      babel es6.js -o compiled.js複製程式碼
    監聽編譯檔案變動:
      babel es6.js -o -w compiled.js複製程式碼
  • 安裝完babel-cli和babel-core之後，使用babel-node命令去編譯並執行檔案
      //不適於生產環境
  $ babel-node es6.js複製程式碼



更多配置細節移步:

相關文章