toy*_*toy 5 javascript minify requirejs angularjs playframework-2.1
我正在使用Play Framework 2.1.1中的AngularJs + RequireJs构建单页应用程序.我有两个应用程序坐在同一个Play服务器,管理仪表板和普通网站.这就是我为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
你会注意到在admin /内有main.js,在root中我有另一个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中将两个字符串连接在一起,我需要使用bootstrap来为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文件而不是play play docs中建议的默认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",
)
| 归档时间： |
|
| 查看次数： |
3534 次 |
| 最近记录： |