各大瀏覽器的最新版本,對ES6的支持可以查看kangax.github.io/es5-compat-table/es6/。隨着時間的推移,支持度已經越來越高了,ES6的大部分特性都實現了。
Node.js是JavaScript語言的服務器運行環境,對ES6的支持度比瀏覽器更高。通過Node,可以體驗更多ES6的特性。建議使用版本管理工具nvm,來安裝Node,因爲可以自由切換版本。不過,nvm不支持Windows系統,如果你使用Windows系統,下面的操作可以改用nvmw或nvm-windows代替。
安裝nvm需要打開命令行窗口,運行下面的命令。
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/<version number>/install.sh | bash
上面命令的version numbe
r處,需要用版本號替換。本節寫作時的版本號是v0.29.0。該命令運行後,nvm會默認安裝在用戶主目錄的.nvm子目錄。
然後,激活nvm。
$ source ~/.nvm/nvm.sh
激活以後,安裝Node的最新版。
$ nvm install node
安裝完成後,切換到該版本。
$ nvm use node
使用下面的命令,可以查看Node所有已經實現的ES6特性。
$ node --v8-options | grep harmony
--harmony_typeof
--harmony_scoping
--harmony_modules
--harmony_symbols
--harmony_proxies
--harmony_collections
--harmony_observation
--harmony_generators
--harmony_iteration
--harmony_numeric_literals
--harmony_strings
--harmony_arrays
--harmony_maths
--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
字段設定轉碼規則,官方提供以下的規則集,你可以根據需要安裝。
# 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": []
}
注意,以下所有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
1環境的所有功能,而且可以直接運行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: ['es2015']
})
.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開始,不再直接提供瀏覽器版本,而是要用構建工具構建出來。如果你沒有或不想使用構建工具,可以通過安裝5.x版本的babel-core
模塊獲取。
$ npm install babel-core@5
運行上面的命令以後,就可以在當前目錄的node_modules/babel-core/
子目錄裏面,找到babel
的瀏覽器版本browser.js
(未精簡)和browser.min.js
(已精簡)。
然後,將下面的代碼插入網頁。
<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
上面代碼中,browser.js
是Babel提供的轉換器腳本,可以在瀏覽器運行。用戶的ES6腳本放在script標籤之中,但是要註明type="text/babel"
。
另一種方法是使用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-es2015
然後,再用命令行轉換ES6腳本。
$ browserify script.js -o bundle.js \
-t [ babelify --presets [ es2015 ] ]
上面代碼將ES6腳本script.js
,轉爲bundle.js
,瀏覽器直接加載後者就可以了。
在package.json設置下面的代碼,就不用每次命令行都輸入參數了。
{
"browserify": {
"transform": [["babelify", { "presets": ["es2015"] }]]
}
}
在線轉換
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.js環境的用法
Traceur
的Node.js
用法如下(假定已安裝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);
參考資料:
https://blog.csdn.net/bigbear00007/article/details/106657925