【问题标题】:Backbone.js application using CommonJS structure to work with node.js and clientBackbone.js 应用程序使用 CommonJS 结构与 node.js 和客户端一起工作
【发布时间】:2012-07-28 09:02:41
【问题描述】:

我正在研究一种使用允许需要 Javascript 模块的 CommonJS 结构由 BackboneJS 应用程序编写的方法。然后,此应用程序可以使用节点在客户端或服务器端运行。

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

我还查看了browserifywebmake,它们将您的代码和所需的任何模块组合到一个带有缺失(require)方法的单个js 文件中。一个聪明的主意,但是让客户端的代码有点混乱。

有没有这样的东西可以通过以commonJS格式编写的代码,编译与浏览器兼容的所有必需模块并吐出一个可以在浏览器中使用的Javascript文件(或多个)不必担心缺少 require 方法?更好的是为骨干应用量身定制的解决方案。

【问题讨论】:

    标签: javascript node.js backbone.js requirejs commonjs


    【解决方案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 模块。这对您来说可能不是一个很好的选择,但为了完整起见值得包括在内。
    4. 您可以编写一个服务器组件,自动将您的代码包装在 AMD define 样板文件中。我相信这是他们在 SoundCloud 采取的方法 - 请参阅 this blog post

    2014 年 8 月 29 日编辑:目前的最佳实践可以说是 Browserify 生成的源映射,以便于客户端调试。

    【讨论】:

    • 超级彻底的回答
    【解决方案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. 1234563 webmake 还支持 sourcemaps,所以在 webkit 浏览器中调试也可以。
    6. 请记住,我建议使用 webmake,因为经过大量搜索,这是我遇到的最简单的解决方案。但这并不意味着它对你有用。这个领域有这么多替代品的原因是因为每个人都有自己的一套花里胡哨,其中一些可能对您的用例至关重要。但一般原则适用于大多数优秀的 javascript 加载器:

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

      • 您应该有两条不同的生产和开发路径。从今天开始,生产 javascript 应该被缩小/组合。开发 javascript 不应该,也不应该需要在保存(在编辑器中)/重新加载(页面)/调试(在浏览器中)循环中添加额外的步骤。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-01-14
      • 1970-01-01
      • 2014-03-22
      • 2018-11-09
      • 2016-07-08
      • 1970-01-01
      • 1970-01-01
      • 2015-08-19
      相关资源
      最近更新 更多