Skip to main content

@babel/standalone

@babel/standalone 提供了一个独立的 Babel 版本，可在浏览器和其他非 Node.js 环境中使用。

何时（不）使用 @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。
  • 像 JSFiddle、JS Bin、Babel 网站上的 REPL、JSitor 等即时编译用户提供的 JavaScript 的网站。
  • 直接嵌入 V8 等 JavaScript 引擎的应用，想使用 Babel 进行编译
  • 希望使用 JavaScript 作为脚本语言来扩展应用本身的应用，包括现代 ES 提供的所有好东西。
  • 其他非 Node.js 环境（ReactJS.NET、ruby-babel-transpiler、php-babel-transpiler 等）。

安装​

🌐 Installation

有好几种方法可以获取 @babel/standalone 的副本，随便选一个你喜欢的吧：

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

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

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

  • 手动安装：

    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">

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.

data-targets​

已添加于：v7.29.0

🌐 Added in: v7.29.0

使用 data-targets 属性来指定项目的 编译目标。

🌐 Use the data-targets attribute to specify the compilation targets of the project.

默认情况下，Babel 会将所有特性转译到 browserslist defaults 目标，这覆盖了大多数现代浏览器。如果你想支持像 IE 8 这样的旧版浏览器，你必须指定这个属性：

🌐 By default Babel will transpile all features to the browserslist defaults targets, which covers most modern browsers. If you want to support legacy browsers such as IE 8, you must specify the this attribute:

<script type="text/babel" data-presets="env" data-targets="ie 8">

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.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">