ECMAScript 6 開篇准備

1前言

該系列文章均為學習阮一峰老師《ECMAScript 6 入門》一書的學習筆記。原著：http://es6.ruanyifeng.com/

各大瀏覽器的最新版本，對ES6的支持可以查看kangax.github.io/es5-compat-table/es6/。隨着時間的推移，支持度已經越來越高了，ES6的大部分特性都實現了。

Node.js是JavaScript語言的服務器運行環境，對ES6的支持度比瀏覽器更高。通過Node，可以體驗更多ES6的特性。建議使用版本管理工具nvm，來安裝Node，因為可以自由切換版本。不過， nvm不支持Windows系統，如果你使用Windows系統，下面的操作可以改用nvmw或nvm-windows代替。

2安裝Babel

由於目前很多瀏覽器對ECMAScript 6的支持度有限，但是又想使用ECMAScript 6提供的高級語法，因此babel誕生了，它能將ECMAScript 6的特殊語法轉換為ECMAScript 5中對應的解決方案，所以我們不用等到瀏覽器的支持就可以在項目中使用ES6的特性。。

babel6之后，將babel拆分成兩個包：babel-cli和babel-core。如果你想要在CLI(終端或REPL)使用babel就下載babel-cli，如果想要在node中使用就下載babel-core。

一般情況下，我們不會將babel安裝在全局，因為不同的項目可能使用不同的babel，並且安裝在全局，那么我們的項目就對環境產生了依賴，因此，通常我們將babel-cli安裝在項目中。

2.1. 創建一個學習項目

js_ES5用來存放轉換后的ECMAScript 5文件，js_ES6用來存放ECMAScript 6文件文件。

要想在這個項目中使用npm命令安裝babel等，必須首先建立package.json文件，為此使用

npm init

命令在項目中引導創建一個package.json文件。

2.2. 安裝babel-cli

npm install --save-dev babel-cli

2.3. 安裝 babel-preset-es2015

npm install --save-dev babel-preset-es2015

babel-preset-es2015是Babel官方提供的一個轉碼規則，還有其他的轉碼規則：

# 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

2.4.配置babel

Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。該文件用來設置轉碼規則和插件，基本格式如下。

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

presets字段設定轉碼規則。但是在windows系統中，不允許直接右鍵建立沒有文件名的文件，可以通過cmd命令行創建：在當前文件夾打開cmd並鍵入命令

這樣我們就創建了一份babel的配置文件，配置它：

2.5. 修改package.json

build 的值的規范為：

$babel es6.js #轉換代碼直接輸出
$babel es6.js -o es5.js #轉換代碼輸出到文件
$babel -d build-dir source-dir #轉換整個目錄
$babel -d build-dir source-dir -s #轉換整個目錄，並生成 source map 映射文件

2.6. 執行轉碼：

這時在js_ES5的目錄下，就有轉碼后的文件里了

3 安裝babel-register

babel-register模塊改寫require命令，為它加上一個鈎子。此后，每當使用require加載.js、.jsx、.es和.es6后綴名的文件，就會先用Babel進行轉碼。

npm install --save-dev babel-register

使用時，必須首先加載babel-register。

require("babel-register");
require("es6");

然后，就不需要手動對es6.js轉碼了。

需要注意的是，babel-register只會對require命令加載的文件轉碼，而不會對當前文件轉碼。另外，由於它是實時轉碼，所以只適合在開發環境使用。

4安裝babel-polyfill

Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。

舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，為當前環境提供一個墊片。

安裝命令如下。

npm install --save babel-polyfill

然后，在腳本頭部，加入如下一行代碼。

require("babel-polyfill");

Babel默認不轉碼的API非常多，詳細清單可以查看babel-plugin-transform-runtime模塊的definitions.js文件。

require ("babel-polyfill");
[1,2,3].map(n => n + 1);
function addAll() {
    return Array.from(arguments).reduce((a, b) => a + b);
}

執行npm run build轉碼后：

"use strict";

var _from = require("babel-runtime/core-js/array/from");

var _from2 = _interopRequireDefault(_from);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

require("babel-polyfill");
[1, 2, 3].map(function (n) {
    return n + 1;
});
function addAll() {
    return (0, _from2.default)(arguments).reduce(function (a, b) {
        return a + b;
    });
}

 

5Babel常用命令

1、轉換es6.js文件並在當前命名行程序窗口中輸出

babel es6.js

2、將es6.js轉換后輸出到es5.js文件中（使用 -o 或 --out-file ）

babel es6.js -o es5.js 
babel es6.js --out-file es5.js

3、實時監控es6.js一有變化就重新編譯（使用 -w 或 --watch ）

babel es6.js -w --out-file es5.js
babel es6.js --watch --out-file es5.js

4、編譯整個src文件夾並輸出到lib文件夾中（使用 -d 或 --out-dir ）

babel src -d lib
babel src --out-dir lib

5、編譯整個src文件夾並輸出到一個文件中

babel src --out-file es5.js

6、直接輸入babel-node命令，可以在命令行中直接運行ES6代碼

babel-node