前端也要懂編譯：Babel 全景上手指南
此文檔翻譯自 https://github.com/jamiebuilds/babel-handbook，由圖雀醬審驗。
引言
Babel 是一個用于 JavaScript 的通用多用途編譯器，使用 Babel 可以使用(或創建)下一代 的JavaScript，以及下一代 JavaScript 工具。
作為一門語言，JavaScript 不斷發展，帶來了很多新的規范和建議，使用 Babel 可以讓你在這些新的規范和建議全面普及之前就提前使用它們。
Babel 通過將最新標準的 JavaScript 代碼編譯為已經在目前可以工作的代碼來實現上一段提到的內容。這個過程被稱為 “源代碼到源代碼” 的編譯，這也被成為 “轉換”。
例如，Babel 可以將最新的 ES2015 的箭頭函數語法從：
- const square = n => n * n;
轉換成下面的內容：
- const square = function square(n) {
- return n * n;
- };
然而，Babel 可以勝任更多的工作，因為Babel 支持語法擴展，例如 React 的 JSX 語法或者靜態類型檢查的 Flow 語法。
更近一步，在 Babel 中一切皆插件，而每個人都可以充分利用 Babel 的強大能力來創建屬于自己的插件。且 Babel 被組織成幾個核心的模塊，允許用戶利用這些模塊來構建下一代 JavaScript 工具鏈。
許多人也是這樣去做的，Babel 的生態系統正在茁長的成長。在這本 Babel 手冊中，我將講解 Babel 內建的一些工具以及社區里的一些擁有的工具。
Babel 模塊介紹
因為 JavaScript 社區沒有標準的構建工具，框架或平臺等，Babel 官方性與其他所有的主要工具進行了集成。無論是來自 Gulp、Browserify，或者是 Ember、Meteor，亦或是 Webpack 等，無論你的啟動工具是什么，Babel 都存在一些官方性的集成。
就本手冊而言，我們將介紹設置Babel的內置方法，但是您也可以訪問交互式設置頁面[1]以了解所有集成。
- 注意：本指南將參考諸如 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
- # or
- $ babel example.js -o compiled.js
如果我們想將整個目錄編譯成一個新目錄，可以使用 --out-dir 或 -d 來完成。
- $ babel src --out-dir lib
- # or
- $ babel src -d lib
從項目中運行Babel CLI
雖然您可以在計算機上全局安裝Babel CLI，但最好逐個項目在本地安裝它。
這有兩個主要原因。
- 同一臺計算機上的不同項目可能取決于Babel的不同版本，從而允許您一次更新一個版本。
- 這意味著您對工作的環境沒有隱式依賴。使您的項目更加可移植且易于設置。
我們可以通過運行以下命令在本地安裝Babel CLI：
- $ npm install --save-dev babel-cli
- 注意：由于在全局范圍內運行 Babel 通常是一個壞主意，因此您可能需要通過運行以下命令來卸載全局副本：
- $ npm uninstall --global babel-cli
完成安裝后，您的 package.json 文件應如下所示：
- {
- "name": "my-project",
- "version": "1.0.0",
- "devDependencies": {
- "babel-cli": "^6.0.0"
- }
- }
現在，與其直接從命令行運行 Babel，不如將命令放入使用本地版本的 npm 腳本中。只需在您的 package.json 中添加一個 “script” 字段，然后將 babel 命令放入其中即可進行構建。
- {
- "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");
這是在 Node 的模塊系統中注冊 Babel 并開始編譯每個 require 的文件。
現在，我們可以使用 node egister.js 代替運行 node index.js 。
- $ node register.js
注意：您不能在要編譯的文件中注冊 Babel。在 Babel 有機會編譯文件之前，Node 正在執行文件。
- require("babel-register");
- // not compiled:
- console.log("Hello world!");
babel-node
如果您只是通過 node CLI 運行某些代碼，則集成 Babel 的最簡單方法可能是使用 babel-node CLI，這在很大程度上只是對 node CLI 的替代。
請注意，這并非供生產使用。部署以這種方式編譯的代碼被認為是不好的做法。最好在部署之前提前進行編譯。但是，這對于構建腳本或您在本地運行的其他事情非常有效。
首先，請確保您已安裝 babel-cli 。
- $ npm install --save-dev babel-cli
**注意：**如果您想知道為什么要在本地安裝此軟件，請在上面的項目部分中閱讀 “從項目中運行 Babel CLI”。
然后，將運行 node 的任何位置替換為 babel-node 。
如果您使用的是 npm script ，則只需執行以下操作：
- {
- "scripts": {
- - "script-name": "node script.js"
- + "script-name": "babel-node script.js"
- }
- }
否則，您將需要寫出通向 babel-node 本身的路徑。
- - node script.js
- + ./node_modules/.bin/babel-node script.js
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 }
如果使用文件，則可以使用異步api：
- babel.transformFile("filename.js", options, function(err, result) {
- result; // => { code, map, ast }
- });
如果您出于任何原因已經擁有Babel AST，則可以直接從AST轉換。
- babel.transformFromAst(ast, code, options);
- // => { code, map, ast }
對于上述所有方法， options 可以傳遞指南可以從這里了解 https://babeljs.io/docs/usage/api/#options[2]。
配置 Babel
您現在可能已經注意到，僅運行 Babel 似乎除了將 JavaScript 文件從一個位置復制到另一個位置之外沒有執行任何其他操作。
這是因為我們尚未告訴 Babel 該做什么事情。
- 由于Babel是通用編譯器，它以多種不同的方式使用，因此默認情況下它不會執行任何操作。您必須明確告訴Babel 它應該做什么。
您可以通過安裝 plugins 或 presets (plugins 組)為Babel提供操作說明。
.babelrc
在我們開始告訴 Babel 怎么做之前。我們需要創建一個配置文件。您需要做的就是在項目的根目錄下創建一個 .babelrc 文件。從這樣開始：
- {
- "presets": [],
- "plugins": []
- }
該文件是您配置 Babel 以執行所需操作的方式。
- 注意：雖然您還可以通過其他方式將選項傳遞給 Babel，但 .babelrc 文件是約定俗成的，也是最好的方法。
babel-preset-es2015
讓我們首先告訴 Babel 將 ES2015(JavaScript標準的最新版本，也稱為ES6)編譯為ES5(當今大多數JavaScript環境中可用的版本)。
我們將通過安裝“ es2015” Babel預設來做到這一點(當然目前瀏覽器支持了絕大部分 ES2015 的特性了，這里是用作演示，使用形式是一致的)：
- $ npm install --save-dev babel-preset-es2015
接下來，我們將修改 .babelrc 以包括該預設。
- {
- "presets": [
- + "es2015"
- ],
- "plugins": []
- }
babel-preset-react
設置 React 同樣簡單。只需安裝預設：
- $ npm install --save-dev babel-preset-react
然后將預設添加到您的 .babelrc 文件中：
- {
- "presets": [
- "es2015",
- "react"
- ],
- "plugins": []
- }
babel-preset-stage-x
JavaScript還提出了一些建議，這些建議正在通過TC39(ECMAScript標準背后的技術委員會)流程納入標準。
此過程分為5個階段(0-4)。隨著提案獲得更大的吸引力，并更有可能被采納為標準，它們經歷了各個階段，最終在階段4被接納為標準。
這些以babel的形式捆綁為4種不同的預設：
- babel-preset-stage-0
- babel-preset-stage-1
- babel-preset-stage-2
- babel-preset-stage-3
請注意，沒有階段 4 的 preset ，因為它只是上面的 es2015 預設。
這些預設中的每個預設都需要用于后續階段的預設。即 babel-preset-stage-1 需要 babel-preset-stage-2 ，而 babel-preset-stage-3 也需要。
安裝您感興趣的 stage 很簡單：
- $ npm install --save-dev babel-preset-stage-2
然后，您可以將其添加到您的 .babelrc 配置中。
- {
- "presets": [
- "es2015",
- "react",
- + "stage-2"
- ],
- "plugins": []
- }
執行 Babel 生成的代碼
目前，您已經使用Babel編譯了代碼，但這還不是故事的結局。
babel-polyfill
幾乎所有未來 JavaScript 語法都可以使用 Babel 進行編譯，但 API 并非如此。
例如，以下代碼具有需要編譯的箭頭函數功能：
- function addAll() {
- return Array.from(arguments).reduce((a, b) => a + b);
- }
在編譯之后會變成如下這樣：
- function addAll() {
- return Array.from(arguments).reduce(function(a, b) {
- return a + b;
- });
- }
但是，由于 Array.from 并非在每個JavaScript環境中都存在，因此在編譯之后它仍然無法使用：
- Uncaught TypeError: Array.from is not a function
為了解決這個問題，我們使用一種叫做 Polyfill[3] 的東西。簡而言之，Polyfill 是一段代碼，該代碼復制當前運行時中不存在的 API，允許您在當前環境可用之前能提前使用 Array.from 等 API。
Babel使用出色的 core-js[4] 作為其polyfill，以及定制的 regenerator[5] 運行時，以使生成器和異步函數正常工作。
要包含 Babel polyfill，請首先使用npm安裝它：
- $ npm install --save babel-polyfill
然后只需將 polyfill 包含在任何需要它的文件的頂部：
- import "babel-polyfill";
babel-runtime
為了實現 ECMAScript 規范的詳細信息，Babel將使用 “helper” 方法來保持生成的代碼干凈。
由于這些 “helper” 方法會變得很長，而且它們被添加到每個文件的頂部，因此您可以將它們移動到 require 的單個“運行時”中。
首先安裝 babel-plugin-transform-runtime 和 babel-runtime ：
- $ npm install --save-dev babel-plugin-transform-runtime
- $ npm install --save babel-runtime
然后更新您的 .babelrc ：
- {
- "plugins": [
- + "transform-runtime",
- "transform-es2015-classes"
- ]
- }
現在，Babel 將如下代碼：
- class Foo {
- method() {}
- }
編譯成這樣：
- import _classCallCheck from "babel-runtime/helpers/classCallCheck";
- import _createClass from "babel-runtime/helpers/createClass";
- let Foo = function () {
- function Foo() {
- _classCallCheck(this, Foo);
- }
- _createClass(Foo, [{
- key: "method",
- value: function method() {}
- }]);
- return Foo;
- }();
而不是將 _classCallCheck 和 _createClass helper 函數放在需要的每個文件中。
配置 Babel(進階版)
大多數人都可以通過僅使用內置預設來使用 Babel，但是 Babel 所展現的功能遠不止于此。
手動指定插件
Babel 預設只是預配置插件的集合，如果您想做不同的事情，可以手動指定插件。這幾乎與預設完全相同。
首先安裝一個插件：
- $ npm install --save-dev babel-plugin-transform-es2015-classes
然后將 plugins 字段添加到您的 .babelrc 中。
- {
- + "plugins": [
- + "transform-es2015-classes"
- + ]
- }
這使您可以更精確地控制正在運行的確切的 transforms 。
有關官方插件的完整列表，請參見Babel插件頁面[6]。
還請看一下社區構建的所有插件[7]。如果您想學習如何編寫自己的插件，請閱讀Babel插件手冊[8](圖雀社區將在之后翻譯這本插件手冊，敬請期待~)。
插件選項
許多插件還具有將其配置為不同行為的 option 。例如，許多 transform 都具有 loose 模式，該模式會放棄某些規范行為，而傾向于使用更簡單，性能更高的代碼。
要將選項添加到插件，只需進行以下更改：
- {
- "plugins": [
- - "transform-es2015-classes"
- + ["transform-es2015-classes", { "loose": true }]
- ]
- }
根據環境定制 Babel
Babel插件解決了許多不同的任務。其中許多是開發工具，可以幫助您調試代碼或與工具集成。還有許多用于優化生產中代碼的插件。
因此，通常需要基于環境的 Babel 配置。您可以使用 .babelrc 文件輕松完成此操作。
- {
- "presets": ["es2015"],
- "plugins": [],
- + "env": {
- + "development": {
- + "plugins": [...]
- + },
- + "production": {
- + "plugins": [...]
- + }
- }
- }
Babel將根據當前環境在 env 內部啟用配置。
當前環境將使用 process.env.BABEL_ENV 。當 BABEL_ENV 不可用時，它將回退到 NODE_ENV ，如果不可用，則默認為“ development ”。
Unix
- $ BABEL_ENV=production [COMMAND]
- $ NODE_ENV=production [COMMAND]
Windows
- $ SET BABEL_ENV=production
- $ [COMMAND]
- 注意：[COMMAND] 是您用來運行Babel的任何東西(即 babel ， babel-node ，或者如果您正在使用 babel-register 鉤子，則可能只是 node )。
- 提示：如果要讓命令在 Unix 和 Windows 跨平臺上運行，請使用 cross-env[9]。
構建自己的預設
手動指定插件?插件選項?基于環境的設置?對于所有項目，所有這些配置似乎都需要重復很多次。
因此，我們鼓勵社區創建自己的預設。這可以是您整個公司[10]的預設。
創建預設很容易。假設您有以下 .babelrc 文件：
- {
- "presets": [
- "es2015",
- "react"
- ],
- "plugins": [
- "transform-flow-strip-types"
- ]
- }
您需要做的就是按照命名約定 babel-preset-* 創建一個新項目(請對此命名空間負責!)，并創建兩個文件。
首先，創建一個新的 package.json 文件，該文件具有您的預設所需的 dependencies 關系。
- {
- "name": "babel-preset-my-awesome-preset",
- "version": "1.0.0",
- "author": "James Kyle <me@thejameskyle.com>",
- "dependencies": {
- "babel-preset-es2015": "^6.3.13",
- "babel-preset-react": "^6.3.13",
- "babel-plugin-transform-flow-strip-types": "^6.3.15"
- }
- }
然后創建一個 index.js 文件，該文件導出 .babelrc 文件的內容，并用 require 調用替換插件/預設字符串。
- module.exports = {
- presets: [
- require("babel-preset-es2015"),
- require("babel-preset-react")
- ],
- plugins: [
- require("babel-plugin-transform-flow-strip-types")
- ]
- };
然后只需將其發布到 npm，就可以像使用任何預設一樣使用它。
Babel 和其他工具結合
一旦掌握了 Babel，Babel 便會很直接地進行設置，但是使用其他工具進行設置可能非常困難。但是，我們嘗試與其他項目緊密合作，以使體驗盡可能輕松。
靜態分析工具
較新的標準為語言帶來了許多新語法，而靜態分析工具才剛剛開始利用它。
Linting
ESLint 是最受歡迎的 Lint 工具之一，因此，我們維護了官方的 babel-eslint[11] 集成。首先安裝 eslint 和 babel-eslint 。
- $ npm install --save-dev eslint babel-eslint
接下來，在項目中創建或使用現有的 .eslintrc 文件，并將解析器設置為 babel-eslint 。
- {
- "parser": "babel-eslint",
- "rules": {
- ...
- }
- }
現在將一個 lint 任務添加到您的 npm package.json 腳本中：
- {
- "name": "my-module",
- "scripts": {
- "lint": "eslint my-files.js"
- },
- "devDependencies": {
- "babel-eslint": "...",
- "eslint": "..."
- }
- }
然后只需運行任務即可完成所有設置。
- $ npm run lint
有關更多信息，請查閱 babel-eslint[12]或eslint[13]文檔。
文檔
使用Babel，ES2015和Flow，您可以推斷出很多有關您的代碼的信息。使用documentation.js[14]，您可以非常輕松地生成詳細的API文檔。
Documentation.js在后臺使用Babel支持所有最新語法，包括Flow注釋，以便在代碼中聲明類型。
框架
現在，所有主要的JavaScript框架都專注于圍繞語言的未來調整其API。因此，在工具中進行了大量工作。
框架不僅有機會使用Babel，而且有機會以改善用戶體驗的方式對其進行擴展。
React
React極大地改變了其API以使其與ES2015類保持一致(在此處了解更新的API)。更進一步，React依賴Babel來編譯它的JSX語法，不贊成Babel來使用它自己的自定義工具。您可以按照上述說明開始設置 babel-preset-react 程序包。
React社區接受了Babel并與之合作。社區[15]現在進行了許多轉換。
最著名的是 babel-plugin-react-transform 插件，結合了許多特定于 React 的轉換，可以啟用熱模塊重裝和其他調試實用程序。
參考資料
[1]交互式設置頁面: https://babeljs.io/en/setup/
[2]https://babeljs.io/docs/usage/api/#options: https://babeljs.io/docs/usage/api/#options
[3]Polyfill: https://www.google.com/search?q=%E4%BB%80%E4%B9%88%E6%98%AF+polyfill&oq=%E4%BB%80%E4%B9%88%E6%98%AF+polyfill&aqs=chrome..69i57j0i12.3956j1j4&sourceid=chrome&ie=UTF-8
[4]core-js: https://github.com/zloirock/core-js
[5]regenerator: https://github.com/facebook/regenerator[6]Babel插件頁面: http://babeljs.io/docs/plugins/
[7]所有插件: https://www.npmjs.com/search?q=babel-plugin
[8]Babel插件手冊: https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md
[9]cross-env: https://www.npmjs.com/package/cross-env
[10]公司: https://github.com/cloudflare/babel-preset-cf
[11]babel-eslint: https://github.com/babel/babel/tree/master/eslint/babel-eslint-parser
[12]babel-eslint: https://github.com/babel/babel/tree/master/eslint/babel-eslint-parser
[13]eslint: https://eslint.org/
[14]documentation.js: http://documentation.js.org/
[15]社區: https://www.npmjs.com/search?q=babel-plugin+react
