你的 JavaScript 工具链中有啥？ [关闭]

Posted 2023-02-22

【中文标题】你的 JavaScript 工具链中有啥？ [关闭]

【英文标题】：What is in your JavaScript toolchain? [closed]你的 JavaScript 工具链中有什么？ [关闭]

【发布时间】：2010-12-01 14:22:36

【问题描述】：

我希望开始用 javascript 编写一个复杂的应用程序以在 Web 上运行。我以前用 JavaScript 写过一些一次性代码，直接使用 DOM 和一些 jQuery。但这是我第一次希望编写一个在浏览器中运行的成熟应用程序。

所以，我想知道人们更喜欢用什么工具链来用 JavaScript 进行严肃的开发。特别是，我对以下内容以及有关您选择所做组件的原因以及它们如何融入您的工作流程的一些信息感兴趣：

您使用什么编辑器和编辑器插件/模式/脚本？我通常是 Emacs 用户，目前正在使用 js2.el，但我有兴趣了解其他设置。 您是否使用任何类型的 IDE（Aptana、Dashcode 等）？ 您使用哪些 JavaScript 库或框架？ 您是否使用任何编译为 JavaScript 的语言（GWT、haxe、Objective-J）？ 您使用哪些单元测试框架？你如何调用它们？是否可以从您的编辑器/IDE、命令行、网页中的浏览器、JavaScript 调试器调用它们？ 您使用哪些自动化用户界面测试工具（例如 Selenium、Watir、Sahi）？同样，如何调用这些？ （能够从命令行调用单元测试和接口测试对于运行构建机器人非常有用） 您还使用哪些其他代码质量工具（JSlint、代码覆盖率工具或类似工具）？ 您在调试环境中使用什么（Firebug、WebKit 检查器等）？它是否与您的编辑器或 IDE 集成？ 在部署代码之前，您会对代码进行哪些后处理（混淆器、压缩器、任何类型的优化器）？ 您是否有任何工具来管理模块依赖关系或根据需要动态加载代码？我正在编写的应用程序将使用大量代码，并且我希望缩短加载时间，因此用于跟踪所需模块或按需加载代码的工具会很有帮助。 您的工具链中是否还有其他必要工具（专门针对基于浏览器的应用程序的 JavaScript 开发；我已经拥有完美的版本控制系统、错误跟踪器等）？

我对“这里有很多你可以使用的东西”的列表不太感兴趣（我知道很多可用的工具），更多的是你在实践中实际使用的堆栈以及如何使用这一切都融合在一起。我希望主要将其开发为客户端应用程序，服务器仅用于身份验证以及存储和检索数据，因此我对您使用的服务器端框架不感兴趣，除非它是客户端不可或缺的以某种方式附带代码。

编辑：我对单元和用户界面测试框架以及如何自动化它们特别感兴趣。我更喜欢能够从命令行运行一个“make test”或“rake test”任务来运行项目的所有测试，并让它根据测试的成功或失败返回一个状态。这将使与 buildbots 的集成变得更加容易。另外，如果有人为不依赖于浏览器的代码编写可以在浏览器之外（在 Rhino、spidermonkey、v8 等中）运行的单元测试，我很感兴趣，以便在您的子集上更快地周转测试。

【参考方案1】：

编辑器：记事本或任何其他文本 语法高亮编辑器

IDE：可以是 Dreamweaver、Aptana、 Netbeans - 取决于您的个人 偏好。

Javascript 框架：我比较习惯 到 jQuery，我仍然推荐 jQuery. 您可以考虑向 jQuery 添加一些“插件”。有些真的很酷。 like Facebox (http://famspam.com/facebox) - 一个类似 jQuery Facebook 的弹出框，易于使用。或 jQuery Cookie 插件

调试：Firebug（FireCookie、Page 速度，YSlow) - 没有集成 IDE，但在浏览器上很神奇。如果 你需要跨浏览器调试，你 可以选择 Firebug Lite。

您可以轻松地使用 console.log() 来调试而不是警报（尤其是当您使用大量回调、计时器、AJAX 等进行 JavaScript 时。您不希望警报语句破坏它的方式本来应该是的。

后处理：Packer - http://dean.edwards.name/packer/

【讨论】：

您使用过这些 IDE 吗？还是记事本？正如我所说，我想知道您实际使用什么，而不是我可以使用什么。感谢您提到其他工具，我会研究一下。

记事本和 Dreamweaver？你是认真的吗？

是的，我实际上使用它们。我对记事本很认真。我能够在记事本中编码网站（完成和单手）。我不习惯 IDE。因此，记住（或参考）手册对我来说很重要。

@Brian - 是的，我使用 Netbeans 进行 JSP 和 Java 开发。它非常用户友好，允许您使用多种语言进行开发。您可以将它简单地用于 html+JS。我在学校工作期间使用过 Dreamweaver，之前在一个项目中使用过 Aptana。

【参考方案2】：

我还没有用 Javascript 写过任何大的东西（在我的最新项目中大约有 3000 行），但是我对我的代码进行了 JSLint 并将其与我在部署/构建脚本中需要的所有库进行缩小/组合。我的构建脚本还将 HTML 从直接导入脚本和库更改为导入生产压缩代码。这样您就不必运行构建脚本来查看必不可少的开发变化。

YUI Compressor 非常慢，特别是因为它启动了 JVM 以运行，但它完成了工作。部署脚本中的某种缩小对于摆脱所有 cmets 至关重要，如果您避免使用全局变量，您也将获得大量标识符名称长度压缩，尽管在 gzip 之后没有太大好处。可能您需要另一个步骤来删除 console.debug 行和其他调试代码。

对于调试，FireBug。我相信 webkit 调试器也很好。

对于开发，vim 带有改进的 js 缩进脚本和带有一些 js 修改的 ctags。我不确定真正的 IDE 有什么优势，但我敢肯定有一些优势。默认情况下，Vim 不对 javascript 字符串中的 HTML 进行语法高亮，但 apparently it can be configured to.

JSLint 很容易在 Rhino 中运行，但是 spidermonkey 的运行速度大约是 3 倍，因为它不需要启动 JVM。 Crockford 不支持这种安排，但我设法让它发挥作用。

【讨论】：

感谢您的提示！我很好奇您用于构建/部署脚本的内容；它是通用的，还是只是你自己做的？

它是 bash 和 python 的混合体，没什么特别的。

【参考方案3】：

我在一个稍微不同的技术堆栈（asp.net mvc）上，但它是这样的：

IDE：Visual Studio 2008 + ReSharper、Asp.Net MVC 编辑：Notepad++（我大部分时间都在VS，但Notepad++对JavaScript有更好的语法高亮） 开发浏览器：FireFox+Firebug+YSlow+PageSpeed+FireCookie 同时添加开发者工具栏 其他浏览器：IE8、Chrome 3、Safari、Opera（很少使用）以及通过虚拟机（可从 Microsoft 免费下载的 Virtual PC 映像）的 IE6 和 IE7。 后处理：JLint 和 YUI 压缩器。我有一个构建任务来完成 YUI 压缩器部分。 JavaScript 框架：JQuery + JQuery UI 其他内容：JQuery 验证、JSON2

【讨论】：

谢谢！拥有不同的技术堆栈没有问题；我确实将 Visual Studio 用于我的 Windows C++ 开发，所以我很熟悉它，这个问题也意味着对其他正在寻找工具链的人有用。感谢您的回答！

【参考方案4】：

什么编辑器和编辑器 你使用插件/模式/脚本吗？我是 通常是 Emacs 用户，并且正在使用 js2.el 目前，但我 有兴趣了解其他 设置。

我通常使用Textmate（与JavaScript、jQuery 和Prototype 捆绑包一起使用）。在进行繁重的前端开发时，我会在 HTML、CSS 和 JavaScript 文件之间快速切换，我会选择 vim 的拆分面板视图。这样做时，我会使用 macvim 或 Terminal + Visor，这取决于我的心情。显然，我是 Mac 用户。

您是否使用任何类型的 IDE（Aptana、 Dashcode 等）？

没有。我曾经使用Coda，但它的文本编辑器功能还有很多不足之处。我也玩过Espresso，这很有趣……但是嗯。

什么 JavaScript 库或 你使用的框架？

我同时使用jQuery 和Prototype，这取决于项目的需要。为了说明各个框架的优势，我喜欢将 jQuery 称为 DOM 操作框架，将 Prototype 称为 脚本框架。因此，我倾向于在专注于标记的项目上使用 jQuery，而在脚本较多的应用程序类型项目上使用 Prototype。

您使用的任何语言 编译成 JavaScript (GWT, haxe, 目标-J)？

绝对不是——我对这样的框架有哲学上的不满。与服务器端代码不同，前端代码在用户的浏览器中运行，在您无法控制的环境中。因此，我认为生成可能的最佳代码是 JavaScript 开发人员的责任。次优代码可能会对性能产生影响，而由 Objective-J 等语言编译的 JavaScript（这是您列表中我使用过的唯一一种）永远不会像强大的 JavaScript 开发人员生成的代码那样紧凑。

您使用哪些单元测试框架？ 你如何调用它们？他们可以吗 从您的编辑器/IDE 调用，从 命令行，从浏览器中的 网页，来自您的 JavaScript 调试器？

我是 jQuery 单元测试框架 QUnit 的忠实粉丝。道场的DOH Unit Testing也不错。

不要错过FireUnit，这是一个用于单元测试的漂亮 Firebug 扩展。

另见Razor。

什么是自动化用户界面测试 您使用的工具（例如 Selenium、 瓦蒂尔，萨希）？再说一遍，这些怎么可能 被调用？ （能够调用单元 测试和接口测试 命令行将非常有用，因为 运行构建机器人）

必要时我会使用Selenium，但这种情况很少见。

您还使用哪些其他代码质量工具（JSlint、代码覆盖率工具、 或类似的东西）？

我使用并喜欢JSLint。

Firebug 有一个不错的code coverage extension，而HRCov 被广泛认为是同类中最好的。在我的大部分日常 JavaScript 工作中，我发现代码覆盖率没有多大用处。

你用什么来调试 环境（萤火虫，WebKit 检查员等）？有没有 与您的编辑器或 IDE 集成？

就我而言，Firebug 是 JavaScript 开发的杀手级应用。一些有用的调试功能：

可变工具提示 断点和条件断点 性能分析器 一个非常漂亮的console API 观察表达式 堆栈跟踪 有用的插件，例如 Jiffy、FireCookie 和 FireQuery。

WebKit Inspector 很不错，DragonFly 和 Debug Bar 对追踪 IE 错误很有用...但 FireBug 适合我。

您使用什么后处理 部署之前的代码 （混淆器，缩小器，任何类型的 优化器）？

我有意不使用任何后处理工具——JavaScript 的一大优点是它的开放性，我不想让初出茅庐的 JavaScript 开发人员更难从我的工作中学习。更不用说重构混淆的 JavaScript 非常简单。

只有一个实例我需要缩小 JavaScript 以节省带宽。在这种情况下，我设置了一个 SVN post-commit hook 来运行 Doug Crockford 的出色 JSMin。

还有其他必要的工具吗？ 您的工具链（特定于 浏览器的 JavaScript 开发 基于应用程序；我已经有一个 完美的版本控制系统， 错误跟踪器等）？

alert() 函数 ;) 另外， 一个不错的JSON validator 是 有用。 Visual Event 对事件调试很有用 jsfuzzer，为 模糊测试 我不需要使用它， 但Crosscheck 在我的工具包中。

【讨论】：

很好的答案！很多有用的信息。一些cmets：“由Objective-J之类的语言编译的JavaScript永远不会像强大的JavaScript开发人员生成的代码那样紧凑”——听起来像是汇编程序员对高级语言的摒弃。我听说 GWT 做了一些相当令人印象深刻的优化，而这些优化是手工很难做到的。 “我不希望让初出茅庐的 JavaScript 开发人员更难从我的工作中学习”——我和你在一起，但我们可能会得到很多代码，所以可能需要缩小（以及代码将是开源的）。

汇编器类比不一定是公平的，因为您总是可以指望在同一环境中运行的汇编抽象。可以运行相同 JavaScript 代码的可能环境（浏览器/渲染引擎/平台）的数量是巨大的。对开源您的工作表示赞赏，很高兴听到。如果您确实需要缩小，我建议您按照我在回答中的建议将您的 JavaScript 缩小为提交后挂钩。

截至 2011 年 2 月，有一个有趣的 JSLint 分支，引起了 JS 社区的一些兴趣：jshint.com

“DOH 单元测试”链接已失效。新链接是：dojotoolkit.org/reference-guide/util/doh.html

“交叉检查”链接已失效。新链接是：sourceforge.net/projects/crosscheck

【参考方案5】：

用于编辑的 IntelliJ IDEA/RubyMine。 jQuery + Plugins 因为它与 Ruby 相似 您是否使用任何编译为 JavaScript 的语言（GWT、haxe、Objective-J）？ 带有 Blue Ridge（Rails 包）的 JSUnit，但更多地依赖于 Selenium 测试 除了结对编程和测试之外，没有任何代码质量工具 主要使用 Firebug 进行调试 依靠 gzip 压缩来减少空间 创建大量小的模块化 JS 文件 使用 rails 静态组合并根据需要自动包含这些文件。这是自定义代码，但我在博客上写过。这使您可以在开发过程中保持模块化 构建了很多 jQuery 插件来管理站点上的小部件

【参考方案6】：

刚开始使用 RubyMine 作为 JavaScript IDE，纯粹是为了 JavaScript 支持，非常好。与 IntelliJ IDEA 中的相同。

对于调试，Firebug 显然是必不可少的，尽管在我看来它最近有点走下坡路。我倾向于使用日志记录而不是调试器，所以我发现 log4javascript 非常有用（尽管我应该指出我确实编写了它）。我偶尔也会使用 WebKit 的检查器和 IE 8 的调试器，以及 Visual Studio 的调试器和早期版本的 IE。

为了代码质量，我偶尔会手动使用 JSLint，因为我不同意它的一些建议。 RubyMine/IntelliJ 也有大量的 JS“检查”，可以在你编写代码时分析你的代码，并在你的代码旁边生成警告，我觉得这很有用。

我倾向于在几个开发页面上进行开发，其中包括单独的、未缩小的脚本，并且在创建构建时，我运行一个构建脚本（我自己的，用 Ant 编写），从版本控制中检查我的代码，连接各个脚本，删除日志记录和调试调用，缩小/压缩（使用 JSMin 或 YUICompressor）代码，并运行单元测试。我的单元测试脚本是我自己的，没什么特别花哨的。

它工作得相当好，但并不完美。

【参考方案7】：

Google wave is powered by GWT 所以它对于更大的应用来说似乎是一个不错的选择。

【讨论】：

直到您真正尝试使用不引人注目的方法编写应用程序。

【参考方案8】：

在提出这个问题时，Google’s closure compiler 并不存在争议。 这是一个非常好的工具，可以比其他许多工具更好地最小化 JavaScript。您可以使用page speed 运行它来分析现有网站。它内置了许多其他功能，例如检测死代码、引用等。

【讨论】：

在闭包库以外的库上表现如何？我最后一次听说，它在 jQuery 上运行时有一些错误。这当然是一项相当不错的技术。比一般的最小化器要好得多。

已修复，待集成code.google.com/p/closure-compiler/issues/…

【参考方案9】：

我使用 Dashcode 来开发 Mac 小部件，因此它“还可以”并且有很多面向小部件的功能，但对于其他一切，TextMate

【参考方案10】：

Web 技术已经取得了一些进展，所以我想我会为 2017 年看到这个问题的任何人提一些不错的现代工具和框架。

您使用什么编辑器和编辑器插件/模式/脚本？

Atom 是我选择的文本编辑器，因为我在 MS 生态系统中，Visual Studio 2013 是我使用的 IDE，尽管我避免使用 VS 进行 JavaScript 开发。我几乎所有的 JavaScript 开发都是用 Atom 来完成的。

我有一些插件可以帮助我的工作流程。

atom-beautify 我用来清理可能出现的任何样式问题 介绍一下，它会在保存时执行此操作，因此在我保存时对我来说很容易 并经常入住。 atom-easy-jsdoc 允许我使用 热键组合，这很棒，因为它可以让我自动生成 代码文档，对 API 开发特别有用。 atom-ternjs 是我用来完成 JavaScript 代码的包，我 不经常需要这个，但它很方便。 minimap 是一个插件，可以让我看到所有的低细节轮廓 特定文档中的代码，我发现它比使用更容易 滚动条。 YMMV。 pigments 是一个在检测到十六进制颜色时呈现颜色的插件 在 CSS 文本后面。如果您需要调整并查看 结果很快。

您是否使用任何类型的 IDE（Aptana、Dashcode 等）？

见上文:)

您使用哪些 JavaScript 库或框架？

我倾向于将 RequireJS 用于家庭项目和工作中的内部模块加载器。我通常不在我的项目中使用库和框架，但当我这样做时，我非常偏爱 AngularJS (1.x)。这一切都取决于我在做什么。

您是否使用任何编译成 JavaScript 的语言（GWT、haxe、 目标-J)？

没有。

您使用哪些单元测试框架？你如何调用它们？他们能 从您的编辑器/IDE、命令行、 网页中的浏览器，来自您的 JavaScript 调试器？

我使用 Node.js 和 Karma 测试运行器作为测试运行器（谁知道呢？），Jasmine 作为我的测试框架，sinonJS 作为我的存根/模拟库用于测试开发。

Karma 可以配置为监视文件系统的变化（或者像 grunt 这样带有文件监视插件的任务运行器也可以工作），我让它在每次保存文件时执行我的所有测试。它的额外好处是能够同时针对多个浏览器运行测试。所以它会针对 IE、Edge、Chrome、Firefox、PhantomJS 等测试 JS……这非常有用。

我设置了我的 js 项目来运行 grunt 任务。我通常只是从命令提示符/终端执行“grunt devmode”，就是这样，我的测试运行了。对于提交时的持续集成，我有一个单独的 grunt 任务，它只运行一次测试。对于家庭使用，每当推送发生时，我都会让 TravisCI 运行该任务。

您还使用哪些其他代码质量工具（JSlint、代码覆盖率工具、 或类似的东西）？

我使用 JSHint，因为它没有 JSLint 那么挑剔。对于代码覆盖率，我使用了 Istanbul，它会在我的单元测试运行时偶然运行，这非常有用。

你使用什么调试环境（Firebug、WebKit 检查员等）？它是否与您的编辑器或 IDE 集成？

我使用有问题的网络浏览器。如果是服务器端，例如Node，我使用node-debugger，因为我可以直接从 Atom 调试。

在部署代码之前，您会对代码进行哪些后处理 （混淆器、压缩器、任何类型的优化器）？

我通常不这样做，这对网络项目来说是一个理想的缩小器和丑化器。

您是否有任何类型的工具来管理模块依赖关系或 根据需要动态加载代码？我正在编写的应用程序 将使用大量代码，我想保留 加载时间减少，因此用于跟踪需要哪些模块的工具或 按需加载代码会很有帮助。

是的！我使用RequireJS AMD 实现。我使用 npm 作为我选择的包管理器，但如果我使用 Visual Studio，我将使用 nuget。

您的工具链中是否还有其他重要工具（包括 专门针对基于浏览器的应用程序的 JavaScript 开发；一世 已经有一个完美的版本控制系统，错误跟踪器， 等）？

不太确定我是否理解这个问题，但我将 Git 用于家庭项目，并在工作中使用 TFS，GitHub 作为我的存储库主机，TravisCI 用于持续集成和 Coveralls（Git 存储库的代码覆盖率报告器）。

【参考方案11】：

我倾向于保留的唯一东西是 jQuery 以便于 DOM 操作，但这不是必需的。我不依赖任何框架或其他任何东西；如果我需要写一些东西，我只需在 vim 或我可用的任何文本编辑器中编写它（因为我认为 IDE 适合懒惰的人或公司/企业环境中的人）。如果我需要使用一个框架，我会出去寻找一个，无论我碰巧有什么目的。但归根结底，我只写 Javascript。我不专注于任何框架，因为它们最终都会成为旧闻。只知道 dang 语言是如何工作的，并且能够在任何上下文或情况下工作，无论有没有框架或库来一直握着你的手，这会更强大。