这篇文章的前提是读者知道什么是ES6以及为什么我们需要用到babel。本文的行文思路是怎么搭建一个es6+babel的开发环境。

基本使用

创建工程目录

创建一个文件夹，命名为use-babel
使用npm init初始化目录
创建babel的配置文件.babelrc，该文件用来设置转码规则和插件

安装babel

在工程目录下执行：

npm install --save-dev babel-cli -g
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-polyfill

然后.babelrc文件中输入：

{
  "presets": [
    "es2015",
    "stage-0",
    "stage-1"
  ],
  "plugins": []
}

使用babel

改写package.json如下：

"scripts": {
  "babel-node": "babel-node --presets es2015,stage-0,stage-1",
  "start": "npm run babel-node src/index.js"
},

工程目录下执行 npm start。

Babel的一些解释

babel-cli

babel-cli是babel提供的一个命令行转码工具。具体的使用可以参考官方文档

特别要提的是，babel-cli还提供了babel-node。它类似于node，可以在运行前预编译ES2015，你就可以直接使用babel-node运行你的ES2015程序了。

因为babel-node会去读取.babelrc文件中的配置，所以上面的package.json中的代码又可以改写为：

"scripts": {
  "start": "babel-node src/index.js"
},

babel 插件

babel插件提供了转码规则。我们可以根据自己的需要安装不同的转码规则。具体插件列表可以自行查看官方文档

ES2015的转码规则：babel-preset-es2015

ES7不同阶段语法提案的转码规则（共有4个阶段）：preset-stage-0，preset-stage-1，preset-stage-2，preset-stage-3

ReactJs的转码规则：babel-preset-react

babel-register

babel-register是在你的程序中直接使用的。可以认为它改写了require，在使用babel-register的程序中，会对require的js先进行转码处理。这样，你就不需要自己去转码了。

但是，babel-register只会对require命令加载的文件转码，而不会对当前文件转码。

由于它是实时转码，所以只适合在开发环境使用。

使用npm install babel-register --save-dev安装。

require("babel-register");
require('./config');    //这样，我们就可以在config.js中使用ES2015的语法了。

babel-core

如果你很喜欢在代码中使用babel，那么你就可以使用babel-core。（ps:目前我还没用过transform等方法）

具体的使用可以参考官方文档。

babel-polyfill

babel虽然能转码ES6，但是还有很多新的API语法是转不了的，比如Promise、Object.assign、Generator等。

如果想使用这些新的API，我们必须在代码中用到babel-polyfill。

使用npm install --save babel-polyfill安装，并且在代码中require('babel-polyfill');或import 'babel-polyfill';

如果我们要在多个地方使用到babel-polyfill的话，我们可以直接使用babel-runtime。

安装babel-plugin-transform-runtime和babel-runtime，并更新.babelrc。

$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime

向plugins中添加”transform-runtime”

{
  "plugins": [
   "transform-runtime"
  ]
}

在webpack中使用

一个比较经典的配置为：

module: {
  loaders:  [
    {
      test: /\.js/,
      loader: 'babel?presets[]=es2015,presets[]=react,plugins[]=transform-runtime'
    }
  ]
}

其他的一些babel的资料：
Babel用户手册： https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md
Babel官网：https://babeljs.io