2013-07-09 63 views
0

我使用Durandal JS構建多個應用程序。所有這些應用程序位於同一個文件根目錄下的同一臺服務器上,並共享一些通用代碼。例如,他們都使用相同的模型&查看登錄。與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 

這樣將有可能通過在正確的路線設置爲從其他項目中引用相同的登錄模式&鑑於我ProjectsBase各自的shell.js。這條路線可能是這個樣子:

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

這個工程調試,但建設量產版與迪朗達爾優化過程中如預期遺憾的是不工作的。 其實建築不工作(它產生的主built.js就好了),但是當我引用我得到以下錯誤生產文件啓動網站:

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

我真的很感激如何任何想法我可以使建立的生產文件與我上面描述的設置一起工作。

當然,我也打開其他想法如何使模型&意見可重複使用/可共享多個項目之間。

感謝

+0

你目前的構建過程是什麼?你用咕嚕聲嗎? –

+0

我現在沒有真正的構建過程。我談論的項目基本上不會太大,只能用於私人用途,因此構建過程將手動將所有文件與Durandal優化器手動合併/縮小,然後將它們上傳到服務器上的「生產」位置。我已在[Durandals Google網上論壇](https://groups.google.com/forum/?fromgroups=#!topic/durandaljs/sYZO79Db_JM)上收到我的問題的答案,這似乎相當有前途。自從我成功嘗試了這些建議後,我會自己回答這個問題... – suamikim

回答

3

一些幫助從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.config({ 
    paths: { 
     'projectsbase': '../../ProjectsBase/' 
    } 
}); 

在Shell.js的最開始添加路徑:也通過添加到requirejs的路徑,並設置路由時正確使用它使用了正確的路線,登錄模型&圖

在Shell的activate方法中設置正確的路由。JS:

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

現在我可以建立我的主built.js其通過打開節點JS的命令行,瀏覽到的r.js配置文件所在的目錄捆綁& minifies所有相關文件並創建構建(主built.js)用下面的命令:

node r.js -o app.build.js 

這樣,一切都正確包括,當我與調試文件工作,它也與構建主built.js其中還包括工作我從ProjectsBase共享的文件。

相關問題