es6學習筆記（一）

一. es6簡介

ECMAScript6.0是JavaScript語言的下一代標準，已經在2015年6月正式發佈。又稱ECMAScript 2015。根據計劃，2017年6月將發佈 ES2017。

二. 支持度

各大瀏覽器的最新版本，對ES6的支持能夠查看kangax.github.io/es5-compat-table/es6/。

Node.js是JavaScript語言的服務器運行環境，對es6的支持度比瀏覽器更高。經過Node，能夠體驗更多ES6的特性。

Babel轉碼器能夠將ES6代碼轉化爲ES5代碼，從而兼容不支持ES6的環境。

// 轉碼前，使用了ES6新特性，箭頭函數
input.map(item => item + 1);

// 轉碼後，轉換爲能在現有環境執行的普通函數
input.map(function (item) {
  return item + 1;
});

 三. 安裝Babel

1. 項目根目錄node init

2. 新建.babelrc文件

   該文件用來設置轉碼規則和插件，基本格式以下。

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

　presets字段設定轉碼規則，官方提供如下的規則集，你須要安裝。

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

# ES7不一樣階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

　而後，將這些規則加入.babelrc。

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

3. Babel提供babel-cli工具，用於命令行轉碼。

$ npm install --global 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

4. babel-node命令，提供一個支持ES6的REPL環境。它支持Node的REPL環境的全部功能，並且能夠直接運行ES6代碼。

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