什么是es6_es6是什么

1、历史

ES6，全称ECMAscript 6.0，由欧洲计算机制造商协会制定，在2015年6月发布6.0版本，这个版本就是ES6版本。

此前已经发布了多个版本，在ES6发布之前，都统称为ES2015，在ES6发布之后，包括ES7、ES8…之后的版本都统称为ES6

2、ES6运行环境

所有主流浏览器已经几乎都支持es6的新功能，只有少部分不支持

Node是JavaScript的运行环境，他对es6的支持度更高，除 了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。

使用阮一峰老师编写的工具es-checker可以很方便的查看node对es6的支持

$ npm install -g es-checker
$ es-checker
=========================================
Passes 24 feature Dectations
Your runtime supports 57% of ECMAScript 6
=========================================
1
2
3
4
5
6

2.1 Babel转码器

Babel是一个es6的转码器，可以将es6代码转换为es5代码

babel的配置文件

Babel 的配置文件是 .babelrc ，用于设置转码的规则和插件，存放在项目的根目录下。使用 Babel 的第一步， 就是配置这个文件。

{
	"presets": [],  设置转码规则
	"plugins": [] 	插件
}
1
2
3
4

官方提供的规则集

# 最新转码规则
$ npm install --save-dev babel-preset-latest
# react 转码规则
$ npm install --save-dev babel-preset-react
# 不同阶段语法提案的转码规则（共有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
1
2
3
4
5
6
7
8
9

安装后写入配置文件

{
    "presets": [
    "latest",
    "react",
    "stage-2"
    ],
    "plugins": []
}
1
2
3
4
5
6
7
8

以下所有 Babel工具和模块的使用，都必须先写好 .babelrc 。

命令行转码babel-cli

安装命令，安装在全局

$ npm install -g babel-cli
1

基本用法

# 转码结果输出到标准输出
$ 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

要在不同的项目使用要安装在项目中，然后配置package.json文件

{
  "scripts": {
    "babel": "babel src -d lib"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1"
  }
}
1
2
3
4
5
6
7
8
9
10
11

使用npm run babel去运行babel命令

REPL环境babel-node

babel-cli 工具自带一个 babel-node 命令，提供一个支持ES6的REPL（即写即用，类似控制台）环境。 它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。

$ babel-node es6.js
2
1
2

也可以在项目中使用，如果是安装在项目中，需要使用npm run xxx去运行项目中的插件

实时转码babel-register

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

$ npm install --save-dev babel-register
1

使用时，必须首先加载 babel-register 。

require("babel-register")
require("./1.es6运行环境")
1
2

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

babel的api babel-core

如果某些代码需要调用 Babel 的 API 进行转码，就要使用 babel-core 模块。 安装命令如下。

$ npm install babel-core --save
1

然后，在项目中就可以调用 babel-core 。

var babel = require('babel-core');
// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }
// 文件转码（异步）
babel.transformFile('filename.js', options, function(err, result
) {
result; // => { code, map, ast }
});
// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }
// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

http://babeljs.io/docs/usage/options/

基本使用：

var es6 = 'let x = n => n + 1';

console.log(es6);
var es5 = require('babel-core')
  .transform(es6, {
    presets: ['latest']
  })
  .code;
console.log(es5);
1
2
3
4
5
6
7
8
9

垫片babel-polyfill

babel只转换新句法，不转换api，如es6新增from方法

需要转换新的api就需要使用到polyfill垫片

$ npm install --save babel-polyfill
1

然后在脚本文件中引入

import 'babel-polyfill';
// 或者
require('babel-polyfill');
1
2
3

浏览器环境

从 Babel 6.0 开始，不再直接提供浏览器版 本，而是要用构建工具构建出来。

没有工具的话，可以使 用babel-standalone模块提供的浏览器版本，将其插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standa
lone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
1
2
3
4
5

由于在浏览器中还要转码会影响性能，因此一般将转码好的js文件，即打包好的js文件用浏览器运行

babel配合browserify可以将代码打包成浏览器可以使用的js

首先安装babelify模块

$ npm install --save-dev babelify babel-preset-latest
1

然后使用命令转换

$ browserify script.js -o bundle.js \
-t [ babelify --presets [ latest ] ]
1
2

在 package.json 设置下面的代码，就不用每次命令行都输入参数了。

{
"browserify": {
    "transform": [["babelify", { "presets": ["latest"] }]]
    }
}
1
2
3
4
5

先标注一下，我在这里测试报错？

Traceur 转码器

Google 公司的Traceur转码器，也可以将 ES6 代码转为 ES5 代码。