Jak korzystać z wielu plików main.js dla RequireJs w Play Framework 2.1.1 Java?

Question

Buduję aplikację z jedną stroną, używając AngularJs + RequireJs w Play Framework 2.1.1. Mam dwie aplikacje siedzące na tym samym serwerze Play, panelu administratora i normalnej stronie. Właśnie dlatego mam dwa pliki main.js na Admin Dashboard i Normal. Struktura aplikacji wygląda następująco. Mam to od public/javascripts

Chcemy rozdzielić dwie strony, dlatego mamy dwa pliki main.js. Jednak problemem, z którym teraz borykam, jest to, że w głównym main.js wszystko jest w porządku. Jeśli przejdę do mojej aplikacji, wszystko jest w porządku i jeśli spojrzę na panel sieciowy w Firebug, zobaczę tylko require.js i main.js, czego się spodziewałem. Jednak po przejściu do panelu administratora http://localhost:9000/admin Każdy plik jest poprawnie zminimalizowany. Ale kiedy patrzę na sieć, widzę wszystkie pliki javascript, które nie powinny być tym. Myślałem, że każdy skrypt powinien być ładowany dynamicznie z requireJs. Oznacza to, że przeglądarka wykonuje wiele wywołań, aby uzyskać wszystkie niezbędne pliki, zamiast tylko pobrać require.js i main.js, aby rozwiązać zależności. Czy robię coś złego?

Mam strukturę tego projektu 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 

można zauważyć, że wewnątrz admin/jest main.js a także w głównym mam inny main.js

kod wygląda całkiem bardzo podobnie.

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

To właśnie mój szablon wygląda na normalnym miejscu

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

To właśnie mój szablon na stronie administratora wygląda

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

A to moja Build.scala

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

) 

To jest to, co mój build wygląda kiedy robię 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 

Zrobiłem kilka zmian w Build.scala być

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

i otrzymuję ten błąd zamiast

({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. 

Można zobacz, że łączy on dwa ciągi razem w requireJsShim i potrzebuję tego, aby bootstrap działał dla angularjs.

Answer 1

W Tobie budować.Plik Scala, dodać wszystkie dynamiczne pliki js do requireJS, jak na przykład:

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

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

) 

Wtedy kiedy grasz zacząć używać „start play”, requireJS będzie traktować tych pojedynczych plików jak moduły, które można zobaczyć w konsoli wyjście jak:

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

będzie on następnie rozpocząć rozwiązywanie zależności dla tych plikach js i na swojej stronie internetowej, należy sprawdzić za pomocą narzędzia Firebug/chrom dev i na karcie sieciowej, będzie odzwierciedlać zmiany, zrobić nową reload/usuń pamięć podręczną w przeglądarce, aby zobaczyć zmiany.

Ponadto dla poprawy wydajności, i sugerują, że używasz plik r.js zamiast domyślnego nosorożca kompilatora jak zasugerowano w docs ramowych grać, można go pobrać tutaj: https://raw.github.com/jrburke/r.js/master/dist/r.js

skopiować plik do Folder projektu i dodaj następującą linię do build.scala powyżej linii requireJsShim:

requireNativePath := Some("r.js") 

więc w efekcie plik build.scala powinno być:

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

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

)