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