@babel/独立

@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 (opens new window) 、Babel 站点上的 REPL (opens new window) 、JSitor (opens new window) 等。
• 直接嵌入V8等JavaScript引擎，并希望使用Babel编译的应用
• 希望使用 JavaScript 作为脚本语言来扩展应用程序本身的应用程序，包括现代 ES 提供的所有好东西。
• 其他非 Node.js 环境（* ReactJS.NET 、ruby-babel-transpiler (opens new window) 、php-babel-transpiler (opens new window) 等）。

安装

有几种方法可以获得@babel/standalone. 选择您喜欢的任何一个：

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

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

• 手动安装：

• npm

npm install --save @babel/standalone

• yarn

yarn add @babel/standalone

脚本标签 (opens new window)

当在浏览器中加载时，@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​ (opens new window)

添加于：v7.10.0

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

使用@babel/standalone，而是设置一个data-type="module"属性，如下所示：

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

data-presets​ (opens new window)

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

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

最流行的预设是：env (opens new window) , react , typescript , flow 。您还可以使用Babel.availablePresets查询可用的预设。

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

data-plugins​ (opens new window)

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

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

请参阅此处 (opens new window) 以获取@babel/standalone. 您还可以从访问列表Babel.availablePlugins。

如果要添加自定义插件，请参阅自定义插件 (opens new window) 部分。

src​ (opens new window)

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

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

async​ (opens new window)

您还可以设置async外部脚本的属性。

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

应用程序接口

加载babel.js或babel.min.js在您的环境中。这将在对象中公开Babel 的 API (opens new window) Babel：

JavaScript

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

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

定制

自定义插件 (opens new window)

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); }"

自定义预设：将选项传递给内置预设/插件 (opens new window)

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

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