跳至主要内容

什么是 Babel？

Babel 是一个 JavaScript 编译器​

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 代码转换为当前和旧版浏览器或环境中向后兼容的 JavaScript 版本。以下是 Babel 可以为您做的事情：

  • 转换语法
  • 填充目标环境中缺少的功能（通过第三方 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/preset-react 添加到您的 Babel 配置中。

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("");
      },
    },
  };
}

可调试​

源映射支持，因此您可以轻松调试编译后的代码。

符合规范​

Babel 试图尽可能地忠实于 ECMAScript 标准。它也可能具有特定的选项，以牺牲性能为代价来更加符合规范。

紧凑​

Babel 尝试使用尽可能少的代码，并且不依赖于庞大的运行时。

在某些情况下，这可能很难做到，并且有一些“假设”选项可以权衡规范符合性、文件大小和速度。