前端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进行跨浏览器测试。