Babel手冊

neil_發表於2018-02-06
Babel

Babel 使用者手冊

babel-cli

Babel 的 CLI 是一種在命令列下使用 Babel 編譯檔案的簡單方法。

babel-register

這種方法只需要引入檔案就可以執行 Babel，但請注意這種方法並不適合正式產品環境使用。 直接部署用此方式編譯的程式碼不是好的做法。 在部署之前預先編譯會更好。 不過用在構建指令碼或是其他本地執行的指令碼中是非常合適的。 $ npm install --save-dev babel-register

require("babel-register");
require("./index.js");
複製程式碼

babel-node

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

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

$ npm install --save-dev babel-cli

  {
    "scripts": {
-     "script-name": "node script.js"
+     "script-name": "babel-node script.js"
    }
  }
複製程式碼

babel-core

如果你需要以程式設計的方式來使用 Babel，可以使用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 }
複製程式碼

配置 Babel

.babelrc

在我們告訴 Babel 該做什麼之前，我們需要建立一個配置檔案。你需要做的就是在專案的根路徑下建立 .babelrc 檔案。然後輸入以下內容作為開始：

{
  "presets": [],
  "plugins": []
}
//這個檔案就是用來讓 Babel 做你要它做的事情的配置檔案。
複製程式碼

注意：儘管你也可以用其他方式給 Babel 傳遞選項，但 .babelrc 檔案是約定也是最好的方式。

babel-preset-es2015

我們先從讓 Babel 把 ES2015（最新版本的 JavaScript 標準，也叫做 ES6）編譯成 ES5（現今在大多數 JavaScript 環境下可用的版本）開始吧。

npm install --save-dev babel-preset-es2015

{
    "presets": [
+     "es2015"
    ],
    "plugins": []
 }
複製程式碼

babel-preset-react

$ npm install --save-dev babel-preset-react

然後在 .babelrc 檔案裡補充：

  {
    "presets": [
      "es2015",
+     "react"
    ],
    "plugins": []
  }
複製程式碼

babel-preset-stage-x

JavaScript 還有一些提案，正在積極通過 TC39（ECMAScript 標準背後的技術委員會）的流程成為標準的一部分。

這個流程分為 5（0－4）個階段。 隨著提案得到越多的關注就越有可能被標準採納，於是他們就繼續通過各個階段，最終在階段 4 被標準正式採納。

以下是4 個不同階段的（打包的）預設：

  • babel-preset-stage-0
  • babel-preset-stage-1
  • babel-preset-stage-2
  • babel-preset-stage-3

注意 stage-4 預設是不存在的因為它就是上面的 es2015 預設。

以上每種預設都依賴於緊隨的後期階段預設。例如，babel-preset-stage-1 依賴 babel-preset-stage-2，後者又依賴 babel-preset-stage-3。.

使用的時候只需要安裝你想要的階段就可以了：

$ npm install --save-dev babel-preset-stage-2
複製程式碼

然後新增進你的 .babelrc 配置檔案。

  {
    "presets": [
      "es2015",
      "react",
+     "stage-2"
    ],
    "plugins": []
  }
複製程式碼

執行 Babel 生成的程式碼

babel-polyfill

Babel 幾乎可以編譯所有時新的 JavaScript 語法，但對於 APIs 來說卻並非如此。

比方說，下列含有箭頭函式的需要編譯的程式碼：

function addAll() {
  return Array.from(arguments).reduce((a, b) => a + b);
}
複製程式碼

最終會變成這樣：

function addAll() {
  return Array.from(arguments).reduce(function(a, b) {
    return a + b;
  });
}
複製程式碼

然而，它依然無法隨處可用因為不是所有的 JavaScript 環境都支援 Array.from。

Uncaught TypeError: Array.from is not a function
複製程式碼

為了解決這個問題，我們使用一種叫做 Polyfill（程式碼填充，也可譯作相容性補丁） 的技術。 簡單地說，polyfill 即是在當前執行環境中用來複制（意指模擬性的複製，而不是拷貝）尚不存在的原生 api 的程式碼。 能讓你提前使用還不可用的 APIs，Array.from 就是一個例子。

Babel 用了優秀的 core-js 用作 polyfill，並且還有定製化的 regenerator 來讓 generators（生成器）和 async functions（非同步函式）正常工作。

要使用 Babel polyfill，首先用 npm 安裝它：

$ npm install --save babel-polyfill
複製程式碼

然後只需要在檔案頂部匯入 polyfill 就可以了：

import "babel-polyfill";
複製程式碼

babel-runtime

為了實現 ECMAScript 規範的細節，Babel 會使用“助手”方法來保持生成程式碼的整潔。

由於這些助手方法可能會特別長並且會被新增到每一個檔案的頂部，因此你可以把它們統一移動到一個單一的“執行時（runtime）”中去。

通過安裝 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 這兩個助手方法放進每一個需要的檔案裡去了。

相關文章