babel

ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。


Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。


Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下。 
{
  "presets": [],
  "plugins": []
}


presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。


# ES2015转码规则
$ npm install --save-dev babel-preset-es2015


# react转码规则
$ npm install --save-dev babel-preset-react


然后，将这些规则加入.babelrc。


  {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": []
  }


 Babel提供babel-cli工具，用于命令行转码。它的安装命令如下。


$ npm install --global babel-cli  ( 这里一定要全局安装)


基本用法如下。


# 转码结果输出到标准输出
$ babel example.js


# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js


# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib


package.json文件
{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}


转码的时候，就执行下面的命令。


npm run build