JavaScript開發工具大全

譯者按: 最全的JavaScript開發工具列表，總有一款適合你！

原文: THE ULTIMATE LIST OF JAVASCRIPT TOOLS

譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。

簡介

2017年1月，Stack Overflow年度開發者調研一共訪問了64000個程序員，發現JavaScript已經連續5年成爲最流行的編程語言。

這篇博客將介紹一些經常使用的JavaScript開發工具：

• 構建&自動化
• IDE&編輯器
• 文檔
• 測試
• 調試
• 安全
• 代碼優化&分析
• 包管理

構建 & 自動化

• Webpack對JavaScript應用依賴的全部模塊進行靜態分析，生成依賴圖，而後將它們打包成數個靜態文件。
• Grunt以將重複耗時的任務自動化。Grunt的生態系統很是大，有超過6010個插件。
• Gulp發佈於Grunt以後，採用了徹底不一樣的方式，使用JavaScript函數定義任務。它有超過2770個插件，而且提供了更好的控制。
• Browserify使得開發者能夠在瀏覽器使用CommonJS模塊。開發者像在node環境同樣，經過require('modules')來組織模塊之間的引用和依賴，Browserify將這些依賴打包成瀏覽器能夠直接引用的JS文件。
• Brunch很是簡單，速度很快。Brunch的配置文件很是簡單，入門文檔很是詳細。Brunch會自動生成Source Map，方便了開發者Debug。
• Yeoman能夠用於任何編程語言(JavaScript, Python, C#, Java, etc.)。它是前端開發的腳手架，有6213個插件。

IDE & 編輯器

• WebStorm是一款強大的JavaScript IDE。它支持多種框架和CSS語言，包括前端，後端，移動端以及桌面應用。WebStorm能夠無縫整合第三方工具，例如構建構建、語法檢查構建linter等等。它提供了代碼補全，實時錯誤監測，導航，內置控制檯，各類插件等一系統功能。
• Atom是GitHub團隊開發的。開發者能夠很容易地對Atom進行自定義。Atom自帶了一個包管理工具，代碼補全，文件系統瀏覽器，支持多個平臺以及其餘有用的功能。
• Visual Studio Code是微軟開發的IDE，支持TypeScript。它提供了代碼補全，語法高亮，支持Git命令等等。另外，它還有很是多的插件。
• Brackets是一個輕量級的開源編輯器。它專一於可視化工具，能夠幫助開發者開發Web應用。Brackets支持實時預覽以及行內編輯。

文檔

• Swagger提供了一系列規則用於描述API。使用Swagger，能夠建立清晰的文檔，而且自動化API相關的操做(例如功能測試)。
• JSDoc能夠根據javascript文件中註釋信息，生成JavaScript應用程序或庫、模塊的API文檔。JSDoc能夠用於管理大型項目。
• jGrouseDoc 是一個開源工具，可根據JavaScript註釋生成相似Jaavdoc 的源碼文檔。它不只能夠爲變量和函數生成文檔，還能夠爲模塊等其餘元素生成文檔。
• YUIDoc基於Nodejs，能夠將文檔中的註釋生成API文檔。它使用相似於Javadoc與Doxygen的語法，而且支持實時預覽，支持各類語言，而且支持標記語言。
• Docco 是免費的文檔工具，由Literate CoffeeScript編寫。它將代碼中的註釋生成HTML文檔。Docco並不限於JavaScript，同時支持Python, Ruby, Clojure等語言。

測試

• Jasmine 是一個行爲驅動開發(BDD)框架，用於測試JavaScript代碼。它不依賴任何第三方模塊，也不須要DOM。它的語法很是簡單易懂，使得編寫測試變得很簡單。另外，它也能夠用於測試Node.js，Python以及Ruby。
• Mocha是一個功能測試框架，用於測試Node.js以及瀏覽器端JavaScript。做爲開發者首選的測試框架，它能夠自由的編寫測試組，提供詳細的測試報告，同時讓異步測試很是簡單。Mocha一般與斷言庫Chai來驗證測試結果。
• PhantomJS用於前端單元測試。因爲PhantomJS是一個無界面的Webkit瀏覽器引擎，與直接使用瀏覽器測試相比，使用PhantomJS腳本能夠運行得更快。它支持各類網頁標準，例如JSON, Canvas, DOM操做, SVG以及CSS選擇器。
• Protractor是一個端到端測試框架，用於測試Angular應用。它是基於WebDriverJS構建的，它能夠經過瀏覽器事件或者原生事件，從而模擬真實用戶，來測試應用。

調試

• JavaScript Debugger由Mozilla Developer Network (MDN)開發，能夠獨立用於調試Node.js代碼，或者用於其餘瀏覽器。Firefox提供了本地和遠程調試功能，而且，Firefox安卓端也用於調試運行在安卓應用。
• Chrome Dev Tools提供了一系列工具，能夠用於調試JavaScript代碼，編輯CSS，以及測試應用性能。
• ng-inspector是Firefox，Chrome和Safari瀏覽器插件，能夠幫助開發者開發、理解以及調試AngularJS應用。它提供了實時更新，DOM高亮等功能。
• Augury是一個Chrome插件，能夠用於調試Angular 2應用。它讓開發者能夠直接查看應用結構，操做特徵以及狀態變化。

安全

• Snyk是一個付費服務，用於發現、修復和預防JavaScript，Node.js和Ruby應用的已知漏洞。Snyk擁有本身的漏洞庫，以及NSP和NIST NVD的漏洞數據。它容許開發者使用它們的補丁和更新來修復這些安全漏洞。
• Node Security Project提供了工具用於掃描依賴來監測漏洞。NSP使用本身的漏洞數據，以及來自NIST NVD的漏洞數據。NSP支持集成GitHub和CI軟件，實時監測和報警，而且能夠提供如何修復Node.js應用漏洞的建議。
• RetireJS是一個開源的依賴監測工具。它包含了多個組件，包括命令行工具，Grunt插件，Firefox和Chrome插件，Burp和OWASP ZAP插件。Retirejs從NIST NVD，漏洞追蹤系統，博客和郵件列表等手機漏洞數據。
• Gemnasium是一個付費工具，不過有免費方案。它支持各類技術，好比Ruby, PHP, Bower, Python和npm。Gemnasium提供不少很是有用的特性，好比自動更新，實時報警以及Slack集成等。
• OSSIndex支持多個生態系統(Java, JavaScript和.NET/C#)，以及多個平臺，例如NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal和MSI。它從NVD以及其餘來源收集漏洞數據。

代碼優化 & 分析

• JSLint是一個Web服務，用於驗證JavaScript的代碼質量。當它診斷到一個問題時，它會返回問題的大體位置和出錯信息。JSLint能夠分析一些編碼規範以及語法錯誤。
• JSHint能夠發現JavaScript中的錯誤以及一些潛在的問題。JSHint是一個靜態代碼分析工具，旨在幫助開發者編寫大型的程序。它能夠診斷語法錯誤、隱形類型轉換等問題，可是它並不能肯定你的應用是否正確、性能是否足夠好、以及是否會發生內存泄漏。 JSHint是JSLint的一個fork。
• ESLint是一個開源診斷工具，用於JSX和JavaScript應用。它能夠幫助開發者發現可疑的或者不符合特定編程規範的代碼。它幫助開發者在沒有執行代碼以前發現JS代碼中問題，節省了很多時間。ESLint由Node.js編寫，可使用NPM安裝。
• Flow是JavaScript代碼靜態類型檢測器，由Facebook開發。Flow能夠在編碼時檢查到類型錯誤並作出提示。

包管理

• Bower是一個用於管理前端依賴的包管理器，Twitter建立。它提供了大量可供使用的依賴包，幫助JavaScript開發者更方便地管理前端依賴的JS庫。
• NPM是node package manager的縮寫，事實上NPM包能夠用於先後端。它是JavaScript包管理系統，也是世界上最大的依賴庫，有超過475,000個模塊。
• Yarn是Facebook, Google, Exponent 和 Tilde 開發的一款新的 JavaScript 包管理工具。與NPM相比，它解決了安全、性能以及一致性問題。
• Duo吸收了Component, Browserify和Go的經驗，致力於簡化大型Web應用的構建過程。

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。
自從2016年雙十一正式上線，Fundebug累計處理了6億+錯誤事件，獲得了Google、360、金山軟件等衆多知名用戶的承認。歡迎免費試用！

 

版權聲明:

轉載時請註明做者Fundebug以及本文地址：
https://blog.fundebug.com/2017/06/19/javascript-tool-list/