最近在学习es6的时候发现网上很多的babel教程都非常混乱,babel5和babel6的教程掺杂让人不知道该怎么办,于是翻译+整理了babel6的官方文档,作为快速入门~

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

基础安装 Installing Babel

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

$ npm install --global babel-cli

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

$ npm install --global babel-core

插件和预设 Plugins and Presets

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

例如使用箭头函数

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

同时在.babelrc文件添加:

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

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

$ npm install --save-dev babel-preset-es2015
//.babelrc文件
{
  "presets": ["es2015"]
}

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

$ npm install --save-dev babel-preset-env
//.babelrc文件
{
  "presets": ["env"]
}

编译使用

  • 在安装了babel-cli之后,在命令行使用babel命令去编译文件:
      babel es6.js

    输出编译后的文件:

      babel es6.js -o compiled.js

    监听编译文件变动:

      babel es6.js -o -w compiled.js
  • 安装完babel-clibabel-core之后,使用babel-node命令去编译并运行文件
      //不适于生产环境
      $ babel-node es6.js

更多配置细节移步: