1

我从事 Play 2.1.2 项目，使用 Angular.js、CoffeeScript、require.js 和 bower 来组织前端。使用 bower，我在/app/assets/javascripts/main.coffee文件中使用 shim。然后我部署 usingplay clean stage并运行target/start.

问题是：在stage阶段期间，Play 不会丑化资源。在Build.scala：

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

然后在阶段丑化css之后：

Tracing dependencies for: main
Error: Load timeout for modules: angular-bootstrap,angular
http://requirejs.org/docs/errors.html#timeout
In module tree:
    main
      jquery

Error: Load timeout for modules: angular-bootstrap,angular
http://requirejs.org/docs/errors.html#timeout
In module tree:
    main
      jquery

[info] RequireJS optimization finished.

所以什么都没有被丑化。在main.coffee：

require.config
  paths:
    jquery: "lib/jquery/jquery"
    angular: "lib/angular/angular"
    ...
  shim:
    angular: {deps: ["jquery"], exports: "angular"}
    ...

define [
  "angular-bootstrap"
  "angular"
  ...
], ->
  app = angular.module "app"
  ...
  app

它在客户端完美运行，所有路径都是正确的等等。 requireJsShim += "main.js"看起来也是正确的：看起来 require.js 优化发生在编译资产之后，所以main.coffee或者只是main不起作用。

任何想法问题的根源是什么？以前有人遇到过吗？

4

3 回答 3

1

最终解决我的问题的是创建自定义shim.coffee部分require.config：

require.config
  paths:
    jquery: "lib/jquery/jquery"
    angular: "lib/angular/angular"
    ...

没有shim部分。

然后我必须在define子句中明确定义填充依赖项并使用requireJsShim += "shim.js"——与我用于客户端配置的文件不同。

然后 uglifying 和 require.js 优化开始起作用了！

于 2013-08-06T11:53:16.763 回答
1

我有一个使用 shim 的示例应用程序，我刚刚回答了一个与您的问题非常相似的问题。简而言之，shim 会覆盖app.build.js文件。

于 2013-07-22T09:11:48.803 回答
1

我确实遇到了这个问题（几乎；我没有在我的项目中使用 CoffeeScript），结果证明我认为更容易解决。重申一下这个问题：某些 JavaScript 资源——尤其是那些export在 shim 中没有设置的资源——会产生上面提到的“模块加载超时”。更糟糕的是，问题似乎是暂时的。

将 RequireJS 配置（例如, paths）shim从模块中分离出来似乎有帮助，但是编译仍然不可靠，并且它使在开发模式下的工作更加复杂。

我发现添加waitSeconds: 0到配置对象有助于可靠的构建。为什么在编译期间访问本地资源甚至可能超时，这超出了我的理解。有关详细信息，请参阅RequireJS APIwaitSeconds文档。

这是我的 RequireJS 模块的一个片段，位于public/javascripts（您的路径可能会有所不同）。

require({
  /* Fixes an unexplained bug where module loads would timeout
   * at compilation. */
  waitSeconds: 0,

  paths: {
    'angular': '../vendor/angular/angular',
    'angular-animate': '../vendor/angular/angular-animate',
    /* ... */

    'jquery': '../vendor/jquery/jquery'
  },

  shim: {
    'angular': {
      deps: [ 'jquery' ],
      exports: 'angular'
    },

    'angular-animate': ['angular'],
    /* ... */

    'jquery': {
      exports: 'jQuery'
    }
  },

  optimize: 'uglify2',
  uglify2: {
    warnings: false,
    /* Mangling defeats Angular injection by function argument names. */
    mangle: false
  }
})

define(['jquery', 'angular'], function($, angular) {
  /* Angular bootstrap. */
})
于 2013-09-22T23:01:30.137 回答