跳转到内容

第一章 ECMAScript6简介

由来

第一章第一节讲述了 ES6 这个名称的由来,首先需要理清 ECMAScriptJavaScript 的关系。在最开始 JavaScript 不叫 JavaScript,而是叫 ECMAScript。因此,ECMAScript 是 JavaScript 的规格,JavaScript 是 ECMAScript 的一种实现

含义

2011年,ECMAScript 5.1 版本发布后,6.0 版本开始制定,这个版本改动较大,制定者希望能够6.1、6.2、6.3持续推进,最终决定每年6月更新发布一次标准版本。2015年6月,发布了 ECMAScript 6.0 版本。

🖇 拓展

因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版本以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等,而 ES2015 则是正式名称,特指当年发布的正式版本的语言标准。

提案批准流程

  • Stage 0: Strawman (展示阶段)
  • Stage I : Proposal (征求意见阶段)
  • Stage 2: Draft (草案阶段)
  • Stage 3: Candidate (候选阶段)
  • Stage 4: Finished (定案阶段)

历史

ES6 从开始制定到最后发布用了整整15年。1997年发布的ES1.0是第一个版本,随后连续发布了ES2.0和ES3.0。ES3.0成为通行标准,奠定了 JavaScript 语言的基本语法。

在2000年,ES4.0开始酝酿,但最后没有通过。ES6 制定的起点其实可以追溯到2000年。ES4.0没有通过是因为该版本对ES3.0做了彻底升级,导致标准委员会的一些成员不愿意接受。

2008年,ECMA决定中止ES4.0的开发,并将其中涉及现有功能改善的部分发布为ES3.1,其他激进设想放入以后的版本。

2009年,ES5 发布,而ES Harmony继续发展成为 ES6。2015年,ES6正式通过成为国际标准。整个过程历时15年。

Babel

babel.jsES6 转码器,在浏览器不支持 ES6 语法时转码为 ES5,这样就能执行了,下面是一个简单的例子:

js
let arr = []
arr.map(item => item.id + 1)
js
var arr = []
arr.map(function (item) {
  return item.id + 1
})

其中阮一峰老师从以下几个方面介绍讲解起了 babel

  • 配置文件 .babelrc

    这是放置在项目根目录中,用于设置转码规则和插件,其基本包含 presetsplugins 两个参数。其中 presets 用于设定转码规则,通过 NPM 下载依赖,下载后在 presets 数组中添加对应的规则。例子如下:

    js
    {
      "presets": [],
      "plugins": []
    }
    js
    {
      "presets": [
        "latest",
        "react",
        "stage-2",
      ],
      "plugins": []
    }

    ⚠ 注意

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

  • 命令行转码 babel-cli

    Babel 提供 babel-cli 工具,用于命令行转码。使用方式如下:
    1. 下载依赖

    2. 改写 package.json 文件

    3. 打包转码

    shell
    npm i --save-dev babel-cli
    json
    {
      // ...
      "devDependencies": {
        "babel-cli": "^6.0.0"
      },
      "scripts": {
        "build": "babel src -d lib"
      }
    }
    shell
    npm run build
  • babel-node

    这是 babel-cli 自带的命令,用于提供支持 ES6 的 REPL 环境,直接运行 ES6 代码。

  • babel-register

    修改 require 命令,后续使用 require 加载 .jsjsx.es.es6 文件时,会优先使用 Babel 转码。

    ⚠ 注意

    babel-register 只会对 require 命令加载的文件进行转码,而不会对当前文件进行转码。另外,由于它是实时转码,所以只适合在开发环境中使用。

  • babel-core

    对需要的某模块代码转码。

    shell
    npm install babel-core --save
    js
    var es6Code = 'let x = n => n + 1' 
    var es5Code = require('babel-core').transform(es6Code, { presets: ['latest']}).code;
  • babel-polyfill

    Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,如 IteratorGeneratorSetMapsProxyReflectSymbolPromise 等全局对象,以及一些定义在全局对象上的方法(如 Object.assign)都不会转码。

    想让上述的方法运行,必须使用 babel-polyfill 为当前环境提供一个垫片。

Traceur

Traceur 是 Google 公司的转码器,也可以将 ES6 代码转为 ES5 代码。具体使用此处不做过多描述。

总结

本章讲解了 JavaScript 的历史和发展史,以及 ES6 广义和狭义的含义。在浏览器不支持 ES6 新语法时如何使用 Babel 转成 ES5 等。

贡献者

The avatar of contributor named as duyidao duyidao
The avatar of contributor named as v_duyilin v_duyilin
The avatar of contributor named as 刀刀 刀刀

页面历史

刀刀博客累计访客 人;文档累计访问量共