在 2 月 20 號(hào) ECMAScript 第六版就正式推出了，這門語言一直保持穩(wěn)定快速的發(fā)展而且新功能也在慢慢被現(xiàn)在主流的 JavaScript 引擎所接受。不過要想在瀏覽器端或者 Node 端直接運(yùn)行 ES6 代碼還得等上一些日子。幸好 TC39 (負(fù)責(zé)研究開發(fā) EMCAScript 規(guī)格的組織) 做了大量工作讓我們現(xiàn)在可以使用 ES6 中的大部分特性了。

代碼轉(zhuǎn)換

能夠?qū)崿F(xiàn) ES6 到 ES5 的代碼轉(zhuǎn)換多虧了 Babel (以前叫 6to5) 以及 Traceur 之類的項(xiàng)目。這些轉(zhuǎn)換器 (更準(zhǔn)確地說是源代碼到源代碼的編譯器) 可以把你寫的符合 ECMAScript 6 標(biāo)準(zhǔn)的代碼完美地轉(zhuǎn)換為 ECMAScript 5 標(biāo)準(zhǔn)的代碼，并且可以確保良好地運(yùn)行在所有主流 JavaScript 引擎中。

我們這里目前在使用 Babel，主要是因?yàn)樗鼘?duì) ES6 的支持程度比其它同類更高，而且 Babel 擁有完善的文檔和一個(gè)很棒的在線交互式編程環(huán)境。

起步

在用 ES6 標(biāo)準(zhǔn)開始一個(gè)新項(xiàng)目的時(shí)候我們會(huì)建立一個(gè)目錄結(jié)構(gòu)來確保用 ES6 編寫的代碼能和編譯出的 ES5 代碼區(qū)分開。原始的 ES6 代碼我們放在src目錄下，而編譯好的文件就是lib目錄。這樣的命名我們會(huì)在本文一直使用。（補(bǔ)充一點(diǎn)，lib目錄應(yīng)該被加入.gitignore文件中）

安裝 Babel

如果你還沒安裝 Babel 可以使用 npm 來安裝：

npm install -g babel

Babel 一旦安裝完成就可以開始編譯你的 ES6 代碼了。再確認(rèn)一遍你已經(jīng)在src目錄放入了一些 ES6 文件，下面的命令將會(huì)把這個(gè)目錄下所有.es6,.es和.js后綴的文件編譯成符合 ES5 規(guī)范的代碼到lib目錄下：

babel -d lib/ src/ 

如果你想在文件有改動(dòng)的時(shí)候自動(dòng)完成這些編譯工作可以使用這些常用的 JavaScript 構(gòu)建工具：Grunt, Gulp 和 Brocolli.

給 ES6 標(biāo)準(zhǔn)庫一個(gè)"膩?zhàn)?

Babel 作為一個(gè)源到源的編譯器不可能呈現(xiàn)所有 ES6 標(biāo)準(zhǔn)庫中的新特性，例如Map和Set構(gòu)造器和Array下的一些新方法。要使用這些我們需要一個(gè)"膩?zhàn)?來填補(bǔ)這些不足?，F(xiàn)在有很多 ES6 的膩?zhàn)颖热?core-js，它適用與 Node, io.js 和瀏覽器。

譯者注: 本節(jié)原始標(biāo)題為 Polyfilling the standard library，術(shù)語 polyfill 來自于一個(gè)家裝產(chǎn)品Polyfilla:

Polyfilla 是一個(gè)英國產(chǎn)品，在美國稱之為 Spackling Paste (刮墻的,在中國稱為膩?zhàn)?。記住這一點(diǎn)就行: 把舊的瀏覽器想象成為一面有了裂縫的墻.這些 polyfill 會(huì)幫助我們把這面墻的裂縫抹平,還我們一個(gè)更好的光滑的墻壁 (瀏覽器)

編寫 ES6 代碼

現(xiàn)在構(gòu)建 ES6 代碼的工具已經(jīng)備齊了那我們就開始真正有趣的部分。我們不會(huì)過多著眼于某個(gè)新特性，如果你有需要可以閱讀 Luke Hoban 的 feature list.

我們先在src目錄下創(chuàng)建一個(gè)叫person.es6的文件：

在這個(gè)很簡(jiǎn)單的例子中我們用了數(shù)個(gè)需要 Babel 來解決兼容性的語法，還有一個(gè)新的方法String#repeat須要由 core-js 處理。你可以用本文開頭給出的 Babel 命令行代碼或者用 REPL 得到運(yùn)行結(jié)果。

發(fā)布到 npm

目前為止我們可以編寫、編譯和運(yùn)行 ES6 代碼，不過你也許還想把你的代碼發(fā)布到 npm 上。你顯然不能直接發(fā)布然后期望每個(gè)人都來自己編譯一次。

幸好，npm 允許你在發(fā)布前用 prepublishscript 選項(xiàng)來修改，這個(gè)特性在 CoffeeScript 項(xiàng)目中已經(jīng)被廣泛使用了。

現(xiàn)在把package.json文件加入到項(xiàng)目根目錄中：

注意這個(gè)compilescript 會(huì)直接運(yùn)行你在右邊提供 Babel 命令，這樣你就可以直接運(yùn)行npm run compile來編譯而不需要鍵入文件目錄了，而prepublishscript 會(huì)在你每次執(zhí)行npm publish的時(shí)候自動(dòng)運(yùn)行。

還有就是為什么 Babel 會(huì)被加入 development dependencies 中，這樣如果有人想?yún)⑴c這個(gè)項(xiàng)目就不用全局安裝 Babel 了，npm 會(huì)把你項(xiàng)目下包含可執(zhí)行文件的 node_modules 目錄加入到系統(tǒng)環(huán)境變量path中。

.npmignore文件

最后你需要確保發(fā)布的是編譯出的文件而不是原始的 ES6 文件。如果你的項(xiàng)目根目錄有.gitignore而沒有.npmignore那 npm 就會(huì)自動(dòng)忽略你項(xiàng)目中包含在.gitignore里所有的 文件和目錄。添加.npmignore這樣你發(fā)布的包里就是編譯好的文件：

src/

總結(jié)

• 編寫 ES6 代碼并使用源到源的編譯器如 Babel 或者 Traceur 來轉(zhuǎn)換成標(biāo)準(zhǔn) ES5 代碼
• 使用 ES6 標(biāo)準(zhǔn)庫膩?zhàn)尤?core-js
• 記得在發(fā)布到 npm 的時(shí)候添加.npmignore文件

你可以在我們的 update-couch-designs 項(xiàng)目中看到一個(gè)完整的例子，這個(gè)項(xiàng)目是我們用于更新和新建 CouchDB 設(shè)計(jì)文檔的簡(jiǎn)單腳本。

翻譯自 Using ES6 with npm today