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文件，爲此使用

1 npm init

View Code

命令在項目中引導建立一個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經常使用命令

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

babel es6.js

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

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

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

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

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

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

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

babel src --out-file es5.js

六、直接輸入babel-node命令，能夠在命令行中直接運行ES6代碼

babel-node