我正在 Play Framework 2.1.1 中使用 AngularJs + RequireJs 构建单页应用程序。我有两个应用程序位于同一个 Play 服务器、管理仪表板和普通网站中。这就是为什么我有两个 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 并且在根目录下还有另一个 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' 开始 Play 时，requireJS 会将这些单独的文件视为模块，你可以在控制台输出中看到:

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

然后它将开始解析这些 js 文件的依赖关系，并在您的站点中使用 firebug/chrome 开发工具进行检查，并在网络选项卡中反射(reflect)更改，重新加载/删除浏览器中的缓存以查看更改。

此外，为了提高性能，我建议您使用 r.js 文件而不是 play 框架文档中建议的默认 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",

 )

关于javascript - 如何在 Play Framework 2.1.1 Java 中为 RequireJs 使用多个 main.js 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17283864/