Babel 是什么？Babel 是 JavaScript 编译器

Babel 是工具链，主要用于将 ECMAScript 2015+ 版本的为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

语法转换

通过 Polyfill 方式在目标环境中缺失的特性 (通过 @babel/polyfill 模块)

源码转换 (codemods)

// Babel 输入： ES2015 箭头
[1, 2, 3].map((n) => n + 1);

// Babel ： ES5 语法实现的同等
[1, 2, 3].map(function(n) {
  return n + 1;
});

有关编译器的精彩教程，请查看  项目，它还高屋建瓴地解释了 Babel 的工作方式。

Library 的基本设置

安装 Babel 命令行工具（babel-cli）以及一种 Babel preset

npm install --save-dev babel-cli babel-preset-env

创建

{ "presets": ["env"] }

运行 src 中的并到夹中

./node_modules/.bin/babel src --out-dir lib

有关如何使用构建系统，IDE等设置 Babel 的更多信息，请查阅我们。

ES2015 及更新版本

Babel 通过语法转换器来新版本的 JavaScript 语法。

这些让你现在就能使用新的语法，无需等待浏览器的。

JSX 与 React

Babel 能够转换 JSX 语法！查看 React preset 了解更多信息。通过和  一起使用还可以把语法高亮的提升到新的水平。

通过以下命令安装此 preset

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

并将 @babel/preset-react 到你的 Babel 中。

export default React.createClass({
  getInitialState() {
    return { num: this.getRandomNumber() };
  },

  getRandomNumber() {
    return Math.ceil(Math.random() * 6);
  },

  render() {
    return <div>
      Your dice roll:
      {this.state.num}
    </div>;
  }
});

了解更多关于  的信息。

类型注释 (Flow 和 TypeScript)

Babel 可以类型注释！查看 Flow preset 或 TypeScript preset 了解如何使用。务必牢记 Babel 不做类型检查，你仍然需要安装 Flow 或 TypeScript 来执行类型检查的工作。

通过以下命令安装 flow preset

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

// @flow
function square(n: number): number {
  return n * n;
}

或通过以下命令安装 typescript preset

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

function Greeter(greeting: string) {
    this.greeting = greeting;
}

了解更多关于  和  的信息

化

Babel 构建在之上。使用现有的或者自己编写的可以组成转换管道。通过使用或创建 preset 即可轻松使用一组。

利用  可以立即创建，或者使用  模板。

// 就是
export default function ({types: t}) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name.split('').reverse().join('');
      }
    }
  };
}

可调试

由于 Babel  Source map，因此你可以轻松调试编译后的。

符合规范

Babel 尽最大可能遵循 ECMAScript 标准。不过，Babel 还提供了特定的选项来对标准和做权衡。

紧凑

Babel 尽可能用最少的并且不依赖太大量的运行环境。

有些情况是很难达成的这一愿望的，因此 Babel 提供了 "loose" 参数，用以在特定的转换情况下在符合规范、大小和速度之间做折中。