1. babel 5.x 和babel 6.x
babel 5.x -> 6.x 的變化非常大，15 年 11 月，Babel 發布了 6.0 版本。相較于前一代 Babel 5，新一代 Babel 更加模塊化， 將所有的轉碼功能以插件的形式分離出去，默認只提供 babel-core，babel-cli兩個不同方式的轉換平臺。原本只需要裝一個 babel ，現在必須按照自己的需求配置，靈活性提高的同時也提高了使用者的學習成本。
2. babel 5.x
babel 5.x包囊括了整個編譯器、所有的轉換器以及一個CLI工具， 這么做的缺點就是它會導致很多不必要的下載，并且代碼也令人困惑,靈活性也很差。
3. babel 6.x
babel 6.x已經不存在babel包了，轉而代之的是babel-cli和babel-core兩個包。babel-cli是用于命令行的代碼轉換，而babel-core是用于項目編譯環境。
4. babel-cli
安裝babel-cli（用于在終端使用babel )######
npm install -g babel-cli
然后安裝babel-preset-es2015插件集######
npm install --save babel-preset-es2015
在命令行輸入：######
babel es6.js --presets es2015
輸出：######
"use strict";
[1, 2, 3].map(function (x) {
return x * x;
});
.babelrc#####
命令行中，我們可以發現都會帶有相關插件參數，也可以在.babelrc文件中配置：
{
"presets": ["es2015"],
"plugins": []
}
5. AST(抽象語法樹)
如果對于源代碼而言，AST就是源代碼的抽象語法結構的樹狀表現形式。舉個例子說明：
源代碼：####
let a = "hello";
let b = a;
轉換后的AST：####
# of nodes: 9
# of tokens: 10
Tokens:
Keyword(let) Identifier(a) Punctuator(=) String("hello") Punctuator(;)
Keyword(let) Identifier(b) Punctuator(=) Identifier(a) Punctuator(;)
6. babel-core：
babel-core 的作用是把 js 代碼分析成 ast ( 抽象語法樹 ,是源代碼的抽象語法結構的樹狀表現形式)，方便各個插件分析語法進行相應的處理。有些新語法在低版本 js 中是不存在的，如箭頭函數，rest 參數，函數默認值等，這種語言層面的不兼容只能通過將代碼轉為 ast，分析其語法后再轉為低版本 js。首先安裝 babel-core。
安裝 babel-core####
npm install babel-core
引入 babel-core####
var babel = require("babel-core");
字符串形式的 JavaScript 代碼編譯####
var result = babel.transform("code();", {plugins:[],preset:{}...});
result.code;//
result.map;//
result.ast;//
如果是文件的話，可以使用異步 api：####
var result = babel.transformFile("filename.js", {plugins:[],preset:{}...}, function(err, result) {
result.code;//
result.map;//
result.ast;//
});
如果是文件的話,也可以使用同步 api####
var result = babel.transformFile("filename.js", {plugins:[],preset:{}...});
result.code;//
result.map;//
result.ast;//
7. babel 配置：
你或許已經注意到了，目前為止通過運行 Babel 自己我們并沒能“翻譯”代碼，而僅僅是把代碼從一處拷貝到了另一處。這是因為我們還沒告訴 Babel 要做什么。你可以通過安裝插件（plugins）或預設（presets，也就是一組插件）來指示 Babel 去做什么事情。
.babelrc 插件配置#####
接下來我們要讓babel去把es6語法翻譯為瀏覽器可以識別的es5語法。比如箭頭函數和常量，所以我們給它添加了兩個插件：babel-plugin-transform-es2015-arrow-functions，babel-plugin-transform-es2015-constants
{
"presets": [],
"plugins": ["transform-es2015-arrow-functions","babel-plugin-transform-es2015-constants"]
}
此時，babel就可以轉換es6的箭頭函數和let常量了。但有的時候，我們還需要很多轉換，因此插件的數量會越來越多，當然手動配置這些單一特性非常的繁瑣，所以babel提供了presets預設，也就是一套插件集。這樣就很方便，而無需一個一個插件的安裝和設置。目前，插件集有：babel-preset-es2015 ，babel-preset-react。
babel轉es6語法####
npm install --save-dev babel-preset-es2015
{
"presets": ["es2015"],
"plugins": []
}
babel轉react語法####
npm install --save-dev babel-preset-react
{
"presets": ["react"],
"plugins": []
}
8. babel-loader：
在webpack中可以使用babel-loader加載器來編譯所有的js代碼，而無需手動引入babel-core。當然，你也可以把相關插件或者插件集寫入.babelrc文件中，具體實現如下：
module: {
loaders: [
{
test: /\.js/,
loader: 'babel?presets[]=es2015,presets[]=react,plugins[]=transform-runtime'
}
]
}
9. babel-register：
babel-register 是放在 node 里使用的。它的作用是替代 node 的 require命令，與 node 自身的 require不同，它可以加載 es2015、jsx 等類型文件。有了它，我們就可以在require引入的文件中也可以寫es6、jsx，用法如下
require('babel-register')({presets: ['es2015', 'react']})
require('./app')
10. babel-polyfill：
babel 雖然可以轉換各種 ES2015 語法及 jsx，但瀏覽器未提供原生支持的許多功能還是需要 polyfill，比如 Promise。我們只要在代碼中引入 babel-polyfill 就可以模擬出一個 ES2015 的環境，用法如下：
安裝######
npm install babel-polyfill --save
引入######
import babel-polyfill
webpack中######
entry : {app : ['babel-polyfill','/app.js']}
11. babel-runtime：
與 babel-polyfill 一樣，babel-runtime 的作用也是模擬 ES2015 環境。只不過，babel-polyfill 是針對全局環境的，引入它，我們的瀏覽器就好像具備了規范里定義的完整的特性 – 雖然原生并未實現。babel-runtime 更像是分散的 polyfill 模塊，我們可以在自己的模塊里單獨引入，比如 require(‘babel-runtime/core-js/promise’)，它們不會在全局環境添加未實現的方法，只是，這樣手動引用每個 polyfill 會非常低效。我們借助 Runtime transform 插件來自動化處理這一切。至于要用 babel-polyfill 還是 babel-runtime，則需要根據具體需求。舉個例子，如果一個庫里引用了 babel-polyfill，別人的庫也引用了 babel-polyfill，我們很可能會跑兩個 babel-polyfill 實例，這里，使用 babel-runtime 會更合適。
