Skip to content

Instantly share code, notes, and snippets.

@zxhfighter
Created March 10, 2018 08:15
Show Gist options
  • Save zxhfighter/2fc16b12426c2af139b94e3e395e885a to your computer and use it in GitHub Desktop.
Save zxhfighter/2fc16b12426c2af139b94e3e395e885a to your computer and use it in GitHub Desktop.
es6 intro

ES6 简介

[TOC]

ECMAScript 和 JavaScript 的关系

ECMAScript 是语言规范(代号为 ecma-262),JavaScript 是该语言规范的实现,其余的实现还有 ActionScript 和 JScript 等。

ES6 和 ES2015 的关系

首先看下 ECMAScript 的演化过程。

ECMAScript 的历史渊源

ECMAScript 最成功的版本是 1999 年发布的 3.0(ES3),该版本奠定了 JavaScript 语法的基本语法。

之后酝酿发布 4.0,但是这个版本太激进,改革太彻底了,导致 TC39(Technical Committee 39,简称 TC39)的标准委员会一些成员不太接受,从而跳票。

由于分歧太大,中止 ES4 的开发,将其中一小部分功能添加到 ES3.1,项目代号为 Harmony(和谐),不久,ES3.1 就改名为 ES5.

ES5 正式发布后,一些可行设想定名为 JavaScript.next 继续开发,这就是现在的 ES6.

年份版本

TC 39 希望标准升级成为常规流程:任何人在任何时候,都可以向标准委员会提交新语法的提案。这样标准升级可以更加敏捷,每次新增的功能又不会过多,这样一来,就不需要以前的版本号了,只要用年份标记就可以了。

因此,ES2015 就是 ES6,ES2015 面向未来,ES6 面向过去。

提案标准流程

任何人都可以向标准委员会(又称 TC39 委员会)提案,要求修改语言标准。

一种新的语法从提案到变成正式标准,需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

  • stage 0: strawman(展示阶段)
  • stage 1: proposal(征求意见阶段)
  • stage 2: draft(草案)
  • stage 3: candidate(候选人)
  • stage 4: finised(定案)

一般来说,一个提案进入 stage 2,就很大希望进入正式标准。

提案可以去 ecma262 查看。

Babel 全家桶

Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。

Babel 需要配置文件 .babelrc(如果使用命令,也需要将配置选项当做参数传入),规定对哪些规则进行转码,一般包括 'presets' 和 'plugins'。

  • presets:规则集,可选 'latest', 'state-0', 'react' 等等。
  • plugins:插件列表,例如 'transform-es2015-arrow-functions', 'react-jsx' 等等。

有些可能还会配置有 'env' 变量,在不同的 'env' 下使用不同的 'presets' 和 'plugins'。

babel-cli

命令行转码。

$ npm install -g babel-cli
$ babel example.js -o out.js
$ babel src -d dist

babel-node

提供 ES6 的 REPL 环境,可以在控制台直接运行 ES6 代码。

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

babel-register

改写 require() 命令,每当使用 require() 加载 .js, .jsx, .es6 等后缀名的文件时,会先调用 Babel 进行转码。

$ npm install --save-dev babel-register

使用时,必须先加载 babel-register

require("babel-register");
require("./index.js");

由于是在线转码,因此只适合在开发环境使用

babel-core

在 Node 中环境中使用 babel 的 API 进行转码。

$ npm install --save-dev babel-core

然后,在项目中就可以调用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 }

此处 options 的配置参见 .babelrc 中的配置,可以参见 http://babeljs.io/docs/usage/api/。

babel-polyfill

babel 默认只转化新的 JavaScript 句法(例如箭头函数,解构等),而不转化新的 API,比如 Iterator,Map,Set,Reflect,Proxy,Promise,Symbol 等,以及一些对方的方法,例如 Object.assignArray.from 等。

安装命令如下:

$ npm install --save babel-polyfill

使用如下:

import 'babel-polyfill';

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

由于 babel 默认不转码的 API 非常多,因此该文件体积很大,推荐使用 core.js,按需引入。

import 'core.js/es6/set';
import 'core.js/es7/includes';

eslint + babel

许多工具需要 babel 进行前置转码,例如 eslint 和 mocha 等。

$ npm install --save-dev eslint babel-eslint

在 eslint 配置文件 .eslintrc 中,在其中加入 parser 字段。

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

其他转码器

TypeScript

由于 TypeScript 是 ES 的一个超集,因此 TypeScript 默认支持 ES6 语法的转码。

Traceur

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment