@babel/standalone · Babel 中文网

#@babel/standalone · Babel 中文网| 来源: 网络整理| 查看: 265

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

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

通过 UNPKG 使用它。这是一种将其嵌入网页的简单方法，无需进行任何其他设置。手动安装：npmYarnpnpmnpm install --save @babel/standaloneyarn add @babel/standalonepnpm add @babel/standalone脚本标签

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

const getMessage = () => "Hello World"; document.getElementById("output").innerHTML = getMessage();属性data-type

添加于： v7.10.0

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

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

data-presets

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

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

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

data-plugins

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

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

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

src

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

async

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

API

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

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

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

定制化自定义插件

可以分别使用 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);

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

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

JavaScriptvar output = Babel.transform("function helloWorld() { alert(hello); }", { plugins: ["lolizer"],});// Returns "function LOL() { LOL(LOL); }"自定义预设：将选项传递给内置预设/插件

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

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

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

【本文地址】

公司简介

联系我们