babel6 快速指南

最近在學習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複製代碼

更多配置細節移步:

• setting-up-babel-6
• babel-cli usage