如何在Play Framework 2.1.1 Java中爲RequireJs使用多個main.js文件？

Question

我正在使用Play Framework 2.1.1中的AngularJs + RequireJs構建一個單頁應用程序。我有兩個應用程序坐在同一個播放服務器，管理儀表板和普通網站。這就是爲什麼我爲Admin Dashboard和Normal網站有兩個main.js文件。應用程序結構如下所示。我從public/javascripts

我們想分開這兩個頁面，這就是爲什麼我們有兩個main.js文件。然而，我現在面臨的問題是，在main.js的根目錄中，一切都很好。如果我去我的應用http://localhost:9000/一切都很好，如果我看看Firebug上的網絡面板，我只會看到require.js和main.js，這是我的預期。但是，當我去管理儀表板http://localhost:9000/admin每個文件都被正確縮小。但是當我看到網絡時，我看到了它應該沒有的所有JavaScript文件。我認爲每個腳本都應該從requireJs動態加載。所以，這意味着瀏覽器會通過多次調用來獲取所有必需的文件，而不僅僅是獲取require.js和main.js來解決依賴關係。我做錯了什麼？

我從這個項目https://github.com/maxdow/angularjs-requirejs-seed

├── admin 
│   ├── app.js 
│   ├── bootstrap.js 
│   ├── controllers 
│   │   ├── AdminAppController.js 
│   │   └── index.js 
│   ├── directives 
│   │   ├── Directive.js 
│   │   └── index.js 
│   ├── filters 
│   │   └── index.js 
│   ├── impl.js 
│   ├── main.js 
│   └── routes.js 
├── app.js 
├── bootstrap.js 
├── controllers 
│   ├── Controller.js 
│   └── index.js 
├── directives 
│   ├── Directive.js 
│   └── index.js 
├── filters 
│   └── index.js 
├── impl.js 
├── lib 
│   └── angular 
│    ├── angular-cookies.min.js 
│    ├── angular-flash.min.js 
│    ├── angular-resource.min.js 
│    └── angular.min.js 
├── main.js 
├── routes.js 
└── services 
    ├── Service.js 
    └── index.js 

你會發現，內部管理得到了結構/有main.js並在根我有另一個main.js

代碼看起來相當就像這樣。

require.config({ 

    paths: { 
     'angular': './lib/angular/angular.min', 
     'angular-resource': './lib/angular/angular-resource.min', 
     'angular-cookies': './lib/angular/angular-cookies.min' 
    }, 

    /** 
    * for libs that either do not support AMD out of the box, or 
    * require some fine tuning to dependency mgt' 
    */ 
    shim: { 
     'angular': { 
      exports: 'angular', 
      deps: [] 
     }, 
     'angular-resource': { 
      deps: ['angular'] 
     }, 
     'angular-cookies': { 
      deps: ['angular'] 
     } 
    } 
}); 

require(['./bootstrap'], function() { 
    //nothing to do here...see bootstrap.js 
}); 

這是我的模板看起來像普通的網站

@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, module = routes.Assets.at("javascripts/main").url) 

這是我的管理頁面模板看起來像

@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, 
          module = routes.Assets.at("javascripts/admin/main").url) 

這是我Build.scala

val main = play.Project(appName, appVersion, appDependencies).settings(
    requireJs += "main.js", 
    requireJsShim += "main.js" 

) 

這個是我的構建看，當我做play start

[info] Loading project definition from /Users/myuser/MyProject/project/main/project 
[info] Set current project to project (in build file:/Users/myuser/MyProject/project/main/) 
[info] RequireJS optimization has begun... 
[info] app.build.js: 
[info] ({appDir: "javascripts", 
[info]   baseUrl: ".", 
[info]   dir:"javascripts-min", mainConfigFile: "javascripts/main.js", modules: [{name: "main"}]}) 

Tracing dependencies for: main 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/app.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/bootstrap.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/controllers/AdminAppController.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/controllers/index.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/directives/Directive.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/directives/index.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/filters/index.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/impl.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/main.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/admin/routes.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/app.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/bootstrap.js 
min/controllers/Controller.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/directives/index.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/directives/Directive.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/filters/index.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/impl.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/lib/angular/angular-cookies.min.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/lib/angular/angular-flash.min.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/lib/angular/angular-resource.min.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/lib/angular/angular.min.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/main.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/routes.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/services/Service.js 
Uglifying file: /Users/myuser/MyProject/project/main/target/scala-2.10/classes/public/javascripts-min/services/index.js 

main.js 
---------------- 
lib/angular/angular.min.js 
filters/index.js 
lib/angular/angular-resource.min.js 
lib/angular/angular-cookies.min.js 
services/index.js 
directives/index.js 
controllers/index.js 
app.js 
routes.js 
controllers/Controller.js 
directives/Directive.js 
services/Service.js 
impl.js 
bootstrap.js 
main.js 

我已在Build.scala一些變化是

requireJsShim += "main.js", 
    requireJsShim += "admin/main.js", 
    requireJs += "main.js", 
    requireJs += "admin/main.js", 

喜歡和我得到這個錯誤，而不是

({appDir: "javascripts", 
[info]   baseUrl: ".", 
[info]   dir:"javascripts-min", mainConfigFile: "javascripts/main.jsadmin/main.js", modules: [{name: "main"},{name: "admin/main"}]}) 
Error: /Users/user/MyProject/project/main/target/scala-2.10/classes/public/javascripts/main.jsadmin/main.js does not exist. 

你可以看到它在requireJsShim中將兩個字符串連接在一起，並且我需要那個引導程序來爲angularjs工作。

Answer 1

在你身上。當你使用「播放開始」開始播放

val main = play.Project(appName, appVersion, appDependencies).settings(

    requireJsShim += "main-normal.js" 
    requireJs += "main-normal.js", 
    requireJs += "main-admin.js", 

) 

然後，requireJS會把這些個人文件作爲模塊，您可以在控制檯中看到：Scala的文件，所有動態的js文件添加到requireJS，例如像輸出：

{ 
    appDir: "javascripts", 
    baseUrl: ".", 
    dir:"javascripts-min", 
    mainConfigFile: "main-normal.js", 
    modules: [ 
      {name: "main-normal"}, 
      {name: "main-admin"} 
      ] 
} 

然後將開始解決依賴於那些js文件，並在您的網站，檢查使用螢火/ Chrome瀏覽器開發工具和網絡選項卡，它將反映的變化，做一個新的重載/刪除瀏覽器中的緩存以查看更改。

此外，對於性能的提升，我建議你使用r.js文件而不是默認的犀牛編譯器在劇中框架文件的建議，你可以在這裏下載： https://raw.github.com/jrburke/r.js/master/dist/r.js

將文件複製到您的項目文件夾和下面的行添加到您的build.scala的requireJsShim線以上：

requireNativePath := Some("r.js") 

所以，實際上你build.scala文件應該是：

val main = play.Project(appName, appVersion, appDependencies).settings(

    requireNativePath := Some("r.js"), 
    requireJsShim += "main-normal.js" 
    requireJs += "main-normal.js", 
    requireJs += "main-admin.js", 

)