babel/standalone 浏览器端 Babel 编译器安装、API 与 script 标签实时编译实战指南【免费下载链接】babel Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babelbabel/standalone 是 Babel 编译器面向非 Node.js 环境的独立构建产物Standalone build它把完整的编译管线打包成一个可直接在浏览器加载的脚本让开发者无需任何构建工具即可在网页中实时编译 JSX、TypeScript、Flow 与最新 ECMAScript 语法。本文基于 babel 仓库中 packages/babel-standalone 的官方说明与源码实现讲解其安装方式、核心 API、内置插件与预设体系、text/babelscript 标签自动编译机制以及自定义插件/预设的注册方法帮助你在浏览器演示、在线编辑器与学习型网页中快速落地 Babel 能力。概述什么是 babel/standalone在常规的 Babel 使用场景中开发者通过 npm 安装babel/core与各类插件、预设在 Node.js 环境或经由 webpack 等打包工具完成代码转换。babel/standalone 则是为浏览器等非 Node.js 环境设计的打包版本仓库中它的定位即是「Standalone build of Babel for use in non-Node.js environments」。它的核心设计理念体现在 src/index.ts 的入口注释中该入口把 Babel 的 API 包装成对 Web 浏览器更友好的版本移除了「自动探测插件」的行为改为显式注册所有可用插件与预设并要求自定义插件/预设必须通过registerPlugin/registerPreset注册后才能使用。这意味着两点关键差异你不需要像在 Node 环境那样先npm install每个插件再手工 import——所有内置插件和预设已被打进单个 bundle直接通过字符串名字引用即可未注册的插件名会被拒绝抛出Invalid plugin specified in Babel options错误从而保证浏览器环境下行为可预测、bundle 体积可控。从仓库的 package.json 可以看到发布产物包含babel.js、babel.min.js及对应的 source map 和types.d.ts类型声明运行时依赖仅有babel/core、babel/generator、babel/parser三个核心包。安装与引入官方 README 提供了两种包管理器的安装命令该包通常作为开发依赖使用使用 npmnpm install --save-dev babel/standalone或使用 yarnyarn add babel/standalone --dev安装完成后浏览器直接通过script标签引入产物即可script srchttps://unpkg.com/babel/standalone/babel.min.js/script !-- 或使用仓库内构建产物 -- script src../babel.js/script引入后全局会暴露一个Babel对象其完整 API 面在 types.d.ts 中有明确声明详见下文 API 章节。仓库自带的示例页面如 examples/example.htm正是通过console.log(Babel , Babel)与Babel.version验证全局对象与版本号。需要说明的适用前提发布包要求 Node.js 环境版本^22.18.0 || 24.11.0见 package.json但这是针对构建/测试工具链的要求在浏览器中运行最终产物时并不受此限制。核心 APItransform 系列与工具函数Babel全局对象提供了一套与babel/core对齐、但经过浏览器适配的 API。所有变换类 API 都会先经过内部processOptions对插件/预设名做查表解析详见 src/index.ts。transform / transformAsync同步与异步两种转换入口签名均为(code: string, options: InputOptions) FileResult | nullconst result Babel.transform(const getMessage () Hello World, { presets: [es2015], }); console.log(result.code); // use strict; // var getMessage function getMessage() { // return Hello World; // }; // 异步版本适合处理需要 await 的场景 const result2 await Babel.transformAsync(const a 42;, { presets: [es2015], });transformFromAst / transformFromAstAsync基于已有 AST 进行转换AST 可用Babel.packages.parser自行解析获得。测试用例 test/babel.js 展示了手工构造 AST 后同步/异步转换的完整写法const ast Babel.packages.parser.parse(42); const output Babel.transformFromAst(ast, 42, { presets: [es2015] }).code;其他工具函数buildExternalHelpers(code, opts)生成 Babel 运行时的外部 helpers 代码version当前 Babel 版本号字符串packages直接暴露babel/generator、babel/parser、babel/template、babel/traverse、babel/types五个子包的命名空间见 src/packages.ts可用于解析、遍历、生成等更底层的操作。测试 test/babel.js 验证了Babel.packages.parser.parseBabel.packages.generator.default的闭环可用性。内置插件与预设体系内置插件availablePlugins入口文件通过registerPlugins(all)一次性注册来自 src/generated/plugins.ts 的全部插件这些插件在构建期由 scripts/pluginConfig.json 生成。同时 src/index.ts 还做了两件兼容性处理将legacy-plugin-aliases来自 babel-compat-data/scripts/data/legacy-plugin-aliases.mjs中记录的旧名称映射到新插件例如旧的proposal-*名称可指向transform-*实现显式将proposal-unicode-sets-regex指向transform-unicode-sets-regex。因此字符串插件名含带选项的[name, { ... }]形式都可以直接用于options.plugins。测试 test/babel.js 验证了按名引用插件及携带选项的用法// 只转换箭头函数不转换 const Babel.transform(const getMessage () Hello World, { plugins: [transform-arrow-functions], }); // 插件带选项 Babel.transform(${x}, { plugins: [[transform-template-literals, { loose: true }]], });内置预设availablePresetsavailablePresets在 src/index.ts 中定义类型声明 types.d.ts 给出了完整列表预设名说明env按目标环境自动选择转换babel/preset-enves2015ES2015 语法转换内置的 preset-es2015见 src/preset-es2015.tses2016仅包含指数运算符转换es2017仅包含 async/await 转换es2015-loosees2015 的 loose 模式{ loose: true }es2015-no-commonjs移除 CommonJS 模块转换的 es2015{ modules: false }stage-0/stage-1/stage-2/stage-3各阶段提案预设见 src/preset-stage-0.ts 至 src/preset-stage-3.tsreactJSX 转换babel/preset-reacttypescriptTypeScript 语法剥离babel/preset-typescriptflowFlow 类型剥离babel/preset-flow注意es2016、es2017、es2015-loose、es2015-no-commonjs是 babel/standalone 特有的快捷预设stage-*预设的细节可以以 src/preset-stage-3.ts 为例查看它由proposal-decorators默认decoratorsVersion: 2023-11与transform-explicit-resource-management等插件组成。预设同样支持[name, options]形式测试验证了带选项用法test/babel.jsBabel.transform(export let x, { presets: [[es2015, { modules: false }]], }); // 输出: export var x;错误处理无效的插件/预设名由于取消了插件自动探测使用未注册的插件/预设名会直接抛错src/index.tsInvalid preset specified in Babel options: lolfail Invalid plugin specified in Babel options: lolfail对应测试见 test/babel.js。注册自定义插件与预设浏览器中无法通过 npm 引入新插件babel/standalone 提供了运行时注册 API 来扩展能力src/index.tsregisterPlugin(name, plugin)注册单个插件插件为返回{ visitor }的函数若名字已存在会打印覆盖警告registerPlugins(plugins)批量注册参数为「名字 → 插件」的对象registerPreset(name, preset)注册单个预设若注册env会提示 preset-env 已内置registerPresets(presets)批量注册预设。测试 test/babel.js 给出了一个经典的自定义插件示例——lolizer把所有标识符改名为LOLBabel.registerPlugin(lolizer, () ({ visitor: { Identifier(path) { path.node.name LOL; }, }, })); const output Babel.transform(function helloWorld() { alert(hello); }, { plugins: [lolizer], }); // 输出: function LOL() { LOL(LOL); }自定义预设的注册方式类似Babel.registerPreset(lulz, { plugins: [lolizer] })随后即可在presets: [lulz]中引用。浏览器中的自动转换text/babel script 标签babel/standalone 最著名的能力是自动转换页面中typetext/babel兼容旧写法text/jsx的script标签实现「保存即运行」的即时体验。工作机制脚本加载完成后入口会在浏览器环境中监听DOMContentLoaded事件并调用transformScriptTags()src/index.ts核心逻辑在 src/transformScriptTags.ts 中runScripts收集页面中类型为text/jsx或text/babel的 script 标签支持typetext/jsx;harmonytrue这类带参数的历史写法内联脚本直接读取innerHTML外部脚本带src通过 XHR 异步加载transformScriptTags.ts并保证按 DOM 顺序依次执行每个脚本按buildBabelOptions构造转换选项transformScriptTags.ts后调用transform转换结果以新script元素追加到head末尾执行transformScriptTags.ts。默认选项逻辑当未显式指定 presets 时普通脚本presets: [[react, { runtime: classic }], env]即 JSX 按环境转换声明data-typemodule的脚本使用[[react, { runtime: classic }], [env, { modules: false }]]并设置targets.esmodules true保留 ES 模块语义输出总是携带 inline source map便于浏览器调试。script 标签支持的 data 属性源码 transformScriptTags.ts 定义了三个可选的data-*属性用于覆盖默认转换配置多个值用逗号分隔属性作用空字符串的含义data-presets覆盖默认预设如data-presetses2015,react不加载任何预设data-plugins额外指定插件如data-pluginstransform-class-properties不加载任何插件data-targets指定目标浏览器如data-targetschrome 60会传入targets.browsersdata-typemodule时额外附加esmodules: true不指定目标最小示例仓库示例 examples/scriptTag-inline.htm 展示了内联脚本用法!DOCTYPE html html head meta charsetutf-8 / /head body pre idoutputLoading.../pre script src../babel.js/script script typetext/babel const doStuff () { const name world; document.getElementById(output).innerHTML Hello ${name}; document.getElementById(version).innerHTML Babel.version; }; doStuff(); /script /body /html外部脚本只需给typetext/babel的标签加上src见 examples/scriptTag-src.htm 与对应的 examples/example.jsscript typetext/babel srcexample.js/script页面加载后pre idoutput会被自动替换为转换后代码的执行结果Hello world。手动控制disableScriptTags 与 transformScriptTags自动转换适合快速原型但生产环境或需要精细控制时可以通过两个函数手动接管Babel.disableScriptTags()移除DOMContentLoaded监听禁止自动转换src/index.ts。示例 examples/scriptTag-disabled.htm 展示禁用后text/babel脚本不会被执行Babel.transformScriptTags(scriptTags?)手动触发转换可传入指定的一组 script 标签默认处理页面中所有符合条件的标签。示例 examples/scriptTag-custom.htm 演示了「先禁用自动转换 → 动态创建text/babel脚本 → 手动调用transformScriptTags()」的完整流程适合动态注入脚本并希望自己掌控执行时机的场景。综合实战在网页中实时转换 JSX把上述 API 组合起来即可搭建一个类似官方 examples/example.htm 的实时转换器用户在文本域输入代码keyup时同步输出转换结果。!DOCTYPE html html head meta charsetutf-8 / titlebabel-standalone 实时转换/title /head body textarea idinput rows10 stylewidth: 100% const getMessage () Hello World; const someDiv div{getMessage()}/div; /textarea pre idoutputLoading.../pre script src../babel.js/script script var inputEl document.getElementById(input); var outputEl document.getElementById(output); function transform() { try { outputEl.innerHTML Babel.transform(inputEl.value, { presets: [es2015, react, [stage-0, { decoratorsBeforeExport: false }]], }).code; } catch (ex) { outputEl.innerHTML ERROR: ex.message; } } inputEl.addEventListener(keyup, transform, false); transform(); /script /body /html这段示例同时覆盖了预设字符串引用、带选项预设、同步transformAPI 与异常捕获四个关键点可在此基础上扩展出 TypeScriptpresets: [typescript]或 Flowpresets: [flow]等更多语法组合。补充与其他 Babel 包的边界作为独立构建产物babel/standalone 依赖的运行时核心仅有babel/core、babel/generator、babel/parserpackage.json其余插件/预设均作为 devDependencies 在构建期被打入 bundle——这也是它能做到「单个文件、开箱即用」的根本原因。如果需要更底层的 AST 操作能力可通过Babel.packages直接访问 parser / generator / traverse / template / types 五个子模块如果需要将转换能力集成进 Node 或打包工具链则建议直接使用babel/core及相关插件包而不是 standalone 版本。相关资源官方包说明packages/babel-standalone/README.md入口实现与 API 定义src/index.ts、types.d.tsscript 标签转换实现src/transformScriptTags.ts可运行示例examples/example.htm、examples/scriptTag-inline.htm、examples/scriptTag-src.htm、examples/scriptTag-custom.htm、examples/scriptTag-disabled.htm测试用例test/babel.js【免费下载链接】babel Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考