在 2 月 20 號 ECMAScript 第六版就正式推出了,這門語言一直保持穩定快速的發展而且新功能也在慢慢被現在主流的 JavaScript 引擎所接受。不過要想在瀏覽器端或者 Node 端直接運行 ES6 代碼還得等上一些日子。幸好 TC39 (負責研究開發 EMCAScript 規格的組織) 做了大量工作讓我們現在可以使用 ES6 中的大部分特性了。
代碼轉換
能夠實現 ES6 到 ES5 的代碼轉換多虧了 Babel (以前叫 6to5) 以及 Traceur 之類的項目。這些轉換器 (更准確地說是源代碼到源代碼的編譯器) 可以把你寫的符合 ECMAScript 6 標准的代碼完美地轉換為 ECMAScript 5 標准的代碼,並且可以確保良好地運行在所有主流 JavaScript 引擎中。
我們這里目前在使用 Babel,主要是因為它對 ES6 的支持程度比其它同類更高,而且 Babel 擁有完善的文檔和一個很棒的在線交互式編程環境。
起步
在用 ES6 標准開始一個新項目的時候我們會建立一個目錄結構來確保用 ES6 編寫的代碼能和編譯出的 ES5 代碼區分開。原始的 ES6 代碼我們放在 src 目錄下,而編譯好的文件就是 lib 目錄。這樣的命名我們會在本文一直使用。(補充一點,lib 目錄應該被加入 .gitignore 文件中)
安裝 Babel
如果你還沒安裝 Babel 可以使用 npm 來安裝:
npm install -g babel
Babel 一旦安裝完成就可以開始編譯你的 ES6 代碼了。再確認一遍你已經在 src 目錄放入了一些 ES6 文件,下面的命令將會把這個目錄下所有 .es6, .es 和 .js 后綴的文件編譯成符合 ES5 規范的代碼到 lib 目錄下:
babel -d lib/ src/
如果你想在文件有改動的時候自動完成這些編譯工作可以使用這些常用的 JavaScript 構建工具:Grunt, Gulp 和 Brocolli.
給 ES6 標准庫一個”膩子”
Babel 作為一個源到源的編譯器不可能呈現所有 ES6 標准庫中的新特性,例如 Map 和 Set 構造器和 Array 下的一些新方法。要使用這些我們需要一個”膩子”來填補這些不足。現在有很多 ES6 的膩子比如 core-js,它適用與 Node, io.js 和瀏覽器。
譯者注: 本節原始標題為 Polyfilling the standard library,術語 polyfill 來自於一個家裝產品Polyfilla:
Polyfilla 是一個英國產品,在美國稱之為 Spackling Paste (刮牆的,在中國稱為膩子)。記住這一點就行: 把舊的瀏覽器想象成為一面有了裂縫的牆.這些 polyfill 會幫助我們把這面牆的裂縫抹平,還我們一個更好的光滑的牆壁 (瀏覽器)
編寫 ES6 代碼
現在構建 ES6 代碼的工具已經備齊了那我們就開始真正有趣的部分。我們不會過多着眼於某個新特性,如果你有需要可以閱讀 Luke Hoban 的 feature list.
我們先在 src 目錄下創建一個叫 person.es6 的文件:
import 'core-js/shim';
export default class Person {
constructor( name ) {
this.name = name;
}
sayHello() {
return `Hello ${ this.name }!`;
}
sayHelloThreeTimes() {
let hello = this.sayHello();
return `${ hello } `.repeat(3);
}
}
在這個很簡單的例子中我們用了數個需要 Babel 來解決兼容性的語法,還有一個新的方法 String#repeat 須要由 core-js 處理。你可以用本文開頭給出的 Babel 命令行代碼或者用 REPL 得到運行結果。
發布到 npm
目前為止我們可以編寫、編譯和運行 ES6 代碼,不過你也許還想把你的代碼發布到 npm 上。你顯然不能直接發布然后期望每個人都來自己編譯一次。
幸好,npm 允許你在發布前用 prepublish script 選項來修改,這個特性在 CoffeeScript 項目中已經被廣泛使用了。
現在把 package.json 文件加入到項目根目錄中:
{
"name": "person",
"version": "0.1.0",
"scripts": {
"compile": "babel -d lib/ src/",
"prepublish": "npm run compile"
},
"main": "lib/person.js",
"dependencies": {
"core-js": "^0.6.0"
},
"devDependencies": {
"babel": "^4.6.0"
}
}
注意這個 compile script 會直接運行你在右邊提供 Babel 命令,這樣你就可以直接運行 npm run compile 來編譯而不需要鍵入文件目錄了,而 prepublish script 會在你每次執行 npm publish 的時候自動運行。
還有就是為什么 Babel 會被加入 development dependencies 中,這樣如果有人想參與這個項目就不用全局安裝 Babel 了,npm 會把你項目下包含可執行文件的 node_modules 目錄加入到系統環境變量 path 中。
.npmignore 文件
最后你需要確保發布的是編譯出的文件而不是原始的 ES6 文件。如果你的項目根目錄有 .gitignore 而沒有 .npmignore 那 npm 就會自動忽略你項目中包含在 .gitignore 里所有的 文件和目錄。添加 .npmignore 這樣你發布的包里就是編譯好的文件:
src/
總結
編寫 ES6 代碼並使用源到源的編譯器如 Babel 或者 Traceur 來轉換成標准 ES5 代碼 使用 ES6 標准庫膩子如 core-js 記得在發布到 npm 的時候添加 .npmignore 文件 你可以在我們的 update-couch-designs 項目中看到一個完整的例子,這個項目是我們用於更新和新建 CouchDB 設計文檔的簡單腳本。
