清澈的风

babel6 简明指南

随着ES6的发展，ES6的编译工具也在不断更新着，babel作为最常用的ES6编译工具，目前也发展到了6.x版本，以下作为简要使用指南

相对于之前的babel5,babel6不再是一个整的大的package,而是拆分了很多个小的packages可供选择安装

基础安装 Installing Babel

如果你想在CLI(command-line interface命令行界面)使用的话，请安装babel-cli

1
$ npm install --global babel-cli

如果你想结合node.js来写的话，需要安装babel-core

1
$ npm install --global babel-core

插件和预设 Plugins and Presets

babel6里并没有默认的转换规则，所以你安装了如上两项，用babel运行你的文件会发现并没有什么变化，因此我们需要安装所需插件，并在.babelrc文件做一些设置

例如使用箭头函数

1
$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions

同时在.babelrc文件添加：

1
2
3
{
  "plugins": ["transform-es2015-arrow-functions"]
}

当然还有很多细节我们不可能一点点全部去安装，我们如果想要转换某些特性的话，可以去安装某个版本的预置，babel可以去向下兼容

1
$ npm install --save-dev babel-preset-es2015

1
2
3
4
//.babelrc文件
{
  "presets": ["es2015"]
}

如果想包含所有javascript版本的话：

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

1
2
3
4
//.babelrc文件
{
  "presets": ["env"]
}

编译使用

  • 在安装了babel-cli之后，在命令行使用babel命令去编译文件：

    1
    babel es6.js

    输出编译后的文件:

    1
    babel es6.js -o compiled.js

    监听编译文件变动:

    1
    babel es6.js -o -w compiled.js

  • 安装完babel-cli和babel-core之后，使用babel-node命令去编译并运行文件

    1
    2
    //不适于生产环境
    $ babel-node es6.js

links:

babel6es6