2015 年末必備前端工具集

歡迎分享 ： http://toutiao.io/contribute

“Javascript沒法勝任大型應用，因為它甚至不能確定一個變量的類型，而且很難重構”~一大堆困惑的人

當我初識Javascript的時候，只有一種瀏覽器需要關心：NetScape。它在微軟開始捆綁銷售IE和操作系統之前完全統治了世界。在那些日子里，Javascript的開發者工具很弱這種觀點的確是對的。

不過這個觀點已經被推翻很久了，今天，Javascript已經擁有了在我見過的所有語言中最好的開發工具生態系統。

請注意，我沒有說“最好的IDE”。如果你正在尋找一款統一了不同開發工具使用體驗的集成式IDE，請試試為C#打造的微軟Visual Studio，和Unity一起使用風味更佳。雖然我本人并沒有使用過，但是聽我信任的人說這很靠譜。

我用過C++和虛幻引擎。當我第一次試用的時候，我意識到web平臺的開發工具仍然有很長的路要走。

不過我們已經走過了很長一段路，現在我們在JS中使用的工具讓IDE神奇的自動補全看起來就像是 小孩的玩具。尤為是JavaScript的運行時工具，在我見過的所有其他語言中都沒有對手。

什么是開發者工具？

開發者工具是一套讓開發者更輕松的軟件集合。傳統上，我們主要將IDE，linter，編譯器，調試器，和性能分析器認為是開發者工具。

不過JavaScript是一種動態語言，伴隨它的動態特性而來的是對運行時開發者工具的需求。JavaScript對此的需求程度很高。

為了實現我寫這篇文章的初衷，我將包括對運行時工具的介紹，甚至包括一些能提升運行時開發者工具可視化和調試體驗的庫。開發工具與庫之間的界線將開始模糊。與之而來的將是令人震驚的結果。

開發者工具一覽表

• Atom &  atom-ternjs

• Chrome Dev Tools

• PageSpeed Insights

• FireFox Developer Edition

• BrowserSync

• TraceGL

• ironNode

• ESLint

• rtype (規范) &  rfx (庫)  提示: 這些是未完成的開發預覽版

• Babel

• Greenkeeper.io &  updtr

• React

• Webpack +  Hot module replacement

• Redux +  Redux DevTools

關于這些工具

你的開發者生涯將圍繞著這兩個東西展開： 編輯器 ，和你的 運行環境 （比如，瀏覽器，平臺，和你代碼的目標設備）

編輯器：我是用著像Borland IDE，微軟Visual Studio，Eclipse和WebStorm這樣的大型，重量級，高度集成的IDE開始我的職業生涯的。我認為這些IDE中最好的是 WebStorm 和  Visual Studio 。

但是我對這些IDE體積的膨脹感到厭倦，所以在最近幾年里，我的代碼都是在更精簡的編輯器中寫成的。主要是Sublime Text，不過我最近切換到了 Atom [1] 。你一定會需要 atom-ternjs[2] 來啟用JavaScript智能感知特性。你可能也會對Visual Studio Code感興趣。這是一個簡約版Visual Studio，專為喜歡像Sublime Text和Atom這樣的小型可拓展編輯器的人打造。

我也使用vim在終端里進行快速編輯。

調試器：在我開始web編程之旅時，我想念那些集成的調試器。不過Chrome和FireFox團隊將運行時調試提升到了一個全新的水準。今天似乎每個人都聽說過Chrome DevTools，并且知道如何逐步調試代碼。不過你知道它有對性能及內存進行記錄和審查（profiling and auditing）的高級特性嗎？你用過flame charts或者the dominators view嗎？

說到性能審查，你需要了解 PageSpeed Insights[3] :

在這些好東西之上，Chrome DevTools也有一些酷炫的特性，比如像CSS實時編輯，以及可以幫助你編輯動畫的超酷特性。去了解Chrome DevTools吧，你不會后悔的。

為了不被超過，FireFox有一個專為開發者打造的瀏覽器 FireFox Developer Edition[4] :

BrowserSync: BrowserSync[5] 可以一次同時控制幾個瀏覽器，這是檢測你的響應式布局的一種好辦法。換句話說，你可以使用BrowserSync CLI來在桌面，平板和手機上打開你的app。

你可以設定文件監視（watch files），然后當文件改動時，幾個同步的瀏覽器會自動刷新。滾動，點擊，以及表單互動這些動作都將會被同步到所有設備，所有你可以簡單的測試你的app的工作流，確保事情在任何設備上都看起來都對勁。

TraceGL: TraceGL[6] 是一個運行時調試工具，它讓你可以觀察軟件中實時發生的所有函數調用，而不是逐步手動調試你的代碼，一次一步。這個是一個超級強大和有用的功能。

ironNode: ironNode[7] 是一個用于調試Node的桌面app。由Electron，一個桌面跨平臺運行時驅動。Electron也驅動了Atom編輯器。就像node-inspector，ironNode允許你使用類似Chrome DevTools的特性來追蹤你的代碼。

將ironNode和Babel一起使用，我使用如下的 debug.js 腳本：

require('babel-core/register');  
require('./index');

加載調試器：

iron-node source/debug.js

這就像魔法一樣，不是嗎？

Linting: ESLint[8] 是目前為止我用過的各種語言的linter中最好的。我喜歡ESLint甚于JSHint，ESLint比JSHint好太多了。如果你不確定使用什么，別擔心，使用ESLint。為什么它這么酷呢？

• 可配置性高 - 每一個選項都可以被開啟或關閉。這些選項甚至可以接收參數。

• 創造你自己的規則。你有你想要在你的團隊中強制執行的代碼規范嗎？在linter中可能已經有了這樣的規則，不過如果沒有，你可以寫你自己的規則。

• 支持插件 - 使用了某些特殊語法？ES6+或者未來版本JavaScript的實驗性特性？沒問題。使用了React的JSX語法打造簡潔的UI組件？沒問題。使用了你自己的實驗性JavaScript語法拓展？沒問題。

類型支持：JavaScript具有松散的類型，這意味著你不必注解所有的類型。過去數年我在C++和Java這樣的語言中注解所有東西。當我開始使用JavaScript之后，我感到如釋重負。類型注解在你的源文件中制造了雜音。函數通常在沒有類型注解時更易用。

和大眾認知相反， JavaScript是有類型的 ，但是JavaScript在 值 層面區別類型而不是變量層面。變量類型可以被類型推斷識別并預測出來（這就是Atom TernJS插件的作用）。

這就是說，類型注解和簽名（signature）聲明是為了一個目的：它們對于開發者來說是不錯的文檔。它們也使JavaScript引擎以及編譯器作者的一些重要性能優化成為可能。作為一個構建app的JavaScript程序員，你不應該擔心性能問題。把這些留給引擎和制定規范的團隊吧。

不過關于類型注解我最喜歡的一點是運行時類型反射。使用類型反射可以開啟運行時開發者工具。想知道這樣的工具是什么樣的，請閱讀 “The Future of Programming: WebAssembly and Life After JavaScript”[9] 。

數年來，我使用JSDoc來注解類型，編寫文檔以及類型推斷。不過我對其麻煩的限制感到厭倦。這感覺就像你使用一種不同的語言編寫代碼，之后將它擠壓成JavaScript（這是真的）。

我也對TypeScript的結構化類型方案感到印象深刻。

不過TypeScript存在一些問題：

• TypeScript不是標準的JavaScript - 選擇TypeScript意味著選擇TypeScript編譯器以及工具生態 - 這通常導致你無法選擇為JavaScript標準設計的方案。

• TypeScript很大程度上基于class。這與JavaScript的原型和對象組合特性八字不合。

• 目前為止，TypeScript不提供運行時解決方案… - 他們正在使用實驗性的新JavaScript Reflect API構建。不過接下來你可能會依靠這些實驗性極高的規范特性，這些特性也許會成為最終標準，也許不會。

因為這些，我啟動了（目前還未完成） rtype[10] 和 rfx[11] 項目。 rtype 是一個函數和接口反射規范，對于了解JavaScript的讀者來說，這一規范形成了不言自明的文檔。 rfx 是一個用于封裝已經存在的JS函數及對象然后添加類型元數據的庫。同時，它也可以加入自動運行時類型檢查。我正在積極的與人們合作以改進rtype和rfx。也歡迎你們的貢獻。

你要記得rtype和rfx還非常年輕，并且在短期之內幾乎必定會有革命性的變化。

Babel: Babel[12] 是一個讓你立即在JavaScript代碼中使用還不被支持的ES6+, JSX以及其他特性的編譯器。它的原理是將你的代碼翻譯成等價的ES5代碼。一旦你開始使用它，我敢說你將很快對新語法上癮，因為ES6為這門語言提供了一些真正有價值的語法拓展，像解構賦值（destructuring assignment），默認參數值，剩余和展開參數（rest parameters and spread），簡潔對象字面量（concise object literals），以及更多… 閱讀 “How to Use ES6 for Universal JavaScript Apps”[13] 來了解細節。

Greenkeeper.io: Greenkeeper[14] 監控你的項目依賴并且自動向你的項目提交一個pull request。你要確保你已經設定了CI解決方案來自動測試pull requests。如果測試通過，只要點擊“merge”，就完工了。如果測試失敗，你可以手動跟進并且找出哪里需要修復，或者直接關閉PR。

如果你偏愛手動的方法，看看 updtr [15] 。在你第一次開啟Greenkeeper之前，我推薦先在你的項目上運行updtr。

Webpack: Webpack[16] 將模塊和依賴打包成瀏覽器可用的靜態資源。它支持大量有趣的特性，比如模塊熱替換，這讓你正在為瀏覽器編寫的代碼在文件更改時自動更新，而不用刷新頁面。模塊熱替換是邁向真正持續實時開發反饋循環的第一步。如果你還沒有使用webpack，你應該使用它。為了更快入門，看看 Universal React Boilerplate [17] 這個項目里的webpack配置。

React:這一個有一點跑題，因為 React[18] 嚴格意義上來說不是一個開發者工具。它和一個UI庫有著更多的共同點。請把React想象成現代的jQuery：一種更簡單的處理DOM的辦法。但React比這更強大。事實上，你可以把React對準一大堆DOM之外的平臺，包括原生移動UI APIs(iOS & Android)，WebGL, canvas以及更多。Netflix將React的目標平臺設為了他們自己的Gibbon TV設備渲染API。

所以為什么我將React列在開發者工具之中？因為React的抽象層被一些不錯的開發者工具使用，來驅動代表未來趨勢的驚人工具。特性有熱加載（更新你的實時運行代碼而不刷新頁面），時間旅行（time travel），以及更多… 繼續閱讀！

Redux + Redux DevTools:Redux是由React/Flux架構和函數式編程的純函數概念啟發而來的一個應用狀態管理庫。另一個在開發者工具列表中的庫？是的，以下是原因：

Redux以及Redux DevTools使得在你的實時運行代碼之上進行真正的下一代調試互動成為可能。這讓你可以輕松洞察在你的app中已經發生的行為：

它甚至允許你使用時間旅行調試這個特性在時間中來回穿梭。這是它在滾動視圖中看起來的樣子：

結論

JavaScript有著我所見過的所有語言中最豐富的開發者工具集。你可以看到，這更像是一個拼湊的過程而不是一個統一的IDE環境。不過我們處于JavaScript開發的寒武紀大爆炸時期，在未來，我們也許會看到現成的統一集成開發者工具。與此同時，我們將一瞥編程未來走向的究竟。

隨著JavaScript向統一的應用狀態（unified application state）和不變性（immutability）（正是這個特性使得Redux DevTools的時間旅行調試成為了可能）的更深處推進，我預測我們將看到更多的實時編程特性上線。

我也相信我們構建的應用和我們用以構建它的開發環境之間的界線會隨著時間消逝而漸漸模糊。舉個例子，Unreal游戲引擎將藍圖編輯集成進了引擎自身，這允許開發者和設計師從運行的游戲中構建復雜的行為。我思考了很久，我們將開始看到這些特性出現在web和以及原生移動應用中。

JavaScript的linting，運行時監視（runtime monitoring）和時間旅行調試特性在我所知道的任何語言中都沒有對手。但我們還可以做更多，比如將同等于Unreal 4引擎中的藍圖系統這樣的工具帶給我們。我迫不及待的想看接下來會發生什么。

更多優質內容，歡迎安裝、使用《開發者頭條》iOS、Android 客戶端。

體驗地址 ： http://toutiao.io/download

:arrow_down::arrow_down::arrow_down: