使用 Durandal JS 在不同项目中重用/共享视图和模型

Question

我正在使用 Durandal JS 构建多个应用程序。所有这些应用程序都位于同一文档根目录下的同一台服务器上，并共享一些公共代码。例如，他们都使用相同的模型和视图进行登录。

如何在所有这些应用程序中重用/共享登录模型和视图，而无需将文件复制并粘贴到项目中？

我已经尝试了以下文件夹结构：

ProjectsDir/Project1/app/durandal/..
                        /models/Shell.js, Main.js, ...
                        /views/Shell.html, Main.html, ...
                        /main.js
                        /main-built.js

ProjectsDir/Project2/app/durandal/..
                        /models/Shell.js, Main.js, ...
                        /views/Shell.html, Main.html, ...
                        /main.js
                        /main-built.js

ProjectsDir/ProjectsBase/app/models/Login.js
                            /views/Login.html

这样，通过在相应的 shell.js 中设置正确的路由，就可以从所有其他项目中引用我的 ProjectsBase 中的相同登录模型和视图。这条路线可能看起来像这样：

router.map([
    {
        url: 'Login',
        moduleId: '../../ProjectsBase/app/models/Login',
        name:'Login',
        visible: true
    },
    {
        url: 'Main',
        moduleId: 'models/Main',
        name:'Main',
        visible: true
    }
]);

这在调试过程中按预期工作，但不幸的是，使用 durandal 优化器构建生产版本不起作用。 实际上，构建确实有效（它可以很好地生成 main-built.js），但是当我使用引用的生产文件启动站点时，出现以下错误：

Uncaught Error: undefined missing durandal/../../../MPBase/durandal-app/models/Login

对于如何使构建的生产文件与我上面描述的设置一起工作的任何想法，我真的很感激。

当然，对于如何使模型和视图在多个项目之间可重用/共享的其他想法，我也持开放态度。

谢谢

Answer 1

在Durandals Google Group 的帮助下，我找到了解决方案。

无法使用提供的 optimizer.exe，但创建自定义 r.js 配置非常容易，它可以处理我在问题中描述的设置：

首先，我运行了 optimizer.exe，它创建了一个基本配置文件 (app.build.js)，我将其用作起点。 此配置文件自动包含项目本身的所有必要文件（例​​如 Project1）。

此配置文件中唯一缺少的内容是对我的共享代码的引用（来自 ProjectsBase 目录的登录文件）。因此，我手动添加了它们以及一条新路径。

自定义 app.build.js（用注释突出显示 3 处更改，其余的是它是如何从 optizimer.exe 构建的）：

{
  "name": "durandal/amd/almond-custom",
  "inlineText": true,
  "stubModules": [
    "durandal/amd/text"
  ],
  "paths": {
    "text": "durandal/amd/text",
    "projectsbase": "../../ProjectsBase/" // New path to folder with shared files
  },
  "baseUrl": "ProjectsDir\\Project1\\app",
  "mainConfigFile": "ProjectsDir\\Project1\\app\\main.js",
  "include": [
    "main",
    "durandal/app",
    "durandal/composition",
    "durandal/events",
    "durandal/http",
    "text!durandal/messageBox.html",
    "durandal/messageBox",
    "durandal/modalDialog",
    "durandal/system",
    "durandal/viewEngine",
    "durandal/viewLocator",
    "durandal/viewModel",
    "durandal/viewModelBinder",
    "durandal/widget",
    "durandal/plugins/router",
    "durandal/transitions/entrance",
    "projectsbase/app/models/Login", // Include for login model
    "models/Main",
    "models/Shell",
    "text!projectsbase/app/views/Login.html", // Include for login view
    "text!views/Main.html",
    "text!views/Shell.html"
  ],
  "exclude": [],
  "keepBuildDir": true,
  "optimize": "uglify2",
  "out": "ProjectsDir\\Project1\\app\\main-built.js",
  "pragmas": {
    "build": true
  },
  "wrap": true,
  "insertRequire": [
    "main"
  ]
}

现在我只需要更新我的 Shell.js 以使用登录模型和视图的正确路由，方法是添加到 requirejs 的路径并在设置路由时正确使用它：

在Shell.js的最开始添加路径：

requirejs.config({
    paths: {
        'projectsbase': '../../ProjectsBase/'
    }
});

在 Shell.js 的 activate 方法中设置正确的路由：

router.map([
    { url: 'Login', moduleId: 'projectsbase/app/models/Login', name:'Login', visible: true },
    { url: 'Main', moduleId: 'models/Main', name:'Main', visible: true }
]);

现在我可以构建我的 main-built.js，它通过打开 node js 命令行、浏览到 r.js 配置文件所在的目录并创建构建（main-built.js）来捆绑和缩小所有相关文件。 js) 使用以下命令：

node r.js -o app.build.js

这样，当我使用调试文件时，所有内容都正确包含在内，并且它还使用构建 main-built.js，其中还包括我在 ProjectsBase 中的共享文件。