跳到主要內容

使用指南

Babel 工具鏈中有很多工具，無論您是「最終使用者」或正在建構 Babel 本身的整合，都能讓您輕鬆使用 Babel。這將快速介紹這些工具，您可以在文件中的「使用」部分中閱讀更多相關資訊。

如果您使用的是架構，設定 Babel 的工作方式可能不同，或者實際上已經為您處理好了。請改為查看我們的互動式設定指南。

概觀​

本指南將展示如何將使用 ES2015+ 語法的 JavaScript 應用程式碼編譯成可在當前瀏覽器中運作的程式碼。這將涉及轉換新語法和補充遺失的功能。

設定此功能的完整流程包括

  1. 執行這些指令來安裝套件

    npm install --save-dev @babel/core @babel/cli @babel/preset-env

  2. 在專案根目錄中建立一個名為 babel.config.json 的設定檔（需要 v7.8.0 以上版本），內容如下

    babel.config.json
    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "edge": "17",
              "firefox": "60",
              "chrome": "67",
              "safari": "11.1"
            },
            "useBuiltIns": "usage",
            "corejs": "3.6.5"
          }
        ]
      ]
    }

    上述瀏覽器清單只是一個隨機範例。您必須根據您想支援的瀏覽器進行調整。請參閱 此處 以取得更多 @babel/preset-env 選項。

如果您使用的是較舊的 Babel 版本，則可以使用 babel.config.js

babel.config.js
const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets };

  1. 並執行此指令將所有程式碼從 src 目錄編譯到 lib

    Shell
    ./node_modules/.bin/babel src --out-dir lib

    您可以使用 npm@5.2.0 附帶的 npm 套件執行器，透過將 ./node_modules/.bin/babel 替換為 npx babel 來縮短該指令

請繼續閱讀以了解此運作方式的分步說明以及對每個所用工具的簡介。

使用 CLI 的基本用法​

您所需的所有 Babel 模組都以獨立的 npm 套件發布，其範圍在 @babel 之下（從版本 7 開始）。這種模組化設計允許各種工具針對特定使用案例進行設計。在這裡，我們將探討 @babel/core 和 @babel/cli。

核心函式庫​

Babel 的核心功能位於 @babel/core 模組。安裝後

npm install --save-dev @babel/core

您可以在 JavaScript 程式中直接 require 它，並像這樣使用它

JavaScript
const babel = require("@babel/core");

babel.transformSync("code", optionsObject);

不過，身為最終使用者，你可能想安裝其他工具，作為與 @babel/core 的介面，並與你的開發流程整合良好。即使如此，你可能仍想查看其文件頁面，以了解選項，其中大部分也可以從其他工具設定。

CLI 工具​

@babel/cli 是一個工具，讓你可以在終端機中使用 babel。以下是安裝指令和基本使用範例

npm install --save-dev @babel/core @babel/cli

./node_modules/.bin/babel src --out-dir lib

這會分析 src 目錄中的所有 JavaScript 檔案，套用我們告訴它套用的任何轉換，並將每個檔案輸出到 lib 目錄。由於我們尚未告訴它套用任何轉換，因此輸出程式碼將與輸入程式碼相同（不會保留確切的程式碼樣式）。我們可以透過將轉換傳遞為選項的方式，指定我們要的轉換。

我們在上面使用了 --out-dir 選項。你可以透過執行 --help，查看 cli 工具接受的其他選項。但對我們來說，目前最重要的選項是 --plugins 和 --presets。

外掛程式和預設​

轉換以外掛程式的形式提供，外掛程式是小型 JavaScript 程式，指示 Babel 如何對程式碼執行轉換。你甚至可以撰寫自己的外掛程式，將任何轉換套用至你的程式碼。為了將 ES2015+ 語法轉換成 ES5，我們可以依賴官方外掛程式，例如 @babel/plugin-transform-arrow-functions

npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

現在，我們程式碼中的任何箭頭函式都將轉換成與 ES5 相容的函式表達式

JavaScript
const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

這是一個好的開始！但我們的程式碼中還有其他我們想要轉換的 ES2015+ 功能。我們可以不用逐一新增所有想要的套件，而是使用「預設值」，它只是一組預先設定好的套件。

就像套件一樣，你也可以建立自己的預設值，以分享你需要的任何套件組合。對於我們這裡的用例，有一個名為 env 的絕佳預設值。

npm install --save-dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

此預設值在沒有任何設定的情況下，將包含所有支援現代 JavaScript（ES2015、ES2016 等）的套件。但預設值也可以採用選項。我們不從終端機傳遞 CLI 和預設值選項，而是來看另一種傳遞選項的方法：設定檔。

設定檔​

根據你的需求，有幾種不同的方式可以使用設定檔。務必閱讀我們的深入指南，了解如何設定 Babel以取得更多資訊。

現在，我們來建立一個名為 babel.config.json 的檔案（需要 v7.8.0 以上版本），內容如下

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        }
      }
    ]
  ]
}

現在，env 預設值將僅載入目標瀏覽器中不可用的功能的轉換套件。我們已經設定好語法了。接下來我們來看多重填充。

多重填充​

🚨 從 Babel 7.4.0 開始，此套件已被棄用，建議直接包含 core-js/stable（以多重填充 ECMAScript 功能）

JavaScript
import "core-js/stable";

如果你要將產生器或非同步函式編譯成 ES5，並且你使用的 @babel/core 或 @babel/plugin-transform-regenerator 版本低於 7.18.0，你還必須載入regenerator runtime套件。在使用 @babel/preset-env 的 useBuiltIns: "usage" 選項或 @babel/plugin-transform-runtime 時，它會自動載入。

@babel/polyfill 模組包含 core-js 和一個自訂 regenerator runtime，以模擬一個完整的 ES2015+ 環境。

這表示您可以使用新的內建函式，例如 Promise 或 WeakMap、靜態方法，例如 Array.from 或 Object.assign、實例方法，例如 Array.prototype.includes，以及產生器函式（與 regenerator 外掛程式一起使用時）。為了執行此操作，polyfill 會新增至全域範圍以及原生原型，例如 String。

對於函式庫/工具作者來說，這可能太多了。如果您不需要實例方法，例如 Array.prototype.includes，您可以使用 transform runtime 外掛程式，而不使用 @babel/polyfill，來完全避免污染全域範圍。

更進一步，如果您確切知道需要哪些功能的 polyfill，您可以直接從 core-js 要求。

由於我們正在建置應用程式，我們可以安裝 @babel/polyfill

npm install --save @babel/polyfill

請注意 --save 選項，而不是 --save-dev，因為這是需要在您的原始碼之前執行的 polyfill。

現在，幸運的是，我們正在使用 env 預設設定，其中有一個 "useBuiltIns" 選項，當設定為 "usage" 時，實際上會套用上面提到的最後一個最佳化，您只需包含您需要的 polyfill。有了這個新選項，組態會像這樣變更

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

Babel 現在會檢查您的所有程式碼，找出目標環境中遺失的功能，並僅包含必要的 polyfill。例如，這段程式碼

JavaScript
Promise.resolve().finally();

會變成這樣（因為 Edge 17 沒有 Promise.prototype.finally）

JavaScript
require("core-js/modules/es.promise.finally");

Promise.resolve().finally();

如果我們沒有使用 env 預設設定，且 "useBuiltIns" 選項設定為 "usage"（預設為 "false"），我們必須在我們的進入點中要求完整的 polyfill 僅一次，在任何其他程式碼之前。

例如

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "entry"
      }
    ]
  ]
}

然後，在我們的進入檔案中，先匯入 core-js（以 polyfill ECMAScript 功能），以模擬完整的 ES2015+ 環境，因為 @babel/polyfill 已 不建議使用

JavaScript
 import "core-js/stable";

摘要​

我們使用 @babel/cli 從終端機執行 Babel，使用 @babel/polyfill 填補所有新的 JavaScript 功能，並使用 env 預設值，只包含我們使用的且目標瀏覽器中沒有的轉換和填補。

如需設定 Babel 與您的建置系統、IDE 等的更多資訊，請查看我們的 互動式設定指南。