javascript - 使用 Durandal JS 在不同项目中重用/共享 View 和模型

Question

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

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

我已经尝试过具有以下文件夹结构的内容:

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 中的相同登录模型和 View 。这条路线可能看起来像这样:

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

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

当然，我也愿意接受有关如何使模型和 View 在多个项目之间可重用/共享的其他想法。

谢谢

Answer 1

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

不可能使用提供的 optimizationr.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 即可使用登录模型和 View 的正确路由，方法是向 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 的共享文件。