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