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

Question

我正在研究一种使用允许Javascript模块被需要的CommonJS结构的BackboneJS应用程序编写的方法。这个应用程序然后可以在客户端或服务器端与节点一起工作。

我已经看过requirejs和其他类似的选项，但你必须以一种特定的方式编写应用程序，在我看来，这看起来确实很不起眼。

我也看过browserify和webmake它需要你的代码和任何需要的模块，并将它们组合成一个带缺少（require）方法的js文件。所有这些都是一个聪明的主意，但让客户端的代码有点混乱。

有没有这样的事情，可以采取以其commonJS格式编写的代码，编译与浏览器兼容的所有必需的模块，并吐出一个JavaScript文件（或几个），可以在浏览器中使用而不必担心缺少需要的方法？更好的是为骨干应用量身定制解决方案。

Answer 1

您有使用CommonJS的结构的模块在浏览器的一些选项：

1. RequireJS 2.0.2支持的配置选项cjsTranslate。在您的r.js优化器配置中将其设置为cjsTranslate: true将包装所有包含模块的模块，这些模块显示为使用define样板的CommonJS格式。看详情here。
2. Cajon是一个新的模块加载器，构建在RequireJS之上，支持CommonJS格式的模块（也由RequireJS作者@jrburke编写）。
3. Volo依赖管理工具（同样由@jrburke提供）可以将cjs模块包含到amd模块中并将其转换为amd模块。这对你来说可能不是一个很好的选择，但值得包括完整性。
4. 您可以编写一个服务器组件，将代码自动包装在AMD define样板中。我相信这是他们在SoundCloud处的方法 - 请参阅this blog post。

编辑2014年8月29日：这里目前最好的做法可以说是Browserify与生成的源地图，方便客户端调试。

Answer 2

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

1. 它不需要你用任何不同的方式编写客户端模块，而不是你为服务器端模块做什么。

2. 您提出了关于webmake/browerify js的疑虑。那么，猜猜看。 RequireJS/Curl做同样的事情。是的，我知道，不一定，但在任何实际生产情况大约在2012年，你会有某种工具来结合你的js并在通过电线发送之前将其缩小。

3. @rharper当前接受的答案中的前三点基本上列出了AMD加载器空间中的替代方案。作为一个概念，AMD与Common JS绝对是非常不同的，并且解决了一个非常有效的问题，从而逃脱了CJS规范作者的注意。但是对未来而言，这是一个值得关注的问题，因为目前的脚本大小与图像大小相关。当脚本大小成为一个明显的性能问题时，我们可能会使用ECMA Harmony模块，它们应该具有原生浏览器支持。 （即使到了今天，也没有什么能阻止你手动将你的模块分成逻辑组，并要求在需要的时候加载每个组合组，并且在需要时加载每个组合组，并且经常不需要）。

4. webmake是@rharper列出的第四种替代方法（的一种）实现。我主张通过web浏览器来浏览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不应该，并且不应该需要额外增加一个步骤来保存（在编辑器中）/重新加载（页面）/调试（在浏览器中）循环。