使用 shim 对 require.js 进行丑化在使用 CoffeeScript 的 play2 上不起作用

Question

我从事 Play 2.1.2 项目，使用 Angular.js、CoffeeScript、require.js 和 bower 来组织前端。 对于 bower，我在 /app/assets/javascripts/main.coffee 文件中使用了 shim。 然后我使用play 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 不起作用。

你知道问题的根源是什么吗？有人遇到过吗？

Answer 1

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

Answer 2

最终解决我的问题的是创建自定义shim.coffee，其中包含require.config 的一部分：

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

没有shim 部分。

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

然后uglifying和require.js优化开始工作！

Answer 3

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

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

我发现将waitSeconds: 0 添加到配置对象有助于可靠构建。为什么在编译期间访问本地资源甚至可能超时，这超出了我的理解。详情请见RequireJS API waitSeconds documentation。

这是来自我的 RequireJS 模块的 sn-p，位于 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. */
})