一、ECMAScript6 简介

1. ECMAScript 和 JavaScript 的关系

ECMAScript 是 JavaScript 的规格
JavaScript 是 ECMAScript 的一种实现

2. ES6 与 ECMAScript 2015 的关系

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版本以后的JavaScript 的下一代标准，涵盖了 ES2915、ES2016、ES2017等。

而 ES2015 则是正式名称，特指当年发布的正式版本的语言标准。

3. 语法提案的批准流程

展示阶段 — 征求意见阶段 — 草案阶段 — 候选阶段 — 定案阶段

Node 是 JavaScript 语言的服务器运行环境，它对 ES6 的支持度更高。

二、Babel 转码器

Babel 是一个可以将 ES6 代码转为 ES5 代码，从而在浏览器或其他环境执行。

// 转码前
input.map(item => item + 1)

// 转码后
input.map(function (item) {
  return item + 1
})

1. 配置文件 .babelrc

使用 Babel 的第一步就是配置 .babelrc 文件，他存放在项目根目录下。

要想使用 Babel 工具和模块，必须先写好 .babelrc 文件。

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

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

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

# 最新转码规则
npm install --save-dev babel-preset-latest

# react 转码规则
npm install --save-dev babel-preset-react

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

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

2. 命令行转码 babel-cli

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

将 babel-cli 安装在项目之中代码如下：

# 安装
npm install --save-dev babel-cli

然后，写 package.json 文件

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib
  }
}

转码时，执行 npm run build 即可

3. babel-node

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

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

REPL 代表 Read Eval Print Loop，是一个虚拟环境，可以在其中轻松地运行编程语言。

Node.js 带有一个内置的 REPL 来运行 JavaScript 代码，类似于我们在浏览器中用来运行 JavaScript 代码的控制台。

要启动 Node.js REPL，只需在命令行上运行 node，然后写一行 JavaScript 代码，就可以在下一行看到它的输出。

执行 babel-node 可以进入 REPL 环境。

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

babel-node 也可以安装在项目中。

npm install --save-dev babel-cli

然后，改写 package.json

{
  "scripts": {
    "script-name": "babel-node script.js"
  }
}

在以上代码中，babel-node 替代 node，这样 script.js 本身就不用进行任何转码处理了。

4. 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 命令加载的文件进行转码，而不会对当前文件进行转码。另外，由于它是实时转码，所以只适合在开发环境中使用。

5. babel-core

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

npm install babel-core --save

然后，在项目中可以调用 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.transformFormAst(ast, code, options)
// => { code, map, ast }

关于配置对象 options 的内容，可以查看官方文档

6. babel-polyfill

Babel 默认只转换新的 JavaScript 句法，而不转换新的 API，如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（如Object.assgin）都不会转码。

举例来说，ES6 在 Array 对象上新增了 Array.from 方法，Babel 就不会转码这个方法。

如果想让这个方法运行，必须使用 babel-polyfill 为当前环境提供一个垫片。

npm install --save-dev babel-polyfill

import 'babel-polyfill'
// 或者
require('babel-polyfill')

7. 浏览器环境

浏览器的编译是加载后编译执行，命令行是先编译后执行。

Babel 也可以用于浏览器环境，但是从 Babel6.0 开始将不再直接提供浏览器版本，而是要用构建工具构建起来。

以下命令将代码打包成浏览器可以使用的脚本以 Babel 配合 Browserify 为例。首先安装 babelify 模块。

babellify 是 babel 为 browserify 提供的构建工具；babellify 类似 babel-loader，是用于 webpack 和 browserify 等构建工具中的

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

// 然后再用命令行转换 ES6 脚本

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

以上代码将 ES6 脚本 script.js 转为 bundle.js，浏览器直接加载后者即可。

在package.json 中添加下面的代码，则不必每次都输入参数：

{
  "browserify": {
    "transform": [["babelify", { "presets": ["latest"] }]]
  }
}

如果没有或不想用构建工具，可以使用 babel-standalone 模块提供的浏览器版本，将其插入网页。

<script src="https://cdnjs.cloud flare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
  // Your ES6 code
</script>

网页实时将 ES6 代码转为 ES5 代码，对性能会有影响。生产环境下需要加载已转码的脚本。

8. 在线转换

Babel 提供了一个 REPL 在线编辑器，可以在线将 ES6 代码转为 ES5 代码，转换后的代码可以直接作为 ES5 代码插入网页并运行。

9. 与其他工具的配合

许多工具需要 Babel 进行前置转码，例如：ESLint 和 Mocha

ESLint 用于静态检查代码的语法和风格。

npm install --save-dev eslint babel-eslint

然后，在项目根目录下新建一个配置文件 .eslintrc，在其中加入 parser 字段。

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

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

{
  "name": "my-module",
  "scripts": {
    "lint": "eslint my-files.js
  },
  "devDependencies": {
    "babel-eslint": "…",
    "eslint": "…"
  }
}

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

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

在上面的命令中，--compilers 参数指定脚本的转码器，规定后缀为 .js 的文件都要使用 babel-core/register 进行转码。

三、Traceur 转码器

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

1. 直接插入网页

首先，必须在网页头部加载 Traceur 库文件

<script src="https://google.github.io/traceur-compiler/bin/traceur.js></script>

<script src="https://google.github.io/traceur-compiler/bin/Browsersystem.js></script>

<script src="https://google.github.io/traceur-compiler/src/bootstrap.js></script>

<script type="module">
  import './Greeter.js
  // 或者不引用 ES6 脚本，直接写 ES6 代码
</script>

以上代码一共有 4 个 script 标签。第一个用于加载 Traceur 的库文件，第二个和第三个将这个库文件用于浏览器环境，第四个则用于加载用户脚本，这个脚本中可以使用 ES6 代码。

注意：第四个 script 标签的 type 属性值为 module，而不是 text/javascript。这是 Traceur 编译器识别 ES6 代码的标志，编译器会自动将所有 type=module 的代码编译为 ES5 然后再交给浏览器执行。

2. 命令行转换

作为命令行工具使用时，Traceur 是一个 Node 模块，需要先 NPM 安装。

npm install -g traceur

安装成功即可在命令行下使用。

Traceur 直接运行 ES6 脚本文件，会在标准输出中显示运行结果。

traceur calc.js

如果要将 ES6 脚本转为 ES5 代码保存，可采用下面的写法。

traceur --script calc.es6.js --out calc.es5.js --experimental

其中 --script 选项表示指定输入文件，--out 选项表示指定输出文件。

为了防止有些特性编译不成功，最好加上 --experimental 选项。

转换得到的文件就可以放到浏览器中运行了。

3. Node 环境的用法

Traceur 的 Node 用法如下：

var traceur = require('traceur')
var fs = require('fs')

// 将 ES6 脚本转为字符串
var content = fs.readFileSync('es6-file.js').toString()

var result = traceur.compile(content, {
  filename: 'es6-file.js',
  sourceMap: true,
  // 其他设置
  modules: 'common.js'
})

if(result.error) throw result.error

// result 对象的 js 属性就是转换后的 ES5 代码
fs.writeFileSync('out.js', result.js)

// sourceMap 属性对应 map 文件
fs.writeFileSync('out.js.map', result.sourceMap)

ES6简介、Babel转码器、Traceur转码器