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:

  • 转换语法
  • 为你的目标环境填补缺失的功能（通过第三方 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;
});
tip

想看一个很棒的编译器教程，可以看看 the-super-tiny-compiler，它还会从高层次讲解 Babel 自身是如何工作的。

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>
  );
};
tip

了解更多关于 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;
}
tip

了解更多关于 Flow 和 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.

可以在 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

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

符合规范​

🌐 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.

在某些情况下，这可能很难做到，而且有一些假设选项在规范遵循性和可读性、文件大小以及速度之间做权衡。

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