跳至主内容

@babel/standalone

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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

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

如果在生产环境中使用 Babel，通常不应使用 @babel/standalone。而应使用在 Node.js 上运行的构建系统（如 Webpack、Rollup 或 Parcel）预先转译你的 JavaScript 代码。

然而，@babel/standalone 在以下场景中非常适用：

  • 提供了一种简单便捷的原型设计方式。使用 @babel/standalone，只需在 HTML 中添加简单的 script 标签即可开始使用 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

Script 标签​

在浏览器中加载时，@babel/standalone 会自动编译并执行所有 type 为 text/babel 或 text/jsx 的 script 标签：

<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 模块，通常需要在 script 标签上设置 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 获取该列表。

如需添加自定义插件，请参考自定义插件章节。

data-targets​

添加于：v7.29.0

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

默认情况下，Babel 会将所有特性转译至 IE 8 和其他旧版浏览器支持的 ES3。你可以指定 browserslist 的 defaults 查询，该查询覆盖了大多数现代浏览器。这将成为 Babel 8 的默认目标。

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

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