ES6轉換ES5
各大瀏覽器的最新版本,對 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。隨著時間的推移,支持度已經越來越高了,超過 90%的 ES6 語法特性都實現了。
Node 是 JavaScript 的服務器運行環境(runtime)。它對 ES6 的支持度更高。除了那些默認打開的功能,還有一些語法功能已經實現了,但是默認沒有打開。使用下面的命令,可以查看 Node 已經實現的 ES6 特性。
$ node --v8-options | grep harmony
上面命令的輸出結果,會因為版本的不同而有所不同。
我寫了一個工具 ES-Checker,用來檢查各種運行環境對 ES6 的支持情況。訪問ruanyf.github.io/es-checker,可以看到您的瀏覽器支持 ES6 的程度。運行下面的命令,可以查看你正在使用的 Node 環境對 ES6 的支持程度。
$ npm install -g es-checker
$ es-checker
=========================================
Passes 24 feature Dectations
Your runtime supports 57% of ECMAScript 6
=========================================
Babel 轉碼器
Babel 是一個廣泛使用的 ES6 轉碼器,可以將 ES6 代碼轉為 ES5 代碼,從而在現有環境執行。這意味著,你可以用 ES6 的方式編寫程序,又不用擔心現有環境是否支持。下面是一個例子。
// 轉碼前
input.map(item => item + 1);
// 轉碼後
input.map(function (item) {
return item + 1;
});
上面的原始代碼用了箭頭函數,Babel 將其轉為普通函數,就能在不支持箭頭函數的 JavaScript 環境執行了。
配置文件.babelrc
Babel 的配置文件是.babelrc
,存放在項目的根目錄下。使用 Babel 的第一步,就是配置這個文件。
該文件用來設置轉碼規則和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
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
然後,將這些規則加入.babelrc
。
{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}
註意,以下所有 Babel 工具和模塊的使用,都必須先寫好.babelrc
。
命令行轉碼babel-cli
Babel 提供babel-cli
工具,用於命令行轉碼。
它的安裝命令如下。
$ npm install --global 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
上面代碼是在全局環境下,進行 Babel 轉碼。這意味著,如果項目要運行,全局環境必須有 Babel,也就是說項目產生了對環境的依賴。另一方面,這樣做也無法支持不同項目使用不同版本的 Babel。
一個解決辦法是將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
babel-cli
工具自帶一個babel-node
命令,提供一個支持 ES6 的 REPL 環境。它支持 Node 的 REPL 環境的所有功能,而且可以直接運行 ES6 代碼。
它不用單獨安裝,而是隨babel-cli
一起安裝。然後,執行babel-node
就進入 REPL 環境。
$ babel-node
> (x => x * 2)(1)
2
babel-node
命令可以直接運行 ES6 腳本。將上面的代碼放入腳本文件es6.js
,然後直接運行。
$ babel-node es6.js
2
babel-node
也可以安裝在項目中。
$ npm install --save-dev babel-cli
然後,改寫package.json
。
{
"scripts": {
"script-name": "babel-node script.js"
}
}
上面代碼中,使用babel-node
替代node
,這樣script.js
本身就不用做任何轉碼處理。
babel-register
babel-register
模塊改寫require
命令,為它加上一個鉤子。此後,每當使用require
加載.js
、.jsx
、.es
和.es6
後綴名的文件,就會先用 Babel 進行轉碼。
$ npm install --save-dev babel-register
使用時,必須首先加載babel-register
。
require("babel-register");
require("./index.js");
然後,就不需要手動對index.js
轉碼了。
需要註意的是,babel-register
只會對require
命令加載的文件轉碼,而不會對當前文件轉碼。另外,由於它是實時轉碼,所以只適合在開發環境使用。
babel-core
如果某些代碼需要調用 Babel 的 API 進行轉碼,就要使用babel-core
模塊。
安裝命令如下。
$ npm install babel-core --save
然後,在項目中就可以調用babel-core
。
var babel = require(‘babel-core‘);
// 字符串轉碼
babel.transform(‘code();‘, options);
// => { code, map, ast }
// 文件轉碼(異步)
babel.transformFile(‘filename.js‘, options, function(err, result) {
result; // => { code, map, ast }
});
// 文件轉碼(同步)
babel.transformFileSync(‘filename.js‘, options);
// => { code, map, ast }
// Babel AST轉碼
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
配置對象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};‘
上面代碼中,transform
方法的第一個參數是一個字符串,表示需要被轉換的 ES6 代碼,第二個參數是轉換的配置對象。
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
然後,在腳本頭部,加入如下一行代碼。
import ‘babel-polyfill‘;
// 或者
require(‘babel-polyfill‘);
Babel 默認不轉碼的 API 非常多,詳細清單可以查看babel-plugin-transform-runtime
模塊的definitions.js文件。
瀏覽器環境
Babel 也可以用於瀏覽器環境。但是,從 Babel 6.0 開始,不再直接提供瀏覽器版本,而是要用構建工具構建出來。如果你沒有或不想使用構建工具,可以使用babel-standalone模塊提供的瀏覽器版本,將其插入網頁。
<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>
註意,網頁實時將 ES6 代碼轉為 ES5,對性能會有影響。生產環境需要加載已經轉碼完成的腳本。
下面是如何將代碼打包成瀏覽器可以使用的腳本,以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 和 Mocha。
ESLint 用於靜態檢查代碼的語法和風格,安裝命令如下。
$ npm install --save-dev eslint babel-eslint
然後,在項目根目錄下,新建一個配置文件.eslintrc
,在其中加入parser
字段。
{
"parser": "babel-eslint",
"rules": {
...
}
}
再在package.json
之中,加入相應的scripts
腳本。
{
"name": "my-module",
"scripts": {
"lint": "eslint my-files.js"
},
"devDependencies": {
"babel-eslint": "...",
"eslint": "..."
}
}
Mocha 則是一個測試框架,如果需要執行使用 ES6 語法的測試腳本,可以修改package.json
的scripts.test
。
"scripts": {
"test": "mocha --ui qunit --compilers js:babel-core/register"
}
上面命令中,--compilers
參數指定腳本的轉碼器,規定後綴名為js
的文件,都需要使用babel-core/register
先轉碼。
Traceur 轉碼器
Google 公司的Traceur轉碼器,也可以將 ES6 代碼轉為 ES5 代碼。
直接插入網頁
Traceur 允許將 ES6 代碼直接插入網頁。首先,必須在網頁頭部加載 Traceur 庫文件。
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module">
import ‘./Greeter.js‘;
</script>
上面代碼中,一共有 4 個script
標簽。第一個是加載 Traceur 的庫文件,第二個和第三個是將這個庫文件用於瀏覽器環境,第四個則是加載用戶腳本,這個腳本裏面可以使用 ES6 代碼。
註意,第四個script
標簽的type
屬性的值是module
,而不是text/javascript
。這是 Traceur 編譯器識別 ES6 代碼的標誌,編譯器會自動將所有type=module
的代碼編譯為 ES5,然後再交給瀏覽器執行。
除了引用外部 ES6 腳本,也可以直接在網頁中放置 ES6 代碼。
<script type="module">
class Calc {
constructor() {
console.log(‘Calc constructor‘);
}
add(a, b) {
return a + b;
}
}
var c = new Calc();
console.log(c.add(4,5));
</script>
正常情況下,上面代碼會在控制臺打印出9
。
如果想對 Traceur 的行為有精確控制,可以采用下面參數配置的寫法。
<script>
// Create the System object
window.System = new traceur.runtime.BrowserTraceurLoader();
// Set some experimental options
var metadata = {
traceurOptions: {
experimental: true,
properTailCalls: true,
symbols: true,
arrayComprehension: true,
asyncFunctions: true,
asyncGenerators: exponentiation,
forOn: true,
generatorComprehension: true
}
};
// Load your module
System.import(‘./myModule.js‘, {metadata: metadata}).catch(function(ex) {
console.error(‘Import failed‘, ex.stack || ex);
});
</script>
上面代碼中,首先生成 Traceur 的全局對象window.System
,然後System.import
方法可以用來加載 ES6。加載的時候,需要傳入一個配置對象metadata
,該對象的traceurOptions
屬性可以配置支持 ES6 功能。如果設為experimental: true
,就表示除了 ES6 以外,還支持一些實驗性的新功能。
在線轉換
Traceur 也提供一個在線編譯器,可以在線將 ES6 代碼轉為 ES5 代碼。轉換後的代碼,可以直接作為 ES5 代碼插入網頁運行。
上面的例子轉為 ES5 代碼運行,就是下面這個樣子。
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script>
$traceurRuntime.ModuleStore.getAnonymousModule(function() {
"use strict";
var Calc = function Calc() {
console.log(‘Calc constructor‘);
};
($traceurRuntime.createClass)(Calc, {add: function(a, b) {
return a + b;
}}, {});
var c = new Calc();
console.log(c.add(4, 5));
return {};
});
</script>
命令行轉換
作為命令行工具使用時,Traceur 是一個 Node 的模塊,首先需要用 npm 安裝。
$ npm install -g traceur
安裝成功後,就可以在命令行下使用 Traceur 了。
Traceur 直接運行 ES6 腳本文件,會在標準輸出顯示運行結果,以前面的calc.js
為例。
$ traceur calc.js
Calc constructor
9
如果要將 ES6 腳本轉為 ES5 保存,要采用下面的寫法。
$ traceur --script calc.es6.js --out calc.es5.js
上面代碼的--script
選項表示指定輸入文件,--out
選項表示指定輸出文件。
為了防止有些特性編譯不成功,最好加上--experimental
選項。
$ traceur --script calc.es6.js --out calc.es5.js --experimental
命令行下轉換生成的文件,就可以直接放到瀏覽器中運行。
Node 環境的用法
Traceur 的 Node 用法如下(假定已安裝traceur
模塊)。
var traceur = require(‘traceur‘);
var fs = require(‘fs‘);
// 將 ES6 腳本轉為字符串
var contents = fs.readFileSync(‘es6-file.js‘).toString();
var result = traceur.compile(contents, {
filename: ‘es6-file.js‘,
sourceMap: true,
// 其他設置
modules: ‘commonjs‘
});
if (result.error)
throw result.error;
// result 對象的 js 屬性就是轉換後的 ES5 代碼
fs.writeFileSync(‘out.js‘, result.js);
// sourceMap 屬性對應 map 文件
fs.writeFileSync(‘out.js.map‘, result.sourceMap);
ES6轉換ES5