【亲测免费】 babel-standalone 使用教程

2026-01-18 09:21:16作者：董斯意

项目介绍

babel-standalone 是一个开源的 JavaScript 编译器，它允许你在浏览器中直接使用 Babel 进行代码转换。Babel 是一个广泛使用的工具，用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版本的浏览器或其他环境中运行。

babel-standalone 的主要优势在于其独立性，无需 Node.js 环境即可在浏览器中运行，非常适合用于演示、测试或在需要即时编译代码的场景中使用。

项目快速启动

引入 babel-standalone

首先，你需要在 HTML 文件中引入 babel-standalone 脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Babel Standalone Example</title>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="output"></div>
    <script type="text/babel">
        const getMessage = () => "Hello World";
        document.getElementById('output').innerHTML = getMessage();
    </script>
</body>
</html>

使用 Babel 编译代码

在上面的示例中，我们使用了 type="text/babel" 来告诉浏览器这段脚本需要通过 Babel 进行编译。Babel 会自动处理这段代码，将其转换为兼容性更好的 JavaScript 代码。

应用案例和最佳实践

在线代码编辑器

babel-standalone 非常适合用于构建在线代码编辑器，用户可以即时编写和预览 ES6+ 代码的效果。例如，可以使用 CodeMirror 或 Monaco Editor 结合 babel-standalone 来实现这一功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线代码编辑器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/javascript/javascript.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <textarea id="code" rows="10" cols="50">const message = "Hello World"; console.log(message);</textarea>
    <button onclick="runCode()">运行</button>
    <script>
        const editor = CodeMirror.fromTextArea(document.getElementById('code'), {
            mode: "javascript",
            lineNumbers: true
        });

        function runCode() {
            const code = editor.getValue();
            const transformedCode = Babel.transform(code, { presets: ['env'] }).code;
            eval(transformedCode);
        }
    </script>
</body>
</html>

动态加载和编译模块

babel-standalone 还可以用于动态加载和编译 JavaScript 模块，这在一些需要动态执行代码的场景中非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态加载模块</title>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <button onclick="loadModule()">加载模块</button>
    <script>
        async function loadModule() {
            const response = await fetch('module.js');
            const code = await response.text();
            const transformedCode = Babel.transform(code, { presets: ['env'] }).code;
            eval(transformedCode);
        }
    </script>
</body>
</html>

典型生态项目

React

babel-standalone 可以与 React 结合

登录后查看全文