如何在Play Framework 2.1.1 Java中为RequireJs使用多个main.js文件
How to use multiple main.js files for RequireJs in Play Framework 2.1.1 Java?
我正在使用Play Framework 2.1.1中的AngularJs+RequireJs构建一个单页应用程序。我有两个应用程序坐在同一个播放服务器,管理面板和正常的网站。这就是为什么我有两个用于Admin Dashboard和Normal网站的main.js文件。应用程序结构如下所示。我从public/javascripts
得到的
我们想将这两个页面分开,这就是为什么我们有两个main.js文件。然而,我现在面临的问题是,在rootmain.js中,一切都很好。如果我转到我的应用程序http://localhost:9000/
,一切都很好,如果我查看Firebug上的网络面板,我只看到require.js和main.js,这正是我所期望的。但是,当我转到管理面板http://localhost:9000/admin
时,每个文件都被正确地缩小了。但当我查看网络时,我看到了所有的javascript文件,而这些文件本不应该是那样的。我认为每个脚本都应该从requireJ动态加载。因此,这意味着浏览器会多次调用以获取所有必要的文件,而不是只获取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
你会注意到admin/里面有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。
在build.scala文件中,将所有动态js文件添加到requireJS中,例如:
val main = play.Project(appName, appVersion, appDependencies).settings(
requireJsShim += "main-normal.js"
requireJs += "main-normal.js",
requireJs += "main-admin.js",
)
然后,当您使用"play-start"开始播放时,requireJS会将这些单独的文件视为模块,您可以在控制台输出中看到:
{
appDir: "javascripts",
baseUrl: ".",
dir:"javascripts-min",
mainConfigFile: "main-normal.js",
modules: [
{name: "main-normal"},
{name: "main-admin"}
]
}
然后,它将开始解析这些js文件的依赖关系,并在您的站点中,使用firebug/chrome dev工具进行检查,在网络选项卡中,它将反映更改,在浏览器中重新加载/删除缓存以查看更改。
此外,为了提高性能,我建议您使用r.js文件,而不是播放框架文档中建议的默认rhino编译器,您可以在此处下载:https://raw.github.com/jrburke/r.js/master/dist/r.js
将该文件复制到您的项目文件夹中,并在requireJsShim行上方的build.scala中添加以下行:
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",
)
- 从文本文件js中读取列表
- 当我用ctrl+p搜索时,为什么要在谷歌chrome上使用inspect来调试缺少显示文件js
- 获取用于外部JavaScript文件(.js)的代码提示
- 如何将Javascript文件(.js文件)放在web服务器中
- 如何将 JavaScript 文件(.js 文件)添加到 C# 项目并从 C# 代码调用 JavaScript 方法
- 在 Node 中包含 javascript 文件.js无需 require('.') ing
- 如何使用jquery显示多个文件.多文件.js
- 使用 PDF 打开 PDF 文件.js而不将文件作为查询字符串传递
- 转换颜色十六进制值以用于三个 JSON 文件.js
- 如何使用 jQuery 选择多个文件.多文件.js插件?使用单个关闭按钮一次选择多个文件
- 如何在 Gulp 任务中间添加 CSS 文件.js
- 如何从Dropzone上传和删除文件.js
- 如何在视频中添加视频文件.js 4.2.1.
- 从快速节点下载文件.js具有 JWT 授权
- 访问 JavaScript 文件.js中的 C# 变量
- 在节点中热重载外部 js 文件.js如果文件有任何更改
- 如何在一台服务器中运行不同的.js文件.js NODE JS中的文件
- 如何在多文件.js中上传文件时检查文件扩展名
- 将文件.js中的var导入到模块joomla的模板中,并使用后台进行修改
- 在path项目中编写文件js脚本