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 。 这些 plugins 允许你立刻使用语法,无需等待浏览器支持。 查看 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

使用它时需要让它在你的应用程序的入口起点或打包配置的入口起点的顶部。


JSX 和 Flow

Babel能够转换 JSX 语法并去除类型注释。查看 React preset 开始使用。与 babel-sublime 同时使用可以将语法高亮提高到一个新的水平。

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

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 是由很多 plugin 构成。 你可以使用已有的 plugin 或者自己编写 plugin 来组成属于你自己的转换通道。使用或者创建一个 preset 可以让你轻松使用多个 plugin。了解更多 →

通过 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('');
      }
    }
  };
}

可调试

支持 Source map 因此可以轻松调试编译后代码。

Debuggable Sourcemaps

谁在使用 Babel ?