文章翻譯：張鴻飛
發(fā)表時(shí)間：2015 年 7 月 26 日
原文作者：Marcin Grzywaczewski
文章分類：Web 開(kāi)發(fā)
許多初學(xué)者開(kāi)始學(xué) JavaScript ，但是不知道該采取什么樣的代碼生成工作。 JavaScript 中包含了很多小工具，本文通過(guò)列舉 Babel.js、Webpack、Gulp、NPM、Bower 等常用的 Javascript 小工具，初步簡(jiǎn)單介紹了各工具的功能和用途，以便幫助初學(xué)者更好地學(xué)習(xí)理解和學(xué)習(xí) Javascript。
很多開(kāi)發(fā)者是被 React.js 吸引才來(lái)到 JavaScript 的世界,但卻迷茫于選擇用于生產(chǎn)現(xiàn)代 JavaScript 代碼的工具。 WebPACK、Babel、ESLint、Mocha、Karma、Grunt...應(yīng)該用哪一個(gè)，每個(gè)工具又是做什么的？JavaScript 新手往往來(lái)自于類似 Ruby 和 Java 的社區(qū)，這些社區(qū)存在主觀和全棧的解決方案。像 Rails 上的 Ruby 框架提供了很多立即可用的功能 - 事實(shí)上有可能你遇到的 JavaScript 問(wèn)題是由此導(dǎo)致的。你不用去考慮你的代碼生成工具 - 你的模板語(yǔ)言處理器、資源管道、緩存中間件和很多其他的東西都是預(yù)先配置的并且他們都在透明地工作。
JavaScript 工具往往由小工具、實(shí)用程序和庫(kù)組成，在瀏覽器中生成你使用的代碼。它們?cè)试S在發(fā)生變化后重新生成項(xiàng)目、運(yùn)行測(cè)試套件、熱重載你的代碼等等。你可能會(huì)在這個(gè)世界迷失 - 當(dāng)我第一次試圖用 ES2015 代碼建立 JavaScript 棧來(lái)工作時(shí)，我就迷失了。
事實(shí)上，這是你希望存在的一個(gè)問(wèn)題 - 小零件組成的系統(tǒng)和流行的框架相比較整體更容易維護(hù)并且更靈活。但從這種小工具開(kāi)始是非常困難的。
我想給大家簡(jiǎn)短介紹一下流行工具的用途 - 以及你需要與否。
通過(guò)現(xiàn)代化的 JavaScript 代碼庫(kù)工作與諸如 Ruby 之類的代碼庫(kù)稍有不同。這是因?yàn)榄h(huán)境（或構(gòu)建目標(biāo)）可能會(huì)顯著不同。這也是因?yàn)槟闹饕h(huán)境，如瀏覽器不能直接讀取你的代碼并運(yùn)行。由于 ES2015 在流行的瀏覽器中沒(méi)有完全實(shí)現(xiàn)，你的代碼需要事先準(zhǔn)備好。這個(gè)過(guò)程被稱為轉(zhuǎn)換編譯并有所謂的轉(zhuǎn)換編譯器工具來(lái)處理。
你的代碼模塊化也存在問(wèn)題。 JavaScript 沒(méi)有附帶內(nèi)置的解決方案來(lái)提供某種模塊或 API 來(lái)實(shí)現(xiàn)這一點(diǎn)。這些東西都是特定環(huán)境的 - Node.js 帶有自己的模塊系統(tǒng)（基于 CommonJS 規(guī)范），瀏覽器實(shí)現(xiàn)模塊的某些功能 – 如AMD、CommonJS、System、UMD 等。他們指定如何在 JavaScript 中引入和定義模塊。還有叫做模塊包的工具，可以把你的代碼通過(guò)這種特定的模塊系統(tǒng)編寫，并從它創(chuàng)建了一個(gè)靜態(tài)的 JavaScript 文件，可用于瀏覽器。
在使用 JavaScript 時(shí)，這兩件事情都非常獨(dú)特 - 大多數(shù)語(yǔ)言中都擁有自己的一套模塊化技術(shù)包括在內(nèi)。大多數(shù)語(yǔ)言也直接解釋/編譯來(lái)運(yùn)行您的程序 - 這是不符合現(xiàn)代的 JavaScript 以前必須得轉(zhuǎn)換編譯的情況的。
考慮到這一點(diǎn)，讓我們跳的流行工具列表來(lái)看看他們能做什么。
Babel.js是一種轉(zhuǎn)換編譯器 - 它將你的代碼通過(guò) 2015 版 ECMAScript 標(biāo)準(zhǔn)書寫，再以舊瀏覽器可以運(yùn)行的舊標(biāo)準(zhǔn)來(lái)生成代碼，。它還允許您啟用在測(cè)試的 2016 版 ECMAScript （又名 ECMAScript7 或 ES7 ）功能，并具有內(nèi)置的 JSX 轉(zhuǎn)換編譯器。它可以采取 React 使用的 JSX 語(yǔ)法，并通過(guò)它生成 JavaScript 代碼。
還有其他適用于最新 ECMAScript 標(biāo)準(zhǔn)的轉(zhuǎn)換編譯器 – 如[Traceur]( https://github.com/google/traceur-compiler)、[ES6-transpiler]( https://github.com/termi/es6-transpiler)以及[更多]( https://github.com/addyosmani/es6-tools)。Babel.js 是迄今為止轉(zhuǎn)換編譯代碼最廣泛采取的解決方案。
JavaScript 還帶有多種類似版本 – 并且他們都有轉(zhuǎn)換編譯器。如[PureScript]( http://www.purescript.org/)、[CoffeeScript]( http://coffeescript.org/)、[TypeScript]( http://www.typescriptlang.org/)以很多語(yǔ)言帶有自己轉(zhuǎn)換編譯器。你可以使用他們，如果你不想使用 2015 版 ECMAScript 來(lái)寫代碼，并且仍然在客戶端瀏覽器上運(yùn)行它。
Webpack 是一個(gè)模塊包。這需要模塊化發(fā)展你的代碼庫(kù)，并且產(chǎn)生一個(gè)輸出，將模塊轉(zhuǎn)換成瀏覽器可以理解的文件。
Webpack 中自帶開(kāi)發(fā)服務(wù)器，它允許你在開(kāi)發(fā)環(huán)境中承載你的代碼。這種服務(wù)器同樣也看著你的文件，并在每次做出改變時(shí)重新包裝代碼。
模塊包還保持文件之間依賴關(guān)系的曲線圖。這種特性是為什么其他如轉(zhuǎn)換編譯之類的編譯步驟通常與這樣的工具集成的原因。 Webpack 中確實(shí)使用這樣的裝載機(jī)來(lái)整合。您可以轉(zhuǎn)換編譯你的代碼，壓縮合并，從你的代碼庫(kù)中刪除無(wú)用代碼等等。
Webpack 也能夠打包資源而不像 JavaScript - 你可以包含和轉(zhuǎn)換編譯樣式表，優(yōu)化靜態(tài)資源等等。所有這些都集成都由于 Webpack 提供的裝載機(jī)功能得以實(shí)現(xiàn)。
Webpack 有很多可替代工具，但現(xiàn)在只有一條路可走 - 這是在 React 社區(qū)中執(zhí)行模塊打包最流行的工具。同樣的還有一些其他工具如[Browserify]( http://browserify.org/)、[JSPM]( http://jspm.io/)、[SystemJS]( https://github.com/systemjs/systemjs) 等可以實(shí)現(xiàn)。
Gulp 是一種構(gòu)建系統(tǒng)或任務(wù)執(zhí)行器。它比模塊打包機(jī)工作在一個(gè)更高的水平上。雖然模塊打包機(jī)工作于模塊和依賴樹(shù)，Gulp 適用于你的文件結(jié)構(gòu) - 并能在其上執(zhí)行任務(wù)。這與 UNIX 環(huán)境下的一個(gè) make 工具非常類似。它基本上是一種序列化運(yùn)行其他工具的方式。
在 Gulp 中你可以定義手動(dòng)運(yùn)行的任務(wù)。您可以定義這些任務(wù)需要在哪些文件上運(yùn)行，關(guān)于他們需要完成哪些需求。
Gulp 可以操作工作流抽象。構(gòu)建過(guò)程是一組工作流 – gulp 提供一個(gè)文件流并且通過(guò)另一個(gè)流來(lái)傳送該流 - 如“壓縮合并”流需要文件流作為輸入，并產(chǎn)生壓縮合并文件作為輸出。然后你可以把它傳送到另一個(gè)流，在壓縮合并文件上實(shí)現(xiàn)相同功能等等。
所以基本上這個(gè)工具是關(guān)于一組文件工作的流程編排。這些工具可以壓縮合并你的代碼、修改、優(yōu)化你的資源、壓縮合并、從注釋來(lái)編譯文件、生成源地圖、運(yùn)行測(cè)試、部署你的代碼....并且他們是非常通用的 - 對(duì)于文件同樣有效。Gulp 本身對(duì)于模塊或你的文件的意義并非一無(wú)所知- 但它可以讓其他工具來(lái)對(duì)這些文件執(zhí)行任務(wù)。
Gulp 還帶有基本的觀察器 - 你可以觀察一組文件，并在他們改變時(shí)對(duì)其執(zhí)行任務(wù)。
Gulp 是市場(chǎng)上較新版本的編譯系統(tǒng)中的一個(gè)。還有像 Grunt 之類的更豐富的工具。
構(gòu)建系統(tǒng)可以做很多模塊打包機(jī)可以做的事情。但他們可能通過(guò)一個(gè)不太優(yōu)化的方式來(lái)實(shí)現(xiàn)，因?yàn)樗麄兌脊ぷ饔谖募?- 他們不知道模塊打包機(jī)知道的抽象概念。你也可以在你的構(gòu)建系統(tǒng)中運(yùn)行你的模塊打包機(jī)。所以這是一個(gè)比模塊打包機(jī)更高層次的工具。在決定應(yīng)該在您的環(huán)境使用什么時(shí)應(yīng)該把它考慮在內(nèi)。
NPM 是一個(gè)包管理器。它和系統(tǒng)軟件包管理器做同樣的工作。但對(duì) JavaScript 而言，這是下載你的所有環(huán)境的工具。NPM 負(fù)責(zé)下載包，解決對(duì)他們的依賴并且在項(xiàng)目周圍提供包的抽象。所以，當(dāng)另一家開(kāi)發(fā)商想與你的代碼庫(kù)工作時(shí)，他所需要做的是發(fā)出 NPM install 命令然后所有的依賴會(huì)自動(dòng)安裝。在這樣的包中，你還可以包含許可證信息、姓名、關(guān)鍵詞、版本、描述和許多其他元數(shù)據(jù)的代碼。如果你正在開(kāi)發(fā)一個(gè)庫(kù)，NPM 還可以幫助您在以后發(fā)布它并使其可用于所有在 Node.js 的環(huán)境中工作的開(kāi)發(fā)人員。
所以，如果你想安裝另一個(gè)很酷的庫(kù)來(lái)使用，或 Webpack 的其他裝載機(jī)，或者 Webpack 自身 - NPM 是可為您處理它的工具。
到目前為止，據(jù)我了解，還沒(méi)有 NPM 的替代品。
Bower 是靜態(tài)資源的軟件包管理器。同時(shí) NPM 允許你安裝軟件包，可用于構(gòu)建你的代碼，Bower 可以幫助你，如果你想要一個(gè)獨(dú)立的庫(kù)，而不是通過(guò)構(gòu)建或引入它。它所做的是下載少量的 JS 文件、樣式表和圖像 - 你可以將它們導(dǎo)入到您的瀏覽器并馬上工作。
當(dāng)你建立你的環(huán)境時(shí)，Bower 可以為您提供您可以使用的插入式靜態(tài)文件。當(dāng)你不想要建立你的代碼時(shí)，可以令人眼前一亮，但對(duì)靜態(tài)資源有效果。對(duì)于簡(jiǎn)單的網(wǎng)站和原型更有用 - 獲取一個(gè)庫(kù)，并立即在瀏覽器上與所需的所有資源來(lái)使用它。
如果您使用的是基于 Rails 的編譯環(huán)境，Rails-Assets 就是 RubyGems 和 Bower 之間的代理 - 這樣你就可以通過(guò)把它包含在你的 Gemfile 中在你的代碼庫(kù)使用 Bower 包。
《React.js通過(guò)實(shí)例就在這里！》
想要通過(guò)建立流行小部件來(lái)了解 React.js 和 2015版 ECMAScript？
使用優(yōu)惠碼 LEARNREACT 來(lái)得到這本書早期版本訪問(wèn)的 30％優(yōu)惠！大多數(shù)例子的庫(kù)都包含在內(nèi)。
http://wiki.jikexueyuan.com/project/wiki-journal-201507-1/images/the-hitchhiker's-guide-to-modern-javaScript-tooling-02.png" alt="02" />
Mocha 是一個(gè)測(cè)試框架。它所做的就是運(yùn)行測(cè)試。它還提供了設(shè)置測(cè)試用例的API - 讓你的測(cè)試分成若干小塊。
它能夠在瀏覽器或 Node.js 環(huán)境中運(yùn)行測(cè)試。它也可以根本無(wú)需運(yùn)行瀏覽器來(lái)運(yùn)行測(cè)試你的瀏覽器代碼 - 使用如 PhantomJS 的無(wú)頭瀏覽器。
你可以使用任何你喜歡的測(cè)試庫(kù)。Mocha 不會(huì)假設(shè)你在測(cè)試中會(huì)做什么。
您可以在測(cè)試你的代碼前配置 Mocha 來(lái)執(zhí)行任務(wù) – 類似運(yùn)行 Webpack 然后再測(cè)試諸如此類。
對(duì) Mocha 最顯著的替代是[Karma]( http://karma-runner.github.io/0.13/index.html)。做的是相當(dāng)類似的工作，并都被社區(qū)所喜愛(ài)。
Jasmine 是用于測(cè)試的庫(kù)。它為關(guān)于你代碼的聲明或期望提供一個(gè) API。它比Mocha的工作層次較低，它運(yùn)行你的測(cè)試 – Jasmine 定義了測(cè)試是如何創(chuàng)建的。它是用于測(cè)試 JavaScript 代碼的最流行的庫(kù)。
還有像 Chai 的替代品。也有更多的專業(yè)庫(kù)，可以幫助你測(cè)試，如 Sinon.js 的 stubbing。
ESLint 是2015版ECMAScript 代碼的剝絨機(jī)。雖然轉(zhuǎn)換編譯器可以告訴你，您的代碼有什么語(yǔ)法錯(cuò)誤，剝絨機(jī)卻可以告訴你，你的代碼沒(méi)有遵循最佳實(shí)踐。當(dāng)你想保持高質(zhì)量代碼時(shí)，這將是一個(gè)很大的幫助，。它也可以變得很討厭，因?yàn)樗鼮槟拇a假定某種風(fēng)格指南 - 但它是高度可配置的，所以你可以改變行為，甚至禁用一些檢查。您可以將 ESLint 與你的編輯器整合成一體 - 像 Sublime Text（使用 SublimeLinter）或 VIM （使用 syntastic），所以根據(jù) ES2015 良好代碼原則，你的代碼可以被經(jīng)常檢查。
也有 ESLint 插件可以大體上檢查 JSX 的最佳實(shí)踐和 React 做法 – 例如eslint-plugin-react。
這是保證代碼質(zhì)量的一個(gè)很好的工具。如果你工作在團(tuán)隊(duì)中，它也可以用來(lái)建立項(xiàng)目的某種準(zhǔn)則- 所以許多人書寫的的代碼可以根據(jù)最佳實(shí)踐進(jìn)行檢查。且不說(shuō)它可以集成到你的連續(xù)部署服務(wù)器中，所以質(zhì)量如此差的代碼將被停止進(jìn)入生產(chǎn)環(huán)境當(dāng)中。真是利落！
有一個(gè)有點(diǎn)過(guò)時(shí)稱為 JSLint 的替代物可以完成同樣的事情。
雖然有用，ESLint 卻是高度可選的，如果你不想，你可以不需要使用它。
正如已經(jīng)說(shuō)過(guò)的，將這些工具拼接起來(lái)對(duì)初學(xué)者來(lái)說(shuō)是一個(gè)艱巨的任務(wù)。Yeoman 就是用來(lái)簡(jiǎn)化這個(gè)過(guò)程的。它是一個(gè) _scaffolding 工具。你可以發(fā)現(xiàn)你想擁有的一系列功能列表，并且找到一個(gè) Yeoman 生成器來(lái)提供這些功能。發(fā)出一個(gè)命令之后，你可以擁有一個(gè)包含你需要的功能的預(yù)配置環(huán)境。
這也是一個(gè)偉大的工具，如果你建立了一個(gè)項(xiàng)目結(jié)構(gòu)，并想在其他項(xiàng)目中重新使用它。你只需要?jiǎng)?chuàng)建一個(gè) Yeoman 生成器出來(lái)，然后你可以在幾秒鐘內(nèi)引導(dǎo)具有類似配置的項(xiàng)目。
噢，這是一個(gè)很大的工具！擁有長(zhǎng)處和短處。這樣的小工具的方法最大的缺點(diǎn)是，它是很難學(xué)會(huì)使用什么和如何配置它。好處是，如果是你不喜歡的工具，你可以很容易地取代它 – 我在這里描述的大多數(shù)工具都是有替代品的。
如果您認(rèn)為有一個(gè)非常受歡迎的工具，值得考慮加入該名單，讓我們知道。我希望這對(duì)于理解 JavaScript 構(gòu)建系統(tǒng)和一般使用的工具將會(huì)是一個(gè)很好的開(kāi)始。
祝你學(xué)習(xí)現(xiàn)代 JavaScript 順利！
更多IT技術(shù)干貨: wiki.jikexueyuan.com
加入極客星球翻譯團(tuán)隊(duì): http://wiki.jikexueyuan.com/project/wiki-editors-guidelines/translators.html版權(quán)聲明：
本譯文僅用于學(xué)習(xí)和交流目的。非商業(yè)轉(zhuǎn)載請(qǐng)注明譯者、出處，并保留文章在極客學(xué)院的完整鏈接
商業(yè)合作請(qǐng)聯(lián)系 wiki@jikexueyuan.com
原文地址：[http://reactkungfu.com/2015/07/the-hitchhikers-guide-to-modern-javascript-tooling/]( http://reactkungfu.com/2015/07/the-hitchhikers-guide-to-modern-javascript-tooling/)
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多
