0

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
    }
]);

これはデバッグ中は期待どおりに機能しますが、残念ながらデュランダル オプティマイザーを使用して製品版をビルドすることはできません。実際にはビルドは機能します (main-built.js が正常に生成されます) が、プロダクション ファイルを参照してサイトを起動すると、次のエラーが発生します。

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

上記で説明したセットアップでビルドされたプロダクション ファイルを機能させる方法についてのアイデアをいただければ幸いです。

もちろん、モデルとビューを複数のプロジェクト間で再利用可能/共有可能にする方法に関する他のアイデアも受け入れています。

ありがとう

4

1 に答える 1

3

Durandals Google Groupの助けを借りて、解決策を見つけました。

提供された optimizer.exe を使用することはできませんが、質問で説明したセットアップを処理できるカスタム r.js 構成を作成するのは非常に簡単です。

まず第一に、出発点として使用した基本的な構成ファイル (app.build.js) を作成する optimizer.exe を実行しました。この構成ファイルには、プロジェクト自体 (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 }
]);

これで、ノード js コマンド ラインを開き、r.js 構成ファイルがあるディレクトリを参照して、ビルド (main-built.js) を作成することで、すべての関連ファイルをバンドルおよび縮小する main-built.js をビルドできます。次のコマンド:

node r.js -o app.build.js

このようにして、デバッグファイルを操作しているときにすべてが正しく含まれ、ProjectsBase からの共有ファイルも含まれるビルド main-built.js でも機能します。

于 2013-07-14T09:22:13.893 に答える