前端javascript开发/测试和生产的工作流/工具？

生产中的Web前端javascript应用程序几乎没有“公开”的内容，即声明为全局变量或附加到

窗口

• 所有代码最小化并附加到一个（或几个）js文件中
• 几乎没有“暴露”，即声明为全局变量或附加到

  窗口

不过，在开发过程中，如果代码可读，分为多个文件，并且可以从控制台访问原型和相关实例，那么生活就会更轻松

更清楚地说（撇开最小化不谈，它很容易通过许多不同的工具获得），在生产中，我将有如下内容：

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

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

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

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

(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对象及其实例

（当然，这只是实现这一目标的众多方法之一，但这不是问题的重点）

然而，调试这段代码很困难，而且单元测试是不可能的

为了允许调试和测试，我通常会将Greeter及其实例附加到

窗口

对象或其他对象

因此，在开发过程中，我将使用以下内容：

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

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

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

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

(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();
}());

这样，我就可以对迎宾器进行单元测试，也可以从浏览器的控制台查询它以检查它的状态

---

是否有一个工具，或一组工具，或某种不同的方式来组织我的代码，以便可以从开发版本传递到生产版本（这也将被最小化）？

没有一个单独的软件包或可执行文件可以让您100%地完成安装。您将需要结合编辑器、命令行工具和浏览器来创建有效的web应用程序/javascript开发环境

3.18.13：添加了Sublime Web Inspector的链接。调试升华文本内的Javascript

编辑 要寻找的东西：插件系统、系统突出显示、linting、自动完成。如果您现在使用的是支持插件的编辑器，那么最好的选择就是坚持使用它，并设置linting和语法高亮显示。如果您正在寻找一些建议，以下所有内容都是可靠的选择

• 崇高文本2（免费试用）
• Textmate（商业版，30天试用版）
• VIM（免费）
• Webstorm（商业版，30天试用版）

工作流工具： 我建议从像Yeoman或lineman这样的高级工具集开始。他们有些固执己见，但提供了一个完整的工作流程，可以让您快速完成工作。一旦你习惯了使用它，你就可以在封面下偷看，根据自己的需要挑选和定制它

• Yeoman：提供脚手架、包管理、开发服务器、连接和缩小，并将运行规范

• 线路员：开发服务器、连接和缩小、运行规范

• 咕噜声：更低级（约曼和巡线员都使用）。类似于ruby的rake

• VCS：不可忽视，一个好的基于命令行的VCS是必不可少的。我推荐Git，再次使用您熟悉的开始

浏览器： 浏览器中的开发工具将为您提供控制台和调试工具。花些时间研究并真正了解如何使用浏览器中提供的开发工具。它们非常强大

• Webkit浏览器（Chrome或Safari）：内置开发工具（命令选项J）

• Firefox+firebug

• 浏览器测试：强烈推荐browserstack进行跨浏览器测试

---

没有一个单独的软件包或可执行文件可以让您百分之百地完成安装。您将需要结合编辑器、命令行工具和浏览器来创建有效的web应用程序/javascript开发环境

3.18.13：添加了Sublime Web Inspector的链接。调试升华文本内的Javascript

编辑 要寻找的东西：插件系统、系统突出显示、linting、自动完成。如果您现在使用的是支持插件的编辑器，那么最好的选择就是坚持使用它，并设置linting和语法高亮显示。如果您正在寻找一些建议，以下所有内容都是可靠的选择

• 崇高文本2（免费试用）
• Textmate（商业版，30天试用版）
• VIM（免费）
• Webstorm（商业版，30天试用版）

工作流工具： 我建议从像Yeoman或lineman这样的高级工具集开始。他们有些固执己见，但提供了一个完整的工作流程，可以让您快速完成工作。一旦你习惯了使用它，你就可以在封面下偷看，根据自己的需要挑选和定制它

• Yeoman：提供脚手架、包管理、开发服务器、连接和缩小，并将运行规范

• 线路员：开发服务器、连接和缩小、运行规范

• 咕噜声：更低级（约曼和巡线员都使用）。类似于ruby的rake

• VCS：不可忽视，一个好的基于命令行的VCS是必不可少的。我推荐Git，再次使用您熟悉的开始

浏览器： 浏览器中的开发工具将为您提供控制台和调试工具。花些时间研究并真正了解如何使用浏览器中提供的开发工具。它们非常强大

• Webkit浏览器（Chrome或Safari）：内置开发工具（命令选项J）

• Firefox+firebug

• 浏览器测试：强烈推荐browserstack进行跨浏览器测试

---

嗯，我没有提到编辑器、git和浏览器，因为我认为它们是显而易见的……顺便说一句，崇高文本不是免费软件。它的评估期不会到期，但如果你继续使用它，你必须支付许可证的费用。所以