Skip to main content

@babel/standalone

@babel/standalone 提供了一个独立构建的 Babel，用于浏览器和其他非 Node.js 环境。

¥@babel/standalone provides a standalone build of Babel for use in browsers and other non-Node.js environments.

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

¥When (not) to use @babel/standalone

如果你在生产环境中使用 Babel，你通常不应该使用 @babel/standalone。相反，你应该使用在 Node.js 上运行的构建系统，例如 Webpack、Rollup 或 Parcel，来提前转换你的 JS。

¥If you're using Babel in production, you should normally not use @babel/standalone. Instead, you should use a build system running on Node.js, such as Webpack, Rollup, or Parcel, to transpile your JS ahead of time.

但是，@babel/standalone 有一些有效的用例：

¥However, there are some valid use cases for @babel/standalone:

  • 它提供了一种使用 Babel 进行原型制作的简单方便的方法。使用 @babel/standalone，你只需在 HTML 中添加一个简单的脚本标签即可开始使用 Babel。

    ¥It provides an easy, convenient way to prototype with Babel. Using @babel/standalone, you can get started using Babel with just a simple script tag in your HTML.

  • 实时编译用户提供的 JavaScript 的站点，如 JSFiddle、贾斌、Babel 网站上的 REPL、JSitor 等。

    ¥Sites that compile user-provided JavaScript in real-time, like JSFiddle, JS Bin, the REPL on the Babel site, JSitor, etc.

  • 直接嵌入 V8 等 JavaScript 引擎的应用，想使用 Babel 进行编译

    ¥Apps that embed a JavaScript engine such as V8 directly, and want to use Babel for compilation

  • 希望使用 JavaScript 作为脚本语言来扩展应用本身的应用，包括现代 ES 提供的所有好东西。

    ¥Apps that want to use JavaScript as a scripting language for extending the app itself, including all the goodies that modern ES provides.

  • 其他非 Node.js 环境（ReactJS.NET、ruby-babel-transpiler、php-babel-transpiler 等）。

    ¥Other non-Node.js environments (ReactJS.NET, ruby-babel-transpiler, php-babel-transpiler, etc).

安装​

¥Installation

有几种方法可以获得 @babel/standalone 的副本。选择你喜欢的一个：

¥There are several ways to get a copy of @babel/standalone. Pick whichever one you like:

  • 通过 UNPKG 使用它。这是一种将其嵌入网页的简单方法，无需进行任何其他设置。

    ¥Use it via UNPKG. This is a simple way to embed it on a webpage without having to do any other setup.

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  • 手动安装：

    ¥Install it manually:

    npm install --save @babel/standalone

脚本标签​

¥Script Tags

当在浏览器中加载时，@babel/standalone 将自动编译并执行所有类型为 text/babel 或 text/jsx 的脚本标签：

¥When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or 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>

属性​

¥Attributes

data-type​

添加于：v7.10.0

¥Added in: v7.10.0

如果你想使用浏览器对 ES 模块的原生支持，你通常需要在你的 script 标签上设置一个 type="module" 属性。

¥If you want to use your browser's native support for ES Modules, you'd normally need to set a type="module" attribute on your script tag.

对于 @babel/standalone，改为设置 data-type="module" 属性，如下所示：

¥With @babel/standalone, set a data-type="module" attribute instead, like this:

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

data-presets​

使用 data-presets 属性启用内置 Babel 预设。多个值以逗号分隔：

¥Use the data-presets attributes to enable builtin Babel presets. Multiple values are comma separated:

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

最流行的预设是：env、react、typescript、flow。你还可以使用 Babel.availablePresets 查询可用的预设。

¥Most popular presets are: env, react, typescript, flow. You can also use Babel.availablePresets to query available presets.

如果要传递其他选项，请参阅 自定义预设 部分。

¥If you want to pass additional options, refer to the custom presets section.

data-plugins​

使用 data-plugins 属性启用内置 Babel 插件。多个值以逗号分隔。

¥Use the data-plugins attribute to enable builtin Babel plugins. Multiple values are comma separated.

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

有关 @babel/standalone 中内置插件的列表，请参阅 此处。你还可以从 Babel.availablePlugins 访问该列表。

¥See here for a list of builtin plugins in @babel/standalone. You can also access the list from Babel.availablePlugins.

如果要添加自定义插件，请参阅 自定义插件 部分。

¥If you want to add custom plugins, refer to the custom plugins section.

src​

也支持通过 src 属性加载外部脚本：

¥Loading external scripts via src attribute is supported too:

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

async​

你还可以为外部脚本设置 async 属性。

¥You can also set the async attribute for external scripts.

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

API​

在你的环境中加载 babel.js 或 babel.min.js。这将在 Babel 对象中公开 Babel 的 API：

¥Load babel.js or babel.min.js in your environment. This will expose Babel's API in a Babel object:

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

请注意，配置文件 在 @babel/standalone 中不起作用，因为没有可用的文件系统访问权限。要使用的预设和/或插件必须在传递给 Babel.transform 的选项中指定。

¥Note that config files don't work in @babel/standalone, as no file system access is available. The presets and/or plugins to use must be specified in the options passed to Babel.transform.

内部包​

¥Internal packages

@babel/standalone 在 Babel.packages 对象上公开了一些内部 Babel 包：

¥@babel/standalone exposes some internal Babel packages on the Babel.packages object:

  • Babel.packages.generator

  • Babel.packages.parser

  • Babel.packages.template

  • Babel.packages.traverse

  • Babel.packages.types

定制化​

¥Customization

自定义插件​

¥custom plugins

可以分别使用 registerPlugin 和 registerPreset 方法添加自定义插件和预设：

¥Custom plugins and presets can be added using the registerPlugin and registerPreset methods respectively:

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

注册后，你可以在内联脚本中使用自定义插件：

¥Once registered, you can either use the custom plugin in an inline script:

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

或者你可以将插件与 Babel.transform 一起使用：

¥Or you can use the plugin with Babel.transform:

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

自定义预设：将选项传递给内置预设/插件​

¥custom presets: passing options to built-in presets/plugins

如果你想将选项传递给内置插件和预设，你可以创建一个新预设并在预设中传递这些选项。

¥If you want to pass options to builtin plugins and presets, you can create a new preset and pass these options inside the preset.

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

注册后，你可以在内联脚本中使用此预设：

¥Once registered, you can use this preset in an inline script:

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