Babel 是一个 JavaScript 编译器。

今天就使用下一代 JavaScript 。

准备开始?

安装 Babel CLI 和 preset

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

创建一个 .babelrc 文件(或者使用你的 package.json

{
  "presets": ["env"]
}

有关在构建系统、IDE上设置 Babel 的更多信息,请查看我们的交互设置指南


ES2015 和更高版本

Babel 通过语法转换器支持最新版本的 JavaScript 。 不用等待浏览器的支持 , 现在这些 插件 允许你使用新语法。 查看 env preset(预设) 开始使用 Babel 。

你可以通过以下方式安装 preset

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

并添加 "env" 到你的 .babelrc 文件的 presets(预设) 数组中。


Polyfill

由于 Babel 只能转换语法(如箭头函数), 你可以使用 babel-polyfill 来支持新的全局变量,比如 Promise 或者像 String.padStart (left-pad) 这样新的原生方法。 它使用 core-jsregenerator。 查看我们的 babel-polyfill 文档以获取更多信息。

你可以通过以下方式安装 polyfill

npm install --save-dev babel-polyfill

使用时,在应用程序 入口点(entry point) 顶部引入或在你的打包器中配置即可。


JSX 和 Flow

Babel 可以转换 JSX 语法并删除类型注释。从查看 React 预设 开始。将它与 babel-sublime 包一起使用,将语法高亮提高到一个全新的水平。

你可以通过以下方式安装预设

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

并添加 "react" 到你的 .babelrc 的 presets 数组中。

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

学习更多关于 JSXFlow


插件式

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 ,因此可以轻松调试编译后代码。

Debuggable Sourcemaps

谁在使用 Babel?