Skip to main content

What is Babel?Babel是什么？

Babel is a JavaScript compilerBabel是一个JavaScript编译器​

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. Babel是一个工具链，主要用于在当前和旧版本的浏览器或环境中将ECMAScript 2015+代码转换为向后兼容的JavaScript版本。Here are the main things Babel can do for you:以下是巴贝尔可以为你做的主要事情：

  • Transform syntax转换语法
  • Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)目标环境中缺少的Polyfill功能（通过第三方Polyfill，如core-js）
  • Source code transformations (codemods)源代码转换（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;
});

For an awesome tutorial on compilers, check out the-super-tiny-compiler, which also explains how Babel itself works on a high level.关于编译器的精彩教程，请查看超小型编译器，它还解释了Babel本身是如何在高级别上工作的。

ES2015 and beyond以及其他​

Babel has support for the latest version of JavaScript through syntax transformers.Babel通过语法转换器支持最新版本的JavaScript。

These plugins allow you to use new syntax, right now without waiting for browser support. 这些插件允许您立即使用新的语法，而无需等待浏览器支持。Check out our usage guide to get started.查看使用指南即可开始使用。

JSX and ReactJSX和React​

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.Babel可以转换JSX语法！查看React预设即可开始。将它与babel-sublime包一起使用，将语法高亮显示提升到一个全新的水平。

You can install this preset with您可以使用安装此预设

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

and add @babel/preset-react to your Babel configuration.并将@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>
  );
};

Learn more about JSX了解更多关于JSX<的信息

Type Annotations (Flow and TypeScript)类型注释（Flow和TypeScript）​

Babel can strip out type annotations! Check out either our Flow preset or TypeScript preset to get started. Babel可以去掉类型注释！查看Flow预设或TypeScript预设即可开始。Keep in mind that Babel doesn't do type checking; you'll still have to install and use Flow or TypeScript to check types.请记住，Babel不进行类型检查；您仍然需要安装并使用Flow或TypeScript来检查类型。

You can install the flow preset with您可以使用安装流量预设

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

or the typescript preset with或预设的字体

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

Learn more about Flow and TypeScript

Pluggable​

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 →

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 tries to stay true to the ECMAScript standard, as much as reasonably possible. Babel试图尽可能忠实于ECMAScript标准。It may also have specific options to be more spec compliant as a tradeoff to performance.它也可能有特定的选项，以更符合规范，作为对性能的权衡。

Compact​

Babel tries using the least amount of code possible with no dependence on a bulky runtime.Babel尝试使用尽可能少的代码，而不依赖庞大的运行时。

This may be difficult to do in cases, and there are "assumptions" options that tradeoff spec compliancy for readability, file size, and speed.在某些情况下，这可能很难做到，而且有一些"assumptions"选项会在可读性、文件大小和速度方面权衡规范的兼容性。