跳至主要內容

@babel/standalone

@babel/standalone 提供 Babel 的獨立建置，供瀏覽器和其他非 Node.js 環境使用。

何時（不）使用 @babel/standalone​

如果您在製作環境中使用 Babel，通常不應使用 @babel/standalone。您應改用在 Node.js 上執行的建置系統，例如 Webpack、Rollup 或 Parcel，來提前轉譯您的 JS。

不過，@babel/standalone 有些有效的用例

  • 它提供一種簡單、便利的方式來使用 Babel 建立原型。使用 @babel/standalone，您只要在 HTML 中加入一個簡單的腳本標籤，就能開始使用 Babel。
  • 即時編譯使用者提供的 JavaScript 的網站，例如 JSFiddle、JS Bin、Babel 網站上的 REPL、JSitor 等。
  • 直接內嵌 JavaScript 引擎（例如 V8）的應用程式，且想要使用 Babel 進行編譯
  • 想要使用 JavaScript 作為腳本語言來擴充應用程式本身的應用程式，包括現代 ES 提供的所有好處。
  • 其他非 Node.js 環境（ReactJS.NET、ruby-babel-transpiler、php-babel-transpiler 等）。

安裝​

取得 @babel/standalone 副本的方法有數種。選擇您喜歡的方法

  • 透過 UNPKG 使用它。這是一種簡單的方式，可以在網頁中內嵌它，而不需要進行任何其他設定。 
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  • 手動安裝它： 
    npm install --save @babel/standalone

腳本標籤​

載入至瀏覽器時，@babel/standalone 會自動編譯並執行所有類型為 text/babel 或 text/jsx 的腳本標籤

<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
  const getMessage = () => "Hello World";
  document.getElementById("output").innerHTML = getMessage();
</script>

屬性​

data-type​

新增於：v7.10.0

如果您想使用瀏覽器的原生 ES 模組支援，通常需要在腳本標籤上設定 type="module" 屬性。

使用 @babel/standalone 時，請改為設定 data-type="module" 屬性，如下所示

<script type="text/babel" data-type="module">

data-presets​

使用 data-presets 屬性來啟用內建的 Babel 預設值。多個值以逗號分隔

<script type="text/babel" data-presets="env,react">

最受歡迎的預設值有：env、react、typescript、flow。您也可以使用 Babel.availablePresets 來查詢可用的預設值。

如果您想傳遞其他選項，請參閱 自訂預設值 區段。

data-plugins​

使用 data-plugins 屬性來啟用內建的 Babel 外掛程式。多個值以逗號分隔。

<script type="text/babel" data-plugins="transform-class-properties">

請參閱 此處，以取得 @babel/standalone 中內建外掛程式的清單。您也可以從 Babel.availablePlugins 存取清單。

如果您想新增自訂外掛程式，請參閱 自訂外掛程式 區段。

src​

透過 src 屬性載入外部腳本也受支援

<script type="text/babel" src="foo.js"></script>

async​

你也可以為外部腳本設定 async 屬性。

<script type="text/babel" src="foo.js" async></script>

API​

在你的環境中載入 babel.js 或 babel.min.js。這會在 Babel 物件中公開 Babel 的 API

JavaScript
var input = 'const getMessage = () => "Hello World";';
var output = Babel.transform(input, { presets: ["env"] }).code;

請注意，設定檔 在 @babel/standalone 中無法使用，因為無法存取檔案系統。必須在傳遞給 Babel.transform 的選項中指定要使用的預設值和/或外掛程式。

內部套件​

@babel/standalone 在 Babel.packages 物件上公開一些 Babel 內部套件

  • Babel.packages.generator
  • Babel.packages.parser
  • Babel.packages.template
  • Babel.packages.traverse
  • Babel.packages.types

自訂​

自訂外掛程式​

可以使用 registerPlugin 和 registerPreset 方法分別新增自訂外掛程式和預設值

JavaScript
// Simple plugin that converts every identifier to "LOL"
function lolizer() {
  return {
    visitor: {
      Identifier(path) {
        path.node.name = "LOL";
      },
    },
  };
}
Babel.registerPlugin("lolizer", lolizer);

註冊後，你可以使用內嵌腳本中的自訂外掛程式

<script type="text/babel" data-plugins="lolizer">

或者你可以使用 Babel.transform 搭配外掛程式

JavaScript
var output = Babel.transform("function helloWorld() { alert(hello); }", {
  plugins: ["lolizer"],
});
// Returns "function LOL() { LOL(LOL); }"

自訂預設值：傳遞選項給內建預設值/外掛程式​

如果您想將選項傳遞給內建外掛程式和預設值，您可以建立一個新的預設值，並將這些選項傳遞到預設值內部。

JavaScript
// Define a preset
Babel.registerPreset("env-plus", {
  presets: [[Babel.availablePresets["env"], { loose: true }]],
  plugins: [
    [
      Babel.availablePlugins["proposal-decorators"],
      { version: "2023-01" },
    ],
  ],
});

註冊後，您可以在內嵌指令碼中使用此預設值

<script type="text/babel" data-presets="env-plus">