ES6环境搭建(Node & babel)

一、ES6 参考

---

• http://es6.ruanyifeng.com/
• ECMAScript当前所有提案 Github.com/tc39/ecma262

二、支持能力

---

• http://kangax.github.io/compat-table/es6/
• https://github.com/paulmillr/es6-shim

三、运行环境

---

• https://github.com/creationix/nvm
• https://nodejs.org/en/
• https://www.npmjs.com/

四、特性检测

---

1. 查看Node所有已经实现的ES6特性

    ➜  ~ node --v8-options | grep harmony

2. 检查各种运行环境对ES6的支持情况
   es-checker

    ➜  ~ npm install -g es-checker

3. 查看本机支持ES6的程度

    ➜  ~ es-checker

五、Babel转码器

---

• babel 官网
• Babel 用户手册

1. 工程初始化

    ➜  ES6 git:(master) ✗ npm init   
（$ mkdir es2015_demo && cd es2015_demo && git init && npm init）

2. 本地安装

    ➜  ES6 git:(master) ✗ npm install --save-dev babel-cli (建议安装在当前工程目录,非全局)
    ➜  ES6 git:(master) ✗ npm install babel-preset-stage-0 --save-dev  (ES7)
/*
      ➜  ~ npm install -g babel-cli  
     npm uninstall --global babel-cli
     */

3. 转码前后(ES6->ES5)

    //转码前
    [1,2,3].map(n => console.log(n + 1));

    //转码后
    [1, 2, 3].map(function(n) {
        return console.log(n + 1);
    });

4. 配置文件.babelrc
   Babel的配置文件是.babelrc，存放在项目的根目录下(使用Babel的第一步，就是配置这个文件);
   • 创建 .babelrc

    ➜  ES6 git:(master) ✗ touch .babelrc

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

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

5. 为presets字段设定转码规则(语法集)，官方提供以下的规则集，可以根据需要安装
   • ES6转码规则

    $ 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

6. 安装转码规则集

➜  ES6 git:(master) ✗ npm install --save-dev babel-preset-es2015
➜  ES6 git:(master) ✗ npm install --save-dev babel-preset-react
➜  ES6 git:(master) ✗ npm install --save-dev babel-preset-stage-3

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

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

8. babel基本用法

    # 转码结果输出到标准输出
    $ 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

六、package.json配置

---

1. 工程初始化,生成 package.json

    ➜  ES6 git:(master) ✗ npm init   

2. 改写package.json

    "devDependencies": {
        "babel-cli":"^6.6.5",
        "babel-preset-es2015": "^6.9.0",
        "babel-preset-react": "^6.5.0",
        "babel-preset-stage-3": "^6.5.0"
    },
    "scripts": {
        "build": "babel src -d lib"  //将指定目录转码
    },

3. 转码执行以下命令

    ➜  ES6 git:(master) ✗ npm run build

七、babel 之 babel-node

---

babel-cli 工具自带一个 babel-node 命令，提供一个支持ES6的REPL环境;

1. 它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码.

    $ babel-node
    > (x => x * 2)(1)
    2

2. 直接运行脚本文件

    $ babel-node es6.js
    2

3. 执行脚本命令 运行脚本
   • 更新package.json:

    "scripts": {
        "build": "babel src -d lib",
        "script": "babel-node *.js"
    },

+ 执行命令

    ➜  ES6 git:(master) ✗ npm run script

八、浏览器环境

---

REPL ES6->ES5 在线编译器

九、与其他工具的配合

---

许多工具需要Babel进行前置转码，这里举两个例子：ESLint 和 Mocha;

1. ESLint用于静态检查代码的语法和风格，安装命令如下:

    ➜  ES6 git:(master) ✗ npm install --save-dev eslint babel-eslint

2. 在项目根目录下，新建一个配置文件.eslintrc :

    ➜  ES6 git:(master) ✗ touch .eslintrc

3. 在其中加入parser字段 :

{
    "parser": "babel-eslint",
    "rules": {

    }
}

4. 再在package.json之中，加入相应的 scripts 脚本

  "devDependencies": {
      ...
      "eslint": "^2.10.2",
      "babel-eslint": "^6.0.4"
  },
  "scripts": {
        ...
      "eslint": "eslint my-files.js"
  },

5. Mocha则是一个测试框架，如果需要执行使用ES6语法的测试脚本，可以修package.json的scripts.test

    "scripts": { "test": "mocha --ui qunit --compilers js:babel-core/register"}

上面命令中，--compilers参数指定脚本的转码器，规定后缀名为js的文件，都需要使用babel-core/register先转码;