跳至主内容

Babel 是什么？

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

Babel 是一个 JavaScript 编译器​

Babel 是一个主要用来将 ECMAScript 2015+ 代码转换为向后兼容 JavaScript 版本的工具链，可在当前或旧版浏览器/环境中运行。以下是 Babel 能为你实现的核心功能：

  • 语法转换

  • 为目标环境缺失的功能添加 polyfill（通过第三方 polyfill 如 core-js）

  • 源代码转换（codemods）

  • 更多功能！（查看这些视频获取灵感）

JavaScript
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
提示

推荐一个超棒的编译器教程：the-super-tiny-compiler，它也通俗解释了 Babel 的内部工作原理。

支持 ES2015 及后续规范​

Babel 通过语法转换器支持最新 JavaScript 特性。

这些插件让你立即使用新语法，无需等待浏览器支持。查看使用指南开始配置。

JSX 与 React​

Babel 可以转换 JSX 语法！查看我们的 React 预设开始使用。搭配 babel-sublime 包可实现更强大的语法高亮。

可通过以下命令安装此预设：

npm install --save-dev @babel/preset-react

并在 Babel 配置中添加 @babel/preset-react。

JSX
export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
};
提示

深入了解 JSX

类型注解（Flow 与 TypeScript）​

Babel 可移除类型注解！查看 Flow 预设或 TypeScript 预设开始使用。请注意 Babel 不进行类型检查，你仍需安装 Flow 或 TypeScript 进行类型校验。

可通过以下命令安装 Flow 预设：

npm install --save-dev @babel/preset-flow
JavaScript
// @flow
function square(n: number): number {
  return n * n;
}

或通过以下命令安装 TypeScript 预设：

npm install --save-dev @babel/preset-typescript
JavaScript
function Greeter(greeting: string) {
  this.greeting = greeting;
}
提示

深入了解 Flow 和 TypeScript！

插件化架构​

Babel 由插件构成。使用现有插件组合自定义转换流程，或编写自己的插件。通过预设轻松复用插件集合。了解更多→

使用 astexplorer.net 实时创建插件，或通过 generator-babel-plugin 生成插件模板。

example-babel-plugin.js
// A plugin is just a function
export default function({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = [...name]
          .reverse()
          .join("");
      },
    },
  };
}

支持调试​

内置**源码映射(source map)**支持，轻松调试编译后的代码。

符合规范​

Babel 尽可能遵循 ECMAScript 标准。在性能与规范之间权衡时，提供特定选项增强规范兼容性。

轻量紧凑​

Babel 致力生成最小化代码，避免依赖臃肿的运行时环境。

某些场景下实现较困难，因此提供了"假设"选项，可在规范兼容性、可读性、文件大小和速度之间进行权衡。