JavaScript開發工具大全

Fundebug發表於2017-06-26

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

為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用於學習。

簡介

2017年1月,Stack Overflow年度開發者調研一共訪問了64000個程式設計師,發現JavaScript已經連續5年成為最流行的程式語言。

javascript_popularity_stackoverflow_report_2017.png

這篇部落格將介紹一些常用的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擁有自己的漏洞庫,以及NSPNIST 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庫。
  • NPMnode package manager的縮寫,事實上NPM包可以用於前後端。它是JavaScript包管理系統,也是世界上最大的依賴庫,有超過475,000個模組。
  • Yarn是Facebook, Google, Exponent 和 Tilde 開發的一款新的 JavaScript 包管理工具。與NPM相比,它解決了安全、效能以及一致性問題。
  • Duo吸取了Component, BrowserifyGo的經驗,致力於簡化大型Web應用的構建過程。

關於Fundebug

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

JavaScript開發工具大全

版權宣告

轉載時請註明作者Fundebug以及本文地址:
blog.fundebug.com/2017/06/19/…

相關文章