介紹

Babel 是一個通用的多用途 JavaScript 編譯器。通過 Babel 你可以使用（並創建）下一代的 JavaScript，以及下一代的 JavaScript 工具。

作為一種語言，JavaScript 在不斷髮展，新的標準／提案和新的特性層出不窮。 在得到廣泛普及之前，Babel 能夠讓你提前（甚至數年）使用它們。

Babel 把用最新標準編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本。 這一過程叫做“源碼到源碼”編譯， 也被稱為轉換編譯（transpiling，是一個自造合成詞，即轉換＋編譯。以下也簡稱為轉譯）。

例如，Babel 能夠將新的 ES2015 箭頭函數語法：

const square = n => n * n;

轉譯為：

const square = function square(n) {
 return n * n;
};

不過 Babel 的用途並不止於此，它支持語法擴展，能支持像 React 所用的 JSX 語法，同時還支持用於靜態類型檢查的流式語法（Flow Syntax）。

更重要的是，Babel 的一切都是簡單的插件，誰都可以創建自己的插件，利用 Babel 的全部威力去做任何事情。

再進一步，Babel 自身被分解成了數個核心模塊，任何人都可以利用它們來創建下一代的 JavaScript 工具。

已經有很多人都這樣做了，圍繞著 Babel 湧現出了非常大規模和多樣化的生態系統。 在這本手冊中，我將介紹如何使用 Babel 的內建工具以及一些來自於社區的非常有用的東西。

在 Twitter 上關注 @thejameskyle，第一時間獲取更新。

安裝 Babel

由於 JavaScript 社區沒有統一的構建工具、框架、平臺等等，因此 Babel 正式集成了對所有主流工具的支持。 從 Gulp 到 Browserify，從 Ember 到 Meteor，不管你的環境設置如何，Babel 都有正式的集成支持。

本手冊的目的主要是介紹 Babel 內建方式的安裝，不過你可以訪問交互式的安裝頁面來查看其它的整合方式。

注意： 本手冊將涉及到一些命令行工具如 node 和 npm。在繼續閱讀之前請確保你已經熟悉這些工具了。

babel-cli

Babel 的 CLI 是一種在命令行下使用 Babel 編譯文件的簡單方法。

讓我們先全局安裝它來學習基礎知識。

$ npm install --global babel-cli

我們可以這樣來編譯我們的第一個文件：

$ babel my-file.js

這將把編譯後的結果直接輸出至終端。使用 --out-file 或著 -o 可以將結果寫入到指定的文件。.

$ babel example.js --out-file compiled.js
# 或
$ babel example.js -o compiled.js

如果我們想要把一個目錄整個編譯成一個新的目錄，可以使用 --out-dir 或者 -d。.

$ babel src --out-dir lib
# 或
$ babel src -d lib

在項目內運行 Babel CLI

儘管你可以把 Babel CLI 全局安裝在你的機器上，但是按項目逐個安裝在本地會更好。

有兩個主要的原因。

1. 在同一臺機器上的不同項目或許會依賴不同版本的 Babel 並允許你有選擇的更新。
2. 這意味著你對工作環境沒有隱式依賴，這讓你的項目有很好的可移植性並且易於安裝。

要在（項目）本地安裝 Babel CLI 可以運行：

$ npm install --save-dev babel-cli

**注意：**因為全局運行 Babel 通常不是什麼好習慣所以如果你想要卸載全局安裝的 Babel 的話，可以運行：

$ npm uninstall --global babel-cli

安裝完成後，你的 `package.json` 應該如下所示：

```json
{
 "name": "my-project",
 "version": "1.0.0",
 "devDependencies": {
 "babel-cli": "^6.0.0"
 }
}

現在，我們不直接從命令行運行 Babel 了，取而代之我們將把運行命令寫在 npm> 裡，這樣可以使用 Babel 的本地版本。

只需將 "scripts" 字段添加到你的 package.json 文件內並且把 babel 命令寫成 build 字段。.

 {
 "name": "my-project",
 "version": "1.0.0",
+ "scripts": {
+ "build": "babel src -d lib"
+ },
 "devDependencies": {
 "babel-cli": "^6.0.0"
 }
 }

現在可以在終端裡運行：

npm run build

這將以與之前同樣的方式運行 Babel，但這一次我們使用的是本地副本。

babel-register

下一個常用的運行 Babel 的方法是通過 babel-register。這種方法只需要引入文件就可以運行 Babel，或許能更好地融入你的項目設置。

但請注意這種方法並不適合正式產品環境使用。 直接部署用此方式編譯的代碼不是好的做法。 在部署之前預先編譯會更好。 不過用在構建腳本或是其他本地運行的腳本中是非常合適的。

讓我們先在項目中創建 index.js 文件。

console.log("Hello world!");

如果我們用 node index.js 來運行它是不會使用 Babel 來編譯的。所以我們需要設置 babel-register。.

首先安裝 babel-register。.

$ npm install --save-dev babel-register

接著，在項目中創建 register.js 文件並添加如下代碼：

require("babel-register");
require("./index.js");

這樣做可以把 Babel 註冊到 Node 的模塊系統中並開始編譯其中 require 的所有文件。

現在我們可以使用 register.js 來代替 node index.js 來運行了。

$ node register.js

**注意：**你不能在你要編譯的文件內同時註冊 Babel，因為 node 會在 Babel 編譯它之前就將它執行了。

require("babel-register"); // 未編譯的： console.log("Hello world!");

##  `babel-node`

如果你要用 `node` CLI 來運行代碼，那麼整合 Babel 最簡單的方式就是使用 `babel-node` CLI，它是 `node` CLI 的替代品。

但請注意這種方法並不適合正式產品環境使用。 直接部署用此方式編譯的代碼不是好的做法。 在部署之前預先編譯會更好。 不過用在構建腳本或是其他本地運行的腳本中是非常合適的。

首先確保 `babel-cli` 已經安裝了。 


```sh
$ npm install --save-dev babel-cli

注意: 如果您想知道我們為什麼要在本地安裝，請閱讀 上面在項目內運行Babel CLI的部分。

然後用 babel-node 來替代 node 運行所有的代碼 。.

如果用 npm>

 {
 "scripts": {
- "script-name": "node/>+ "script-name": "babel-node script.js"
 }
 }

要不然的話你需要寫全 babel-node 的路徑。

- node/>+ ./node_modules/.bin/babel-node script.js

提示：你可以使用 npm-run。.

babel-core

如果你需要以編程的方式來使用 Babel，可以使用 babel-core 這個包。

首先安裝 babel-core。.

$ npm install babel-core

var babel = require("babel-core");

字符串形式的 JavaScript 代碼可以直接使用 babel.transform 來編譯。.

babel.transform("code();", options);
// => { code, map, ast }

babel.transformFile("filename.js", options, function(err, result) {
 result; // => { code, map, ast }
});

babel.transformFileSync("filename.js", options);
// => { code, map, ast }

babel.transformFromAst(ast, code, options);
// => { code, map, ast }