Play Framework 2.1.1 JavaでRequireJsに複数のmain.jsファイルを使用するにはどうすればよいですか？

私は、Play Framework 2.1.1でAngularJs + RequireJsを使用してシングルページアプリケーションを構築しています。私は2つのアプリケーションが同じPlayサーバー、管理ダッシュボードと通常のWebサイトに座っている。そのため、私はAdmin DashboardとNormal Web用のmain.jsファイルが2つあります。アプリケーションの構造は次のようになります。私はこれを持っていますpublic/javascriptsPlay Framework 2.1.1 JavaでRequireJsに複数のmain.jsファイルを使用するにはどうすればよいですか？

私たちは2つのmain.jsファイルを持っているので、2つのページを分けたいと思います。しかし、私が今直面している問題は、ルートmain.jsのすべてが問題ないということです。もし私が私のアプリケーションに行くなら、http://localhost:9000/はすべて問題ありません。Firebugのネットワークパネルを見ると、require.jsとmain.jsしか見えません。しかし、私が管理ダッシュボードに行くときhttp://localhost:9000/adminすべてのファイルが正しく縮小されています。しかし、私はネットワークを見ると、私はそれがされていない必要があるすべてのjavascriptファイルを参照してください。私は各スクリプトがrequireJsから動的に読み込まれるべきだと思った。したがって、依存関係を解決するためにrequire.jsとmain.jsを取得するのではなく、ブラウザが複数の呼び出しを行って必要なファイルをすべて取得することを意味します。私は間違って何かしていますか？

私はあなたが管理者の内側/ main.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

このプロジェクトからの構造を得ましたこのように多くは同じです。

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で2つの文字列を連結していることを確認してください。そして、私はanglejsのためにブートストラップを動作させるために必要です。

出典

2013-06-24 toy

あなたが作成しています。Scalaのファイル、例えば同様に、requireJSにすべてのダイナミックのjsファイルを追加：あなたは「再生開始」を使用して再生を開始するとき

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

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

)

その後、requireJSでは、コンソールで見ることができるモジュール、これらのファイルを個別に扱います出力として：

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

それはそれらのjsファイルの依存関係の解決を開始し、あなたのサイトで、放火犯/クロームdevのツールを使用して検査し、ネットワーク]タブでは、それは、変更を反映新鮮なリロードを行いますされます/変更を確認するには、ブラウザのキャッシュを削除してください。

また、パフォーマンス向上のために、私はプレイフレームワークのドキュメントで提案されているように、あなたが代わりにデフォルトのサイコンパイラのr.jsファイルを使用することを示唆している、あなたはここでそれをダウンロードすることができます。 https://raw.github.com/jrburke/r.js/master/dist/r.js

があなたにファイルをコピーしますプロジェクトフォルダとrequireJsShimライン上のごbuild.scalaに次の行を追加します。効果であなたのbuild.scalaファイルがある必要があり、そう

requireNativePath := Some("r.js")

：

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

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

)

出典

2013-06-26 07:57:48 somedev

私の編集した質問をご覧ください。コードをコメントに入れることはできません。 – toy

@toyの場合、main.jsとadmin/main.jsの両方にrequire configパスに同じjsファイルがある場合、requireJsShimプロパティにこれらのファイルのいずれか1つだけを含めると、それらのうちの1つのみがJsShimを要求するために、すでにコンパイルされ、他のmain.jsモジュールでも利用可能になります。これらのmain.jsファイルの依存関係が異なる場合は、require.config.paths内のいずれかのファイルにこれらの依存関係をすべて追加し、requireJsShimプロパティに対してのみその依存関係を含めると、すべてのモジュールでコンパイルされて使用できます。 – somedev

また、r.jsファイルを使用したい場合は、nodejsとrequirejsがインストールされている必要があります。requirejsはnpmを介してノードにインストールでき、r.jsはnode_modulesにインストールされていると思います。 – somedev

Play Framework 2.1.1 JavaでRequireJsに複数のmain.jsファイルを使用するにはどうすればよいですか？

答えて

関連する問題