Wie verwendet man mehrere main.js Dateien für RequireJs in Play Framework 2.1.1 Java?

Ich baue eine einseitige App mit AngularJs + RequireJs in Play Framework 2.1.1. Ich habe zwei Anwendungen im selben Play-Server, Admin-Dashboard und normalen Website. Deshalb habe ich zwei main.js Dateien für Admin Dashboard und Normal Website. Die Anwendungsstruktur sieht so aus. Ich habe dies von public/javascriptsWie verwendet man mehrere main.js Dateien für RequireJs in Play Framework 2.1.1 Java?

Wir wollen die beiden Seiten trennen, weshalb wir zwei main.js Dateien haben. Das Problem, mit dem ich gerade konfrontiert bin, ist jedoch, dass in der Wurzel main.js alles in Ordnung ist. Wenn ich zu meiner Anwendung http://localhost:9000/ gehe, ist alles in Ordnung, und wenn ich das Netzwerkpanel auf Firebug ansehe, sehe ich nur require.js und main.js, was ich erwartet habe. Allerdings, wenn ich zum Admin-Dashboard gehe http://localhost:9000/admin Jede Datei wird korrekt minimiert. Aber wenn ich auf das Netzwerk schaue, sehe ich alle Javascript-Dateien, die es nicht sein sollte. Ich dachte, jedes Skript sollte dynamisch von require geladen werden. Das bedeutet, dass der Browser mehrere Aufrufe durchführt, um alle notwendigen Dateien zu erhalten, anstatt nur require.js und main.js zu erhalten, um Abhängigkeiten aufzulösen. Mache ich etwas falsch?

Ich habe die Struktur von diesem Projekt 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

Sie, dass innerhalb Admin bemerken/es main.js ist und auch in der Wurzel habe ich eine andere main.js

Der Code hübsch aussieht so ähnlich.

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

Dies ist, was meine Vorlage wie für die normale Website Dies ist, was meine Vorlage für die Admin-Seite sieht aus wie

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

Und das ist mein Build.scala sieht

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

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

)

Dies ist das, was wie mein Build aussieht, wenn ich play start tun

[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

ich einige Änderungen in Build.scala gemacht haben

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

und ich bekomme diese Fehlermeldung statt

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

Sie können zu sein Sehen Sie, dass es die beiden Strings in requireJsShim miteinander verkettet und ich brauche das für den Bootstrap, um für angularjs zu arbeiten.

Quelle

2013-06-24 toy

In dir bauen.scala-Datei, fügen Sie alle Ihre dynamische js Dateien requireJS, wie zum Beispiel:

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

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

)

Dann, wenn Sie spielen mit ‚play Start‘ starten, requireJS werden diese einzelnen Dateien als Module behandeln, die Sie in der Konsole sehen können Ausgabe als: mit Firebug/Chrom Entwickler-Tools und in der Registerkarte Netzwerk

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

es wird dann Abhängigkeiten für die js Dateien starten Lösung, und in Ihrer Website, inspizieren, werden die Änderungen widerspiegeln, machen einen frischen reload/Löschen Sie den Cache in Ihrem Browser, um die Änderungen zu sehen.

Auch für Leistungsverbesserungen, schlage ich vor, dass Sie die r.js statt Standard rhino Compiler-Datei verwenden, wie in den Play Rahmen docs vorgeschlagen, können Sie es hier herunterladen: https://raw.github.com/jrburke/r.js/master/dist/r.js

die Datei in Ihrem kopieren Projektordner und fügen Sie die folgende Zeile in build.scala über der requireJsShim Linie:

requireNativePath := Some("r.js")

so sollte in der Tat Ihre build.scala Datei sein:

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

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

)

Quelle

2013-06-26 07:57:48 somedev

siehe meine bearbeitete Frage. Ich kann den Code nicht in einen Kommentar einfügen. – toy

@toy, wenn sowohl Ihre main.js als auch admin/main.js dieselben js-Dateien in require-Konfigurationspfaden haben, dann reicht es aus, wenn Sie nur eine hinzufügen, dh entweder eine dieser Dateien in der requireJsShim-Eigenschaft, versuchen Sie es hinzuzufügen Nur einer von ihnen requiresJsShim, sie sind bereits kompiliert und auch für das andere Modul main.js verfügbar. Wenn diese beiden main.js-Dateien unterschiedliche Abhängigkeiten aufweisen, versuchen Sie, alle diese Abhängigkeiten zu einer der Dateien in require.config.paths hinzuzufügen und nur diese für die requireJsShim-Eigenschaft einzuschließen. Sie werden dann kompiliert und für alle Module verfügbar sein. – somedev

auch, ich habe vergessen zu erwähnen, wenn Sie die r.js-Datei verwenden möchten, müssen Sie Nodejs und Requirejs installiert haben, Requirejs können über Npm für Node installiert werden und die R.js ist in Node_Module vorhanden. – somedev

Wie verwendet man mehrere main.js Dateien für RequireJs in Play Framework 2.1.1 Java?

Antwort

Verwandte Themen