ECMAScript 6簡介

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

//檢視已經實現的es6特性
$ node --v8-options | grep harmony
//檢視你正在使用的node對es6的支援程度
$ npm install -g es-checker
$ es-checker

Babel 轉碼器

配置.babelrc

//1. 設定轉碼規則和外掛
{
  "presets": [],
  "plugins": []
}
 

//2. 安裝presets欄位設定轉碼規則

# 最新轉碼規則
$ npm install --save-dev babel-preset-latest

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

# 不同階段語法提案的轉碼規則（共有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
 

 //3. 將這些規則加入
{
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

babel-cli

基本用法

# 轉碼結果輸出到標準輸出
$ babel example.js

# 轉碼結果寫入一個檔案
# --out-file 或 -o 引數指定輸出檔案
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 引數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 引數生成source map檔案
$ babel src -d lib -s
 

全域性安裝

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

babel-node

基本用法

//進入REPL環境
$ babel-node

//執行ES6 語法的程式碼或指令碼
> (x => x * 2)(1)
2

//直接執行ES6指令碼
$ babel-node es6.js
2

//退出 REPL 環境
$ .exit

//相關指令
$ .help		//幫助指令
$ .editor 	//編輯模式指令,在此模式下可以編寫多行命令
$ .save 	//把在 REPL 環境中執行的指令，一次性輸出儲存到指定檔案中
$ .load		//會載入指定的 js 檔案並執行

安裝到專案中

$ npm install --save-dev babel-cli

//改寫package.json
{
  "scripts": {
    "script-name": "babel-node script.js"
  }
}
//使用babel-node替代node，這樣script.js本身就不用做任何轉碼處理

babel-register

安裝

$ npm install --save-dev babel-register

載入與使用

require("babel-register");
require("./index.js");

//然後，就不需要手動對index.js轉碼了

babel-core

安裝

$ npm install babel-core --save

呼叫

var babel = require('babel-core');

// 字串轉碼：transform()
babel.transform('code();', options);

// 檔案轉碼（非同步）：transformFile()
babel.transformFile('filename.js', options, function(err, result) {
  result;
});

// 檔案轉碼（同步）：transformFileSync()
babel.transformFileSync('filename.js', options);

// Babel AST轉碼：transformFromAst()
babel.transformFromAst(ast, code, options);

配置物件options，可以參看官方文件http://babeljs.io/docs/usage/options/。

一個例子

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
  .transform(es6Code, {
    presets: ['latest']
  })
  .code;
// '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'

babel-polyfill

安裝

$ npm install --save babel-polyfill

使用

import 'babel-polyfill';
// 或者
require('babel-polyfill');

Babel 預設不轉碼的 API 非常多，詳細清單可以檢視babel-plugin-transform-runtime模組的definitions.js檔案。

瀏覽器環境

//實時轉碼
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

//將程式碼打包成瀏覽器可以使用的指令碼
//以Babel配合Browserify為例,安裝babelify模組
$ npm install --save-dev babelify babel-preset-latest

//用命令列轉換 ES6 指令碼
$  browserify script.js -o bundle.js \
  -t [ babelify --presets [ latest ] ]
  
//將ES6指令碼`script.js`，轉為`bundle.js`，瀏覽器直接載入後者就可以了
//改寫package.json可以不用每次命令列都輸入引數
  {
  "browserify": {
    "transform": [["babelify", { "presets": ["latest"] }]]
  }
}

線上轉換

Babel 提供一個REPL線上編譯器，可以線上將 ES6 程式碼轉為 ES5 程式碼。轉換後的程式碼，可以直接作為 ES5 程式碼插入網頁執行。

與其他工具的配合

許多工具需要 Babel 進行前置轉碼

//ESLint安裝
$ npm install --save-dev eslint babel-eslint

//根目錄下新建配置.eslintrc
{
  "parser": "babel-eslint",
  "rules": {
    ...
  }
}
    
 //改寫package.json
  {
    "name": "my-module",
    "scripts": {
      "lint": "eslint my-files.js"
    },
    "devDependencies": {
      "babel-eslint": "...",
      "eslint": "..."
    }
  }    

//Mocha 測試框架
//如果需要執行使用 ES6 語法的測試指令碼,修改package.jsond的scripts.test

"scripts": {
  "test": "mocha --ui qunit --compilers js:babel-core/register"
}

//`--compilers`引數指定指令碼的轉碼器，規定字尾名為`js`的檔案，都需要使用`babel-core/register`先轉碼