使用CommonJS结构的Backbone.js应用程序，以与node.js和客户端一起工作

Question

我正在寻找一种使用CommonJS结构编写BackboneJS应用程序的方法，该结构允许JavaScript模块被要求。然后，该应用程序可以在客户端或服务器端上使用node工作。

我已经研究了requirejs和其他类似选项，但必须以特定方式编写应用程序，我认为这看起来真的很糟糕。

我还研究了browserify和webmake，它将您的代码和所需的任何模块组合成单个js文件，并具有缺少（require）方法。所有聪明的想法，但会使客户端代码有些混乱。

是否有这样的东西可以接受按其CommonJS格式编写的代码，编译所有与浏览器兼容的所需模块，并输出可以在浏览器中使用而无需担心缺少要求方法的Javascript文件（或多个文件）？更好的是，最好针对Backbone应用程序提供解决方案。

- Nick

Answer 1

在浏览器中使用CommonJS结构化模块有多种选择：

1. RequireJS 2.0.2支持配置选项cjsTranslate。在r.js优化器配置中将其设置为cjsTranslate: true将使用define样板包装任何看起来符合CommonJS格式的模块。详情请参见这里。
2. Cajon是一个建立在RequireJS之上的新模块加载器，支持CommonJS格式的模块（也由RequireJS作者@jrburke编写）。
3. Volo依赖管理工具（同样由@jrburke编写）具有将cjs模块包含和转换为amd模块的功能。这可能不是您的最佳选择，但出于完整性考虑值得包括。
4. 您可以编写一个服务器组件，自动将您的代码包装在AMD的define样板中。我相信这是他们在SoundCloud采取的方法-请参见此博客文章。

编辑于2014年8月29日：当前最佳实践可能是使用Browserify和生成源映射以便更容易地进行客户端调试。

- rharper

---

超级详细的答案 - Jamund Ferguson

Answer 2

我不清楚为什么像webmake这样的东西不能解决你的问题。

1. 它不需要你以任何与服务器端模块不同的方式编写客户端模块。

2. 你提出了webmake/browerify混淆js的问题。好吧，RequireJS/Curl也会这样做。是的，我知道，并非一定如此，但在2012年的任何实际生产情况下，你都会有某种工具来合并你的js并在发送到网络之前进行缩小。

3. 当前由@rharper接受的答案中的前三个要点基本上列出了AMD加载器空间中的替代方案。作为一个概念，AMD与Common JS确实非常不同，并解决了CJS规范编写者忽略的一个非常有效的问题。但这是一个未来的有效问题，因为目前脚本大小被图像等所掩盖。当脚本大小成为明显的性能问题时，我们可能已经拥有ECMA Harmony模块，并且应该具有本地浏览器支持。（即使今天，没有什么可以阻止您手动将模块分成逻辑组，并根据需要按需加载每个组合组。只是不经常需要）。

4. webmake是@rharper列出的第四个替代方案的（某种程度上的）实现。我支持webmake而不是browserify，因为webmake在其任务声明中指出，它只应该做一件事情-在您使用require("foo")和exports.bar = ...机制声明其依赖项的一堆模块之后，运行一个命令指定您的初始javascript文件，然后它会输出一个包含所有传递发现的依赖项的js文件。在我有限的使用经验中，它做得很好。只需添加75个奇怪的非缩小代码行作为前导。

5. 如果在开发过程中需要额外的构建步骤会导致摩擦，您可以选择动态重新生成组合的js并通过node.js服务器提供服务（几行代码）。webmake还支持sourcemaps，因此在webkit浏览器中进行调试也可以工作。

6. 请记住，我建议webmake是因为经过大量搜索，它是我遇到的最简单的解决方案。但这并不意味着它适用于您。在这个空间中存在如此多的替代方案的原因是每个替代方案都有自己的一套铃铛和口哨，其中一些可能对您的用例至关重要。但是，在大多数良好的JavaScript加载程序的情况下，一般原则将保持不变：

   • 无论您使用AMD还是CJS，都不应该需要编写AMD样板。@rharper列出了几个支持自动执行此操作的AMD替代方案。

   • 您应该有两条不同的路径用于生产和开发。生产JavaScript应该被缩小/组合为今天。开发JavaScript不应该，而且不应该需要添加额外的步骤来保存（在编辑器中）/重新加载（页面）/调试（在浏览器中）循环。

- Manav