前端javascript開發/測試和生產的工作流程/工具？

Question

在生產中的Web前端javascript應用程序幾乎沒有“公開”的東西，也就是聲明為全局var或附加到window 。

• 將所有代碼最小化並附加到一個（或幾個）js文件中；
• 幾乎沒有“公開”，即聲明為全局var或附加到window 。

但是，在開發過程中，如果代碼易於閱讀，分成多個文件，並且可以從控制台訪問原型和相關實例，則生活會更輕松。

更清楚地說（撇開最小化，可以通過許多不同的工具輕松獲得），在生產中，我將得到以下內容：

(function() {
  var Greeter = function() {
  };

  Greeter.prototype.msg = function() {
    return 'Hello, world!';
  };

  Greeter.prototype.greet = function() {
    console.log(this.msg());
  };

  new Greeter().greet();
}());

這樣，我的代碼將在不暴露任何東西的情況下完成其工作：其他代碼都無法訪問Greeter對象或其實例。

（當然，這只是完成此操作的許多方法之一，但這不是問題的重點）。

但是，調試該代碼很困難，並且不可能進行單元測試。

為了同時進行調試和測試，我通常會將Greeter及其實例都附加到window對象或其他一些對象上。

因此，在開發過程中，我將使用類似以下內容的方法：

(function() {
  var Greeter = function() {
  };

  Greeter.prototype.msg = function() {
    return 'Hello, world!';
  };

  Greeter.prototype.greet = function() {
    console.log(this.msg());
  };

  window.Greeter = Greeter;
  window.greeter = new Greeter();

  window.greeter.greet();
}());

這樣，我就可以對Greeter進行單元測試，還可以從瀏覽器的控制台對其進行查詢以檢查其狀態。

是否有一個工具或一組工具，或某種不同的方式來組織我的代碼，以便可以將其從開發版本傳遞到生產版本（還將最小化）？

Answer 1

沒有可以安裝的單個軟件包或可執行文件，可以100％地幫助您解決問題。 您將需要結合使用編輯器，命令行工具和瀏覽器來創建有效的Web應用程序/ JavaScript開發環境。

3.18.13：添加了Sublime Web Inspector的鏈接。 在Sublime Text內調試Javascript！ http://sokolovstas.github.com/SublimeWebInspector/

編輯

需要尋找的東西：插件系統，系統突出顯示，整理，自動完成。 如果您今天使用的是支持插件的編輯器，那么最好的選擇就是堅持使用它，並設置linting和語法突出顯示。 如果您正在尋找一些建議，則以下所有選項都是不錯的選擇。

• Sublime Text 2（免費試用）
• Textmate（30天試用版）
• VIM（免費）
• Webstorm（商業版，30天試用版）

工作流程工具：

我建議從高級工具集（如Yeoman或Lineman）開始。 他們有些固執己見，但提供了完整的工作流程，可讓您快速完成工作。 一旦您習慣使用它，就可以在底下窺視並根據需要選擇和自定義它。

• Yeoman：提供腳手架，程序包管理，開發服務器，連接和縮小，並將運行規格

• 線人：開發服務器，連接並縮小，運行規格

• 咕unt聲：較低級別（由Yeoman和Lineman共同使用）。 類似於紅寶石的耙子

• VCS：不容忽視，基於命令行的良好VCS是必不可少的。 我推薦Git，再次使用您熟悉的內容開始。

瀏覽器：

瀏覽器中的開發工具將為您提供控制台和調試工具。 花一些時間研究並真正了解如何使用瀏覽器中提供的開發工具。 他們非常強大。

• Webkit瀏覽器（Chrome或Safari）：內置開發人員工具（命令選項J）。

• Firefox +螢火蟲

• 瀏覽器測試：強烈建議使用browserstack進行跨瀏覽器測試。