你的JavaScript工具鏈是什麼？

Question

我期待着開始在JavaScript中編寫一個複雜的應用程序來在網絡上運行。我之前在JavaScript中寫了一點點的一次性代碼，直接使用DOM和一點jQuery。但這是我第一次想要編寫一個完整的應用程序在瀏覽器中運行。

所以，我想知道什麼工具鏈人們喜歡在JavaScript中進行認真的開發。尤其是，我很感興趣，下面有關於你爲什麼選擇你做組件的一些信息以及它們是如何結合在一起到您的工作流程一起：

• 什麼編輯器和編輯器插件/模式/腳本你使用？我通常是一個Emacs用戶，目前我正在使用js2.el，但我有興趣瞭解其他設置。
• 你使用任何種類的IDE（Aptana，Dashcode或類似的）？
• 你使用的是什麼JavaScript庫或框架？
• 你使用任何編譯成JavaScript的語言（GWT，haxe，Objective-J）嗎？
• 你使用哪些單元測試框架？你如何援引他們？它們可以從你的編輯器/ IDE，命令行，瀏覽器，網頁，JavaScript調試器中調用嗎？
• 你使用什麼自動化用戶界面測試工具（如Selenium，W​​atir，Sahi）？再次，這些如何被調用？ （能夠從命令行調用單元測試和界面測試對於運行buildbots會非常有用）
• 您使用了哪些其他代碼質量工具（JSlint，代碼覆蓋率工具或其他任何類型的工具）？
• 你對調試環境（Firebug，WebKit inspector等）有什麼用處？它是否與編輯器或IDE有任何集成？
• 在部署代碼（混淆器，縮小器，任何類型的優化器）之前，您在代碼上執行了哪些後處理？
• 您是否有任何種類的工具來管理模塊依賴關係或根據需要動態加載代碼？我正在編寫的應用程序將使用大量代碼，並且希望減少加載時間，因此用於跟蹤需要哪些模塊或按需加載代碼的工具將會很有幫助。
• 是否有你的工具鏈其他必需的工具（這是特定的JavaScript開發基於瀏覽器的應用程序，我已經有了一個完美的版本控制系統，bug跟蹤系統等）？

我對「這裏有很多可以使用的東西」（我知道很多可用的工具）列表以及更多的實際使用的堆棧列表不太感興趣實踐以及它們如何融合在一起。我希望主要將它開發爲客戶端應用程序，服務器僅用於身份驗證和存儲和檢索數據，所以我對您使用的服務器端框架不感興趣，除非它是客戶端的必備組件在某些方面代碼。

編輯：我在單位和用戶界面測試框架特別感興趣，你如何自動化它們。我喜歡能夠通過命令行來運行項目的所有測試運行一個單一的「做試驗」或「耙測試」任務，並使其返回取決於測試的成功或失敗的狀態。這樣可以更容易地與buildbots進行整合。另外，我很感興趣，如果任何人對不依賴於瀏覽器，更快的週轉上的一個子集的代碼編寫，可以外的瀏覽器來運行單元測試（在犀牛，SpiderMonkey的，V8等）的試驗。

Answer 1

插件/模式/腳本，你用什麼編輯器和編輯器？我是 ，通常是Emacs用戶，目前我正在使用 js2.el，但我對 有興趣瞭解其他 設置。

我一般使用Textmate（與JavaScript，jQuery，和Prototype束）。在進行繁重的前端開發時，我在HTML，CSS和JavaScript文件之間快速切換，我會選擇vim的拆分面板視圖。這樣做時，我根據自己的心情使用macvim或終端+ Visor。很明顯，我是一名Mac用戶。

您是否使用任何種類的IDE（Aptana， Dashcode等）？

不，我曾經使用Coda，但其文本編輯器的功能還有很多不足之處。我也玩過Espresso，這很有趣...但是。

JavaScript庫或 框架，你用什麼？

我使用jQuery和Prototype，這取決於項目的需要。爲了說明各個框架的優勢，我喜歡將jQuery稱爲DOM操作框架和原型a 腳本框架。因此，我傾向於在關注標記和原型的項目上使用jQuery，這些應用程序類型更重的腳本項目。

你使用任何 編譯成JavaScript（GWT，haXe的， 目的-J）的語言？

絕對不是 - 我對這樣的框架有着哲學的抱怨。與服務器端代碼不同，前端代碼正在用戶的瀏覽器中運行，在您無法控制的環境中運行。因此，我認爲這是一個JavaScript開發人員的責任，可以生成最佳代碼。不理想的代碼可能會帶來性能上的影響，而像Objective-J這樣的語言編寫的JavaScript（這是我使用過的唯一一個）將永遠不會像強大的JavaScript開發人員生成的代碼一樣嚴密。

你使用哪些單元測試框架？ 你如何援引他們？它們可以是 從您的編輯器/ IDE， 命令行， 網頁中的瀏覽器，從您的JavaScript 調試器調用？

我是jQuery單元測試框架QUnit的巨大粉絲。 Dojo的DOH Unit Testing也很好。

千萬不要錯過FireUnit，單元測試的一個漂亮的Firebug擴展。

另請參閱Razor。

你用什麼自動化用戶界面測試 工具（如硒， 的Watir，SAHI公司）？再次，這些如何被 調用？ （如果能夠調用從 命令行單元 測試和接口測試將是非常有用的， 運行buildbots）

在必要的時候我用Selenium，但這是罕見的。

您還使用了其他代碼質量工具（JSlint，代碼覆蓋率工具， 或其他類似的工具）？

我使用和愛JSLint。

螢火蟲有一個很好的code coverage extension，和HRCov被普遍認爲是最好的品種。在我的大部分日常JavaScript工作中，我沒有發現代碼覆蓋的用處。

你用什麼爲您調試 環境（螢火蟲，WebKit的 檢查等）？它是否與您的編輯器或IDE有任何 集成？

就我而言，Firebug是JavaScript開發的殺手級應用程序。一些有用的調試功能：

• 可變提示
• 斷點和條件斷點
• 性能分析器
• 一個非常漂亮的console API
• 監視表達式
• 堆棧跟蹤
• 有用的插件，像Jiffy， FireCookie和FireQuery。

的WebKit Inspector是很好的，因爲是DragonFly，並Debug Bar對跟蹤IE瀏覽器漏洞有用......但Firebug是我的唯一。

你部署它 （混淆器，minifiers，任何形式的 優化）之前 代碼運行什麼後處理？

我非常有意不使用任何後期處理工具 - JavaScript的一個重要方面就是它的開放性，我不願意讓新手開發人員從我的工作中學習更難。更不用說重構混淆JavaScript是非常簡單的。

只有一次我需要縮小JavaScript以節省帶寬。在那種情況下，我建立了一個SVN post-commit hook來運行Doug Crockford出色的JSMin。

是否有 工具鏈其他必需的工具（這是特定的 JavaScript開發的瀏覽器 基礎的應用程序;我已經有一個 完美的版本控制系統， bug跟蹤系統等）？

• 的alert()功能;）
• 另外， 一個很好JSON validator是 有用。
• Visual Event對於事件調試
• jsfuzzer有用， 模糊
• 我使用它已經沒有必要，但 是Crosscheck在我的工具箱。

Answer 2

• 編輯：記事本或語法高亮

• IDE任何其他文本編輯器 ：可以的Dreamweaver，集錦， Netbeans的 - 到你的個人喜好 。

• Javascript框架：我更多地使用 jQuery和我仍然推薦 jQuery。
  你可以看看爲jQuery添加一些「插件」。有些非常酷。像Facebox（http://famspam.com/facebox） - 一個簡單易用的jQuery Facebook式彈出框。或jQuery Cookie插件

• 調試：Firebug（FireCookie，頁面速度，YSlow） - 與 IDE沒有集成，但在瀏覽器上很神奇。如果您需要跨瀏覽器調試 ，那麼您的 可以用於Firebug Lite。

  你可以很容易地使用console.log（）來調試，而不是alert（特別是當你用大量的回調函數，定時器，AJAX等來做javascript時，你不希望alert語句打破方式它本來應該

• 後處理：打包機 - http://dean.edwards.name/packer/

Answer 3

我沒有在Javascript編寫的任何巨大的，但（在我最新的項目約3000線），但我做的JSLint我。代碼並將其與我的部署/構建腳本中需要的所有庫進行縮小/組合。我的構建腳本也是如此直接從導入腳本和庫更改HTML，導入生產壓縮代碼。這樣，您不必運行構建腳本即可查看必要的開發變化。

YUI Compressor非常慢，尤其是因爲它啓動JVM運行，但它完成了工作。部署腳本中的某種縮小對於擺脫所有註釋非常重要，如果您避免使用全局變量，您也將獲得大量的標識符名稱長度壓縮，儘管在gzip之後沒有太多好處。可能您需要另一個步驟來刪除console.debug行和其他調試代碼。

用於調試，FireBug。我確定webkit調試器也沒問題。

爲了開發，vim改進了js縮進腳本和ctags以及一些js修改。我不確定真正的IDE有什麼優點，但我確信有一些。默認情況下，Vim不會在JavaScript字符串中對HTML進行語法高亮顯示，但apparently it can be configured to。

JSLint很容易在Rhino中運行，但是spidermonkey的速度要快3倍，因爲它不需要啓動JVM。 Crockford不支持這種安排，但我設法讓它工作。

Answer 4

我在一個稍微不同的技術堆棧（asp.net的MVC），但這裏有雲：

• IDE：Visual Studio 2008的+ ReSharper的，ASP。淨MVC
• 編輯：記事本++（我的大部分時間是在VS，但記事本+ +具有更好的語法高亮顯示的JavaScript）
• 開發瀏覽器：Firefox +螢火蟲+ YSlow的+的PageSpeed + FireCookie 另外補充開發工具欄
• 其他瀏覽器：IE8，Chrome 3，Safari，Opera（很少使用），以及IE6和IE7通過虛擬機（可從Microsoft免費下載的Virtual PC映像）。
• 後處理：JLint和YUI壓縮機。我有一個建立任務做YUI壓縮機部分。
• JavaScript框架：JQuery的+ JQuery用戶界面
• 其他的東西：jQuery驗證，JSON2

Answer 5

• IntelliJ IDEA/RubyMine進行編輯。
• jQuery +插件，因爲它與Ruby的相似性
• 您是否使用任何編譯成JavaScript的語言（GWT，haxe，Objective-J）？
• JSUnit的與藍嶺（Rails的包），但更多地依靠Selenium測試
• 沒有代碼質量工具，而不僅僅是對編程和測試
• 調試與螢火蟲大多是
• 依靠gzip壓縮，從而減少空間
• 創建大量的小型模塊化JS文件
• 使用rails靜態組合並根據需要自動包含這些文件。這是自定義代碼，但我已經對此進行了博客。這樣您就可以讓事情模塊化的發展成長
• 建立相當多的jQuery插件的網站上管理部件

Answer 6

剛開始使用的RubyMine作爲一個JavaScript IDE，純粹是爲了JavaScript的支持，這是非常好的開始。這與IntelliJ IDEA中的相同。

對於調試，Firebug是一個顯而易見的必須具備的，雖然它最近在我看來已經走下坡路了。我傾向於使用日誌記錄而不是調試器，所以我發現它非常有用（儘管我應該指出我寫過它）。我也偶爾使用WebKit的inspector thingy和IE 8的調試器，而Visual Studio的調試器使用早期版本的IE。

對於代碼質量，我手動使用JSLint並偶爾使用JSLint，因爲我不同意它的一些建議。 RubyMine/IntelliJ還具有大量的JS「檢查」，可以在編寫代碼時分析代碼，並在代碼旁邊生成警告，這對我來說很有用。

我傾向於在幾個包含單獨的未定義腳本的開發頁面上開發，並且在創建構建時，我運行一個構建腳本（我自己的，用Ant編寫的）從版本控制中檢查我的代碼，並將各個腳本，刪除記錄和調試調用，縮小/壓縮（使用JSMin或YUICompressor）代碼，並運行單元測試。我的單元測試腳本是我自己的，沒有什麼大作。

它工作得很好，但並不完美。

Answer 7

Google wave is powered by GWT所以它似乎是一個很好的選擇更大的應用程序。

Answer 8

在問這個問題時，Google’s closure compiler沒有爭用。
這是一個非常好的工具，可以比其他許多工具更好地優化JavaScript。您可以使用page speed運行它以分析現有網站。它內置了很多其他功能，比如檢測死代碼，參考等。

Answer 9

我使用Dashcode開發Mac Widgets，並且它「很好」，並且具有很多面向小部件的功能，但對於其他所有功能，TextMate的

Answer 10

網站，所以我想我會提到任何人看到這個問題的一些不錯的現代工具和框架，在2017年

什麼編輯器和編輯器插件/模式/腳本做技術已經沿位移動你用？

Atom是選擇我的文本編輯器，當我在MS生態系統是時，Visual Studio 2013是我用的IDE，雖然我避免VS爲JavaScript開發。儘管我可以盡我所能地只用Atom來做幾乎所有的JavaScript開發。

我有一些公平的插件可以幫助我的工作流程。

• atom-beautify，我用它來清理任何造型問題，我可能會 介紹，它這樣做的儲蓄這麼讓事情容易讓我爲我節省 和簽入常。
• atom-easy-jsdoc它允許我使用 熱鍵組合插入jsdoc註釋，這非常棒，因爲它讓我自動生成 代碼文檔，特別適用於API開發。
• atom-ternjs是我用於JavaScript代碼完成的包，我 不需要這個，但它很方便。
• minimap是一個插件，允許我在特定文檔中查看所有 代碼的低詳細大綱，我發現它比 滾動條更易於使用。因人而異。
• pigments是一個插件，它在CSS文本後面檢測到十六進制顏色 時呈現顏色。如果您需要快速調整並查看 結果，這很有用。

你使用任何類型的IDE（集錦，Dashcode會，等）？

參見:)

JavaScript庫或框架，你用什麼上面？

我傾向於使用RequireJS作爲家庭項目和工作中的內部模塊加載器。我通常不會在我的項目中使用庫和框架，但是當我這樣做時，我對AngularJS（1.x）頗有偏見。這一切都取決於我在做什麼。

您是否使用編譯成JavaScript的任何語言（GWT，haxe，Objective-J）？

沒有。

你使用哪些單元測試框架？你如何援引他們？它們是否可以從您的編輯器/ IDE，命令行，網頁中的 瀏覽器以及JavaScript調試器中調用？

我用Node.js與Karma測試運行的測試運行（who'da咚吧？），Jasmine作爲我的測試框架和sinonJS我的磕碰/嘲諷庫測試開發。

Karma可以配置爲觀察文件系統的變化（或者像文件監視插件一樣的grunt任務運行也可以），並且每次保存文件時我都會執行所有測試。它還能夠同時運行多個瀏覽器的測試。所以它會測試JS對IE，Edge，Chrome，Firefox，PhantomJS等......這是非常有用的。

我有我的js項目設置來運行grunt任務。我通常只是從命令提示符/終端執行'grunt devmode'，就是這樣，我的測試運行。對於持續集成提交，我有一個單獨的grunt任務，只運行一次測試。對於家庭使用，每當推送發生時，我都有TravisCI運行該任務。

您還使用了其他代碼質量工具（JSlint，代碼覆蓋率工具， 或其他類似的工具）？

我使用JSHint，因爲它比JSLint更不挑剔。對於代碼覆蓋範圍，我使用隨着單元測試運行的順便運行的伊斯坦布爾，這非常有用。

你對你的調試環境（Firebug，WebKit inspector等）有什麼用？它是否與編輯器或IDE有任何集成？

我使用任何一個Web瀏覽器都有問題。如果它是服務器端，例如節點，我使用node-debugger，因爲我可以直接從Atom進行調試。

你部署它 （混淆器，minifiers，任何一種優化的）之前對你的代碼運行什麼後處理？

我一般不這樣做，這對於Web項目的理想一個minifier和uglifier說。

您是否有任何類型的工具來管理模塊依賴關係或 動態加載代碼？我正在編寫的應用程序 將使用大量代碼，並且我希望保持 加載時間，因此需要跟蹤需要哪些模塊的工具或按需加載代碼的工具將會有所幫助。

是的！我使用AMD實現的RequireJS。我使用npm作爲我選擇的包管理器，但如果我使用Visual Studio，我將使用nuget。

是否有你的工具鏈其他必需的工具（這是特定的JavaScript開發基於瀏覽器的應用程序 ;我 已經有了一個完美的版本控制系統，bug跟蹤系統， 等）？

不太知道我理解的問題，但我使用Git的產品項目，和TFS在工作中，作爲GitHub的回購我的主人，TravisCI持續集成和工作服（代碼覆蓋率記者Git倉庫）。