es6 babel编译

本文主要参照阮一峰的es6入门，为提高自己写了一份随笔。

原文地址请戳这里  ECMAScript 6 入门

ECMAScript 6是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。

但是目前浏览器对es6不完全兼容，需要借住babel编译。

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

node 安装babel ；

$ npm install --save-dev babel-preset-es2015
配置 .babelrc文件在目录下。

该文件用来设置转码规则和插件，基本格式如下。

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

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

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

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

  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

命令行转码babel-cli

Babel提供babel-cli工具，用于命令行转码。

$ npm install --global babel-cli   //在全局安装
$ npm install --save-dev babel-cli //在项目中安装
然后初始化项目
$npm init 
配置一些基本的参数。

{
  // ...
  "devDependencies": {  //开发依赖
    "babel-cli": "^6.0.0"
  },
  "scripts": {　　
    "build": "babel src -d lib"  //src下面的js文件，转码到lib文件下。
  },
}

然后执行　　$ npm run build

或者执行常用的命令行。

# 转码结果输出到标准输出
$ 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
 
# -s 参数生成source map文件
$ babel src -d lib -s

babel-register

babel-register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码。

$ npm install --save-dev babel-register
使用时，必须首先加载babel-register。

require("babel-register");
require("./index.js");

然后，就不需要手动对index.js转码了。

需要注意的是babel-register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。