什么是 Babel？ | what is Babel？

什么是 Babel ？

Babel 是一款 JavaScript 编译器

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

Library 的基本设置

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

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

创建一个 .babelrc 文件

{ "presets": ["env"] }

运行 src 中的文件并输出到文件夹中

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

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

ES2015 及以后版本

Babel 通过语法转换器来支持最新版本的 JavaScript 。这些插件允许你立刻使用新语法，而无需等待浏览器支持。

preset 安装命令如下所示:

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

并在你的 .babelrc 文件中添加 "env" 选项： { "presets": ["env"] }

Polyfill

由于 Babel 只进行语法转换（如箭头函数），你可以使用 babel-polyfill 来支持新的全局变量，如 Promise 或新的原生方法，如 String.padStart（left-pad）。它使用了 core-js 和 regenerator 。查阅我们的 babel-polyfill 文档以获取更多信息。

你可以通过以下命令安装 polyfill

npm install --save-dev babel-polyfill

通过在应用程序的入口起点顶部或在 bundler 配置中添加它来使用它。

了解更多功能 →

JSX 和 Flow

Babel 可以转换 JSX 语法并去掉类型注释。查阅我们的 React preset 即可开始使用。与 babel-sublime 同时使用将语法高亮提高到一个全新的层次。

你可以通过以下这个命令安装该 preset

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

并在 .babelrc 文件中添加 "react" 选项：{ "presets": ["env", "react"] }

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

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

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

了解更多关于 JSX 和 Flow 的信息。

可定制

Babel 是用插件构建的。使用现有插件编写自己的转换管道或编写自己的插件。通过使用或创建 preset 轻松使用一组插件。学习更多 →

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

// 插件只是一个函数
export default function {types: t}) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // 反转 name 变量: JavaScript -> tpircSavaJ
        path.node.name = name.split('').reverse().join(''
      }
    }
  };
}

可调试

支持 Source map ，因此你可以轻松调试编译过的代码。

规范性

Babel 试图尽可能地遵循 ECMAScript 标准。为了平衡性能，它也可能有特定的一些选项，以便可以更符合规范。

压缩性

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

有些情况可能很难达到，因此为了保证可读性、文件大小以及（运行）速度，会针对特定转换牺牲一些合规性，即提供 “loose” 选项。