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、全局命令转码

# 全局安装babelnpm 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防止编译不成功