ES6 簡介

---

本文更新資訊

1. 易杭 2017/4/22 23:07 4923字
2. 易杭 2017/4/23 10:16 5123字

本文作者資訊

1. 易杭

支援網站列表

1. 易杭網 [www.freeedit.cn]

本文知識參考

1. ES6標準入門第二版（阮一峰）

---

1. ECMAScript

1.1 ECMAScript發展史: 1997 1998.6 1999.12 2008.7 2009.12 2015.6

1. 1996年11月 javaScript創造者Netscape公司將javaScript提交給ECMA（歐洲計算機制造聯合會）
2. 1997年 ECMA釋出262號標準檔案的第一版（ECMA-262 1th），用於規定瀏覽器指令碼語言標準 ECMAScript 1.0
3. 1998年6月 ECMAScript 2.0 釋出
4. 1999年12月 ECMAScript 3.0 釋出
5. 2000年 ECMAScript 4.0 開始醞釀， ECMAScript 6.0 的製作開始了
6. 2007年10月 ECMAScript 4.0 草案發布
7. 2008年7月 ECMAScript 4.0 開發被終止，其中的小部分功能放入 ECMAScript 3.1 ，其他的過於激進的功能放入以後的版本，該專案代號為Harmony，不久，ECMAScript 3.1 更名為 ECMAScript 5.0 ，
8. 2009年12月 ECMAScript 5.0 釋出 ，Harmony專案分為可行的設想方案JavaScript.next（後來的ES6）和激進的設想方案JavaScript.next.next。JavaScript.next中的方案會成為下一個JavaScript版本，而JavaScript.next.next就是為更下一版的JavaScript準備的
9. 2011年6月 ECMAScript 5.1 釋出
10. 2013年3月 ECMAScript 6.0 草案凍結
11. 2013年12月 ECMAScript 6.0 草案發布
12. 2015年6月 ECMAScript 6.0 正式釋出 ，歷時15年

1.2 ECMAScript是JavaScript的標準，JavaScript是ECMAScript的實現

ECMAScript是一種標準，javaScript是Netscape公司開發的一門語言
ECMAScript是按照javaScript的設計方案來制定的標準
在ECMAScript出現後，JavaScript便根據ECMAScript標準來實現

---

2. 部署

2.1 javaScript伺服器端執行環境Node.js 和 版本管理工具nvm

nvm是一個版本管理工具，和yum、gem等工具類似，它可以自由切換版本
nvm不支援windows系統，在windows中可改用nvmw或nvm-windows

安裝nvm:
$ curl -o https://raw.githubusercontent.com/creationix/nvm/版本號/install.sh | bash

啟用nvm:
$ source ~/.nvm/nvm.sh

安裝node.js:
$ nvm install node

切換至該版本:
$ nvm use node

檢視node所有已實現的ES6特性:
$ node --v8-options | grep Harmony

```
  --experimental_extras (enable code compiled in via v8_experimental_extra_library_files)
      type: bool  default: false
  --use_strict (enforce strict mode)
      type: bool  default: false
  --es_staging (enable test-worthy harmony features (for internal use only))
      type: bool  default: false
  --harmony (enable all completed harmony features)
      type: bool  default: false
  --harmony_shipping (enable all shipped harmony features)
      type: bool  default: true
  --harmony_array_prototype_values (enable "harmony Array.prototype.values" (in progress))
      type: bool  default: false
  --harmony_function_sent (enable "harmony function.sent" (in progress))
      type: bool  default: false
  --harmony_sharedarraybuffer (enable "harmony sharedarraybuffer" (in progress))
      type: bool  default: false
  ......
```

2.2 使用es-checker模組檢查執行環境對ES6的支援情況

$ npm install -g es-checker
$ es-checker

---

3. Babel轉碼器

3.1 命令列環境

安裝 babel命令列環境 : $ npm install --global babel-cli
$ npm install --save babel-preset-es2015

在當前目錄下新建配置檔案 .babelrc

```json
  {
    "presets": ["es2015"]
  }
```

babel-cli自帶一個 babel-node 命令，提供一個支援ES6的REPL環境 $ babel-node

-o引數（或--out-file） 將轉換後的程式碼流儲存在一個新檔案中
$ babel 原檔名 -o 新檔名
$ babel 原檔名 -out-file 新檔名

-d引數 用於轉換整個目錄
$ babel -d 新檔案目錄 原檔案目錄

-s引數 用於生成source map檔案
$ babel -d 新檔案目錄 原檔案目錄 -s

常用的命令示例
$ babel src --watch --out-dir lib

3.2瀏覽器環境

從Babel 6.0 版本開始，不再直接提供瀏覽器版本，而需要工具構建
現在只能使用5.x版本的babel-core模組來獲取其瀏覽器版本

3.2.1 使用Babel的瀏覽器端JS檔案

下載 babel-core
$ npm install babel-core@5

執行後，可在 ./node_modules/babel-core/ 下找到 browser.js 檔案，這就是Babel的瀏覽器版本。然後，我們將其下程式碼插入到網頁中，即可在瀏覽器端將ES6實時轉換成ES5

```html
  <script src="./node_modules/babel-core/browser.js"></script>
  <script type="text/babel">
    <!-- ES6 程式碼書寫處 -->
  </script>
```

關鍵點在於： type="text/ babel "

3.2.2 babel配合Browserify使用，直接生成瀏覽器端能夠載入的指令碼

安裝 babelify 模組
$ npm install --save-dev babelify babel-preset-es2015

用 命令列轉換ES6 指令碼
$ browserify 原檔案 -o 新檔案 -t [ babelify --presets [es2015 react] ]

我們可以在 package.json 中新增以下程式碼，這樣就不用每次都輸入引數了

```json
  {
    "browserify": {
      "transform": [ [ "babelify", { "presets": ["es2015"] } ] ]
    }
  }
```

3.3 Node.js環境

安裝 babel-core 和 babel-preset-es2015
$ npm install --save-dev babel-core babel-preset-es2015

在根專案下新建 .babelrc 檔案

```json
  {
    "presets": ["es2015"]
  }
```

在指令碼中呼叫 babel-core 的 transform 方法

```js
  let babel-core = require('babel-core')
  let ES5語句組成的字串 =
    babel-core.transform(
      ES6語句組成的字串, {presets: ["es2015"]}
    ).code
```

把babel載入為require命令的一個 鉤子

安裝babel-core 和 babel-preset-es2015以後，建立.babelrc檔案，並寫入和上面一樣的json資訊 然後在應用的入口指令碼（如app.js）頭部新增 require("babel-core/register")
有了這條語句，後面所有通過require命令載入的字尾名為.es6、.es、.jsx、.js指令碼都會先經babel轉碼後再載入

需要注意的是：
Babel預設不會轉換 Iterator 、 Generator 、 Set 、 Map 、 Proxy 、 Reflect 、 Symbol 、 Promise 等全域性物件，以及定義在全域性物件上的方法，如 Object.assign

如果用到了這些全域性物件或某些方法，就需要安裝 babel-polyfill 模組
$ npm install babel-polyfill --save

然後在所有指令碼頭部新增以下語句：
require('babel-polyfill') 或者
import 'babel-polyfill'

3.4 線上轉換

Babel提供一個線上轉換的REPL線上編譯器，可將ES6轉換為ES5，地址如下：
https://babeljs.io/repl/

---