01. ECMAScript 6简介

ECMAScript 6 简介

原书作者：阮一峰
原书地址：ECMAScript 6入门

• ECMAScript 与 JavaScript关系
• ES6 与ES2015、ES2016关系
• 提案审批流程
• Babel转换器（.babelrc、babel-cli、babel-node）

1. ECMAScript 与 JavaScript 关系

前者是后者的规范
后者是前者的实现

2. ES6 与 ES2015、ES2016 关系

2011年 ECMAScript5.1发布后便开始制定ES6
ES6 制定过程由于添加过多新功能，长时间未统一为规范
后来改为每年发布一个版本，即ES2015、ES2016
ES6 ==> ES2015 (可以视为)

3. 提案的审批流程

• Stage 0 Strawman（展示阶段）
• Stage 1 Proposal（征求意见阶段）
• Stage 2 Draft（草案阶段）
• Stage 3 Candidate（候选人阶段）
• Stage 4 Finished（定案阶段）

4. Babel 转换器

• .babelrc（配置文件放在项目根目录下）
  • 基本格式

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

• babel-cli（命令行代码转换）
  • 安装命令

  $ npm install --global babel-cli
  

  • 基本用法

  # 转码结果写入一个文件
  $ babel example.js -o compiled.js
  # 整个目录转码
  $ babel src -d lib
  

• babel-node（Node REPL环境，可运行ES6）
  • 示例

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

• babel-register（改写require命令，为它加上一个钩子）
  • 使用babel转换require加载的 .js .jsx .es .es6

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

  • 注：
    • 不会当前文件
    • 实时转换（仅用于开发环境）
• babel-core（调用某些babel API进行转码）
  • 示例

  var babel = require('babel-core');
  // 字符串转码
  babel.transform('code();', options);
  

• babel-polyfill（转换新的API、全局对象）
  • Babel默认只转换语法
  • 不转换新的API（Array.from）
  • 不转换新的全局对象（Maps、Set）
• babel-standalone（浏览器环境直接使用ES6）
  • 实时转换，会影响性能
  • 实际生产，使用已经转换的代码

  $ npm install --save-dev babelify babel-preset-latest
  // 使用命令转换
  $  browserify script.js -o bundle.js \
  -t [ babelify --presets [ latest ] ]
  // 也可以将配置加入package.json
  {
    "browserify": {
      "transform": [["babelify", { "presets": ["latest"] }]]
    }
  }
  

5. Traceur转码器

Google 提供的转码器，支持在线转码、命令行转码等