跳至主要内容

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