ES6学习1章：关于ES6

一、关于Ecmascript

关于ecmascript,2013年3月，ES6的草案封闭，不再接受新功能了。而新的功能将被加入到ES7当中。
任何人都可以向TC39提案，从提案到正式标准需要经过五个阶段
- Stage 0 （展示阶段）
- Stage 1 （征求意见阶段）
- Stage 2 （草案阶段——进入这个阶段后，就差不多等于肯定会包换在ES7中）
- Stage 3 （侯选人阶段）
- Stage 4 （定案阶段）

二、关于ES6的工具

• babel @5版支持浏览器中使用，有在线转换，命令行转换，与其他工具Mocha,ESLint结合使用
• traceur 谷歌公司开发的转码器，支持直接插入网页，在线转换，命令行转换，Node环境中使用

1、 es-checker 查看正在使用的Node环境对ES6的支持情况

 $   npm install -g es-checker
 $   es-checker

2、 Babel转码器

概要
- .babelrc 配置文件
- babel-cli 命令工具
- babel-core 核心方法
- babel-node 直接执行js转码的REPL环境
- babel-polyfill 转码新的JS API 模块
- babel-register 转码通过require加载的文件
- browser.js 在浏览器中实时转码（影响性能）

1）babel配置文件 ————只有在写好配置文件的前提下，才能进行下一步转码

babel关键配置文件 .babelrc (先安装对应规则 babel-preset-*,再配置使用规则)

{
    //设置转码规则
    "presets":[
        "env", // 4选一
        "es2015",
        "react",
        "stage-2"
    ], 
    "plugins":[]
}
# 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

2） 命令行转码 babel-cli

A、全局命令转码

# 全局安装babel
npm install -g babel-cli
# 编辑js文件
babel example.js
# 常用命令

# 指定输出文件
babel example.js -o compiled.js
# 整个目录转码
babel src -d lib
# 生成source map 文件
babel src -d lib -s

• 以上代码是在全局环境下，进行babel转码，因此全局环境中必须安装了babel，因而项目产生了环境信赖，且这样做无法支持不同项目使用不同版本的babel。
• 解决办法：将babel-cli安装在项目中

B、项目中转码

# 安装bable-cli到项目中
npm i babel-cli --save-dev
# 添加命令到package.json
{
    "script":{
        "build":"babel src -d lib"
    }
}
# 运行命令
npm run build

3)、babel-node命令

• babel-node命令是随着babel-cli一起安装的，通过在cmd中输入babel-node进入到babel的转码环境REPL，从而可以直接在命令行中执行ES6代码

$ babel-node   // 进入babel转码环境REPL
> (x=>x*2)(1)  // 一个立即执行函数
2              // 执行结果 2

• 此外babel-node后还可以跟js文件，代表直接执行该文件

babel-node es6.js

4)、babel-register命令

babel-register模块必定了require命令，为它加上了钩子函数，每当使用require加载.js,.jsx,.es,.es6的文件时，都会先使用Babel进行转码

# 安装
npm i --save-dev babel-register
# 使用时，放在最前，其后通过require加载的文件都会自动转码
require('babel-register')
require('./index.js')

5)、babel-core

某些代码需要调用Babel的Api进行转码时，就需要这个模块
应用场景：在代码内手动调用babel的api操作时

#安装
npm i babel-core
# 使用
var es6code = 'let x=n=>n+1';
var es5code = require('babel-core').transform('es6code',{
    presets:['es2015']
}).code;
# 结果
通过babel-core将es6code转码为es5

6）、babel-polyfill

默认情况babel只转换新的JS语法，而不会转换新的API，而像新的ES6API（如：Iterator，Generator，Set，Maps，Proxy等）就需要使用babel-polyfill来配置

# 安装
npm i --save babel-polyfill
# 使用（在js文件头部加入代码）
import 'babel-polyfill';
// 或者
require('babel-polyfill')

7)、在浏览器环境下使用ES6

babel从6.0版本开始不再直接提供浏览器版本，而是需要用构建工具构建出来。如果不想用构建工具，可以通过安装5.x版本的babel-core模块获取

# 安装
npm i babel-core@5
# 找到安装的browser.js
在node_modules/babel-core/下找到babel的浏览器版本browser.js 或 browser.min.js

# 使用
<script src='browser.js'></script>
<script type='text/babel'> // 设置类型为 text/babel
// 你的ES6代码
</script>

• 网页中实时将Es6转码为ES5会对性能有影响，因为最后是在生产环境下先转码脚本

3、Traceur转码器

• 由Google公司开发的转码器

1)、命令行转换

# 安装
npm i -g traceur
# 使用1 —— 直接运行脚本
traceur calc.js
# 使用2  —— es6转Es5保存
traceur --script calc.es6.js --out calc.es5.js  --experimental
// --script 指定输入文件，--out 指定输出文件，--experimental防止编译不成功