Skip to main content

什么是 Babel？

Babel 是一个 JavaScript 编译器​

¥Babel is a JavaScript compiler

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

¥Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

  • 转换语法

    ¥Transform syntax

  • 目标环境中缺少的 Polyfill 功能（通过第三方 polyfill，例如 core-js）

    ¥Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)

  • 源代码转换 (codemods)

    ¥Source code transformations (codemods)

  • 以及更多！（查看这些 视频 以获得灵感）

    ¥And more! (check out these videos for inspiration)

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 本身是如何在高层次上工作的。

¥For an awesome tutorial on compilers, check out the-super-tiny-compiler, which also explains how Babel itself works on a high level.

ES2015 及以上​

¥ES2015 and beyond

Babel 通过语法转换器支持最新版本的 JavaScript。

¥Babel has support for the latest version of JavaScript through syntax transformers.

这些 插件 允许你立即使用新语法，而无需等待浏览器支持。查看我们的 使用指南 以开始使用。

¥These plugins allow you to use new syntax, right now without waiting for browser support. Check out our usage guide to get started.

JSX 和 React​

¥JSX and React

Babel 可以转换 JSX 语法！查看我们的 React 预设 以开始使用。将它与 babel-sublime 包一起使用，将语法高亮提升到一个全新的水平。

¥Babel can convert JSX syntax! Check out our React preset to get started. Use it together with the babel-sublime package to bring syntax highlighting to a whole new level.

你可以使用以下方式安装此预设

¥You can install this preset with

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

并将 @babel/preset-react 添加到你的 Babel 配置中。

¥and add @babel/preset-react to your Babel configuration.

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

¥Learn more about JSX

类型注解（Flow 和 TypeScript）​

¥Type Annotations (Flow and TypeScript)

Babel 可以去掉类型注解！查看我们的 Flow 预设 或 TypeScript 预设 以开始使用。请记住，Babel 不进行类型检查；你仍然需要安装并使用 Flow 或 TypeScript 来检查类型。

¥Babel can strip out type annotations! Check out either our Flow preset or TypeScript preset to get started. Keep in mind that Babel doesn't do type checking; you'll still have to install and use Flow or TypeScript to check types.

你可以使用安装 flow 预设

¥You can install the flow preset with

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

或 TypeScript 预设

¥or the typescript preset with

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

了解有关 Flow 和 TypeScript 的更多信息！

¥Learn more about Flow and TypeScript!

插件化​

¥Pluggable

Babel 是由插件构建的。使用现有插件或编写你自己的插件来编写你自己的转换管道。通过使用或创建 预设 轻松使用一组插件。了解更多 →

¥Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by using or creating a preset. Learn more →

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

¥Create a plugin on the fly with astexplorer.net or use generator-babel-plugin to generate a plugin template.

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

可调试​

¥Debuggable

源映射支持，以便你可以轻松调试编译的代码。

¥Source map support so you can debug your compiled code with ease.

符合规范​

¥Spec Compliant

Babel 尽可能地忠实于 ECMAScript 标准。作为对性能的权衡，它还可能具有更符合规范的特定选项。

¥Babel tries to stay true to the ECMAScript standard, as much as reasonably possible. It may also have specific options to be more spec compliant as a tradeoff to performance.

压缩​

¥Compact

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

¥Babel tries using the least amount of code possible with no dependence on a bulky runtime.

这在某些情况下可能很难做到，并且有 "assumptions" 选项可以在可读性、文件大小和速度方面权衡规范合规性。

¥This may be difficult to do in cases, and there are "assumptions" options that tradeoff spec compliancy for readability, file size, and speed.