摘要：我們已經(jīng)運(yùn)用了的一些閃亮的新特性，那么如何才能轉(zhuǎn)化為的代碼呢首先，我們需要通過(guò)來(lái)安裝在全局安裝會(huì)提供我們一個(gè)命令行工具。

你是不是也在為可以使用ES6的新特性而興奮，卻不太確定應(yīng)該從哪開始，或者如何開始？不止你一個(gè)人這樣！我已經(jīng)花了一年半的時(shí)間去解決這個(gè)幸福的難題。在這段時(shí)間里 JavaScript 工具鏈中有幾個(gè)令人興奮的突破。

這些突破讓我們可以用ES6書寫完全的JS模塊，而不會(huì)為了一些基本的條件而妥協(xié)，比如testing，linting 和（最重要的）其他人可以輕易理解我們所寫的代碼。

在這篇文章中，我們集中精力在如何用ES6構(gòu)建JS模塊，并且無(wú)論你在你的網(wǎng)站或者app中使用CommonJS，AMD（asynchronous module definition）或者普通的網(wǎng)頁(yè)script引入，這個(gè)模塊都可以輕易被引用。

在這個(gè)系列文章的第一部分和第二部分，我們來(lái)看一下這些卓越的工具們。在這篇文章中，我們?cè)敿?xì)說(shuō)明如何編寫，編譯，打包代碼；而在第二篇文章會(huì)集中在linting，formatting 和 testing（利用 JSCS，ESLint，mocha，Chai，Karma 和 Istanbul）。讓我們來(lái)看看在這篇文章中涉及到的工具：

Babel(剛剛度過(guò)了它的第一個(gè)生日)可以把ES6代碼轉(zhuǎn)化為ES5代碼，不僅簡(jiǎn)單，而且優(yōu)雅。

Webpack，webpack平寂了我們組里的“模塊戰(zhàn)爭(zhēng)”，我們每個(gè)人都鎮(zhèn)定得使用著webpack來(lái)應(yīng)付_一切_(CommonJS，AMD 和 ES6)。它也在打包獨(dú)立的ES6庫(kù)方面做得非常棒——這是我們?cè)谶^(guò)去一直渴望看到的。

Gulp一個(gè)強(qiáng)大的自動(dòng)化構(gòu)建工具。

我們將要討論的是書寫客戶端（client-side）ES6 _libraries_，而不是整個(gè)網(wǎng)站或者 app 。（無(wú)論是在你的開源項(xiàng)目里或者是在你工作中的軟件項(xiàng)目，這是可以在不同的項(xiàng)目中可復(fù)用的代碼。）”等一下！“，你可能會(huì)想：”這個(gè)難道不是在瀏覽器支持ES6之后才能實(shí)現(xiàn)的嗎？“

你是對(duì)的！然而，我們利用上面提到的Babel可以把ES6代碼轉(zhuǎn)化為ES5代碼，在大多數(shù)情況下現(xiàn)在就可以實(shí)現(xiàn)我們的目標(biāo)。

我們目標(biāo)的第二部分是寫一個(gè)無(wú)論在什么模塊規(guī)范下都可以使用的JS模塊。AMD死忠飯？你會(huì)得到一個(gè)可用的模塊。CommonJS 加 browserify 才是你的最愛？沒(méi)問(wèn)題！你會(huì)得到一個(gè)可用的模塊?；蛘吣銓?duì)AMD和CommonJS不感冒，你只是想要在你的頁(yè)面上加一個(gè)

你會(huì)看到我們已經(jīng)依賴legoQuotes.js（就在babel的browser-polyfill.js下面），就像其他依賴一樣使用