什么是 Babel ？

本文将简单介绍 Babel 的安装与使用。

Babel 是一个 JavaScript 编译器

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本，以适应当前和更旧的浏览器或环境。

Babel 能做什么

转换语法
在目标环境中填充缺少的特性
源代码转换
更多…

语法转换示例：

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

Babel 支持的版本

ES2015 以及更新的版本。

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

Babel 插件允许你使用浏览器目前不支持的新语法。

JSX 和 React

Babel 能够转换 JSX 语法。

通过使用 react preset ：

安装 Preset：

1	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 preset：

1	npm install --save-dev @Babel/preset-flow

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

安装 typescript preset：

1	npm install --save-dev @Babel/preset-typescript

1
2
3

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

Babel 是可插拔的

Babel 由插件构成，可以使用现有的插件构建您自己的转换管道或编写自己的转换管道。通过创建一个 preset 可以轻松使用一些插件的集合。

可以使用 astexplorer.net 动态创建插件或使用 generator-Babel-plugin 生成插件模板。

// 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.split('').reverse().join('');
      }
    }
  };
}

Babel 是可调式的

Babel 支持源代码映射，这样您就可以轻松调试编译后的代码。

Babel 是兼容规范的

Babel 试图尽可能地遵守 ECMAScript 标准。作为对性能的权衡，它还可能有一些特定的选项来更加符合规范。

Babel 是紧凑的

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

在某些情况下，这可能很难做到，而且对于特定的转换有一些“松散”的选项，这些选项可能会在可读性、文件大小和速度方面牺牲规范遵从性。