Babel轉碼快速入門

cinglong發表於2019-02-16
Babel

閱讀基礎：能在node環境下使用npm/yarn

Babel 可以將 ES6 程式碼轉為 ES5 程式碼，從而可以在不支援 ES6 的環境執行，下面是一個例子：

//轉碼前
a=>a+1;

//轉碼後
(function (a) {
  return a + 1;
});

//上面的程式碼使用了箭頭函式，Babel 將其轉為普通函式。

Babel 雖然支援瀏覽器環境，但網頁實時將 ES6 程式碼轉為 ES5 程式碼會對網頁效能有影響，所以我們需要使用構建工具在生產環境將 ES6 程式碼進行提前轉碼。

配置babel

Babel 只能轉換語法（如箭頭函式），不支援新的全域性變數，比如：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等。
如果想讓這些方法執行，必須使用 babel-polyfill ,為當前環境提供該方法。

babel、babel-polyfill 安裝：

$ yarn add babel-preset-env --dev
$ yarn add babel-polyfill --dev

安裝完成後，我們可以通過.babelrc檔案或者package.json檔案對 babel 進行配置；配置檔案可以根據具體的需求進行配置：英文文件 中文文件。

  • 方法一：新建 .babelrc 檔案，並新增以下欄位：
{
  "presets": [["env",{"useBuiltIns": true}]]
}
  • 方法二：在 package.json 檔案中增加欄位：
{
  // ...
  "babel": {
    "presets": [["env",{"useBuiltIns": true}]]
  }
}

babel-cli 命令列轉碼

Babel 提供 babel-cli 工具，可用於命令列轉碼，工具安裝：

$ yarn add babel-cli --dev

babel-cli 基本用法：

# 輸出轉碼結果
$ babel index.js

# 單檔案轉碼
# --out-file 或 -o 引數指定輸出檔案
$ babel index.js --out-file compiled.js
$ babel index.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 引數指定輸出目錄
$ babel src --out-dir build
$ babel src -d build

# -s 引數生成source map檔案
$ babel src -d build -s

我們可以在 package.json 檔案中增加指令碼：

{
  // ...
  "scripts": {
    "build": "babel src -d build"
  },
}

轉碼的時候，就執行下面的命令。

$ yarn run build

babel-node

babel-cli 工具自帶一個 babel-node 命令，提供一個支援 ES6 的 REPL 環境，而且可以直接執行 ES6 程式碼。

執行 babel-node 就可以進入REPL環境：

$ babel-node
> (x => x * 2)(1)
2

babel-node 命令可以直接執行 ES6 指令碼。將上面的程式碼放入指令碼檔案 es6.js，然後直接執行。

$ babel-node es6.js
2

我們可以改寫 package.json：

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

用 babel-node 代替 node, test.js 就不需要做任何轉碼處理了。

相關文章