javascript - 将 durandal 单页面应用程序捆绑到一个 HTML 页面中

Question

我有一个非常奇怪的要求，我需要将所有内容与我的 Durandal 单页应用程序捆绑在一个 HTML 页面中。我可以用我的依赖项来消除它，因为我用名称定义它们:

define("models.mapper", [], function() {

});

但是，似乎不可能捆绑 durandal 的东西，因为它定义了没有名称的模块:

define(['require', 'jquery'], function(require, $) {
    // ....
}

当您想让它与路径引用一起工作时，这很好，但似乎这会使将其内联到 HTML 中变得困难。对此有什么想法或建议吗？

Answer 1

Require.JS 要求每个文件只有一个匿名定义，以便它可以使用相对于基本路径的文件路径+名称来为其命名。如果您也希望在页面上内联 durandal 源代码，那么您需要更新它们的定义行，为它们提供适当的名称(即，define('durnadal/system', ......)。

更简单的方法可能是在普通 durandal 项目的结构中构建源代码，然后使用 RequireJS 优化器 ( http://requirejs.org/docs/optimization.html ) 将它们构建到单个 JS 文件中 - 如果您正确配置此文件而不进行缩小，那么您只需将文件内容粘贴到页面上的脚本标记中，它仍然清晰可见!

如果您确实愿意，则可以继续在单个 HTML 文件中进行开发，但是您确实应该考虑将所有这些自动化到一个繁琐的工作流程中，这应该不会太难，并且您将更容易管理代码。请注意，您甚至可以使用 durandal grunt 任务来执行此操作，但我不确定它允许您提供哪些选项，但您绝对可以使用 requirejs grunt 任务并将其构建到您的工作流程中，而无需缩小。通过一些模板任务，您可以将该输出注入(inject)到最终的 HTML 页面中。