如何在 Play 框架中使用 RequireJS 优化器？

Question

正如宣传的那样，Play 中的rjs 可以

确保从 WebJar 中引用的任何 JavaScript 资源 自动从 jsdelivr CDN 引用。另外如果有的话 找到 .min.js 文件，然后将使用该文件代替 .js。一个添加的 这里的好处是您的 html 不需要更改！

但是，我似乎无法让这些工作。

1. 我尝试在生产模式下运行我的 Play 应用程序，但我的所有 webjar javascript 仍被引用为本地。
2. 我没有看到生产中使用的 .min 版本的 javascript 文件。

3. 我无法让依赖注入在生产模式下工作。例如，当我想像这样在我的代码中注入jquery 时

   define(['jquery'], 函数 ($) { '使用严格'; 控制台.log($.grep); 返回 { 总和：函数（a，b）{ 返回 a + b; } }; });

我可以让它在开发模式下正常工作，但在生产模式下，rjs 失败了

[info] Error: ENOENT, no such file or directory '/Users/khanguyen/Desktop/rjsdemo/target/web/rjs/build/js/jquery.js'
[info] In module tree:
[info]     main
[info]       app
[info] 
[info] Error: Error: ENOENT, no such file or directory '/Users/khanguyen/Desktop/rjsdemo/target/web/rjs/build/js/jquery.js'
[info] In module tree:
[info]     main
[info]       app
[info] 
[info]     at Error (native)

尽管 Webjar 生成了配置设置，但显然它正在查看 jQuery 的错误位置

requirejs.config({"paths":{"jquery":["/webjars/jquery/1.11.1/jquery","jquery"]},"shim":{"jquery":{"exports":"$"}},"packages":[]})    }

获得jquery 的正确位置。

我正在使用 Play 2.4.0，在我的 build.sbt 中设置了 pipelineStages := Seq(rjs, digest)。

请告诉我哪里弄错了。

谢谢！

Answer 1

事实证明，RequireJS 优化支持并不适用于所有 Webjar，而是仅限于 Classic Webjar。

即便如此，webjar 构建文件也必须包含在常规模块中，以便 rjs 工作。

例如，如果您查看 jQuery 经典 webjar，您会看到其中包含一个特殊的 webjar 构建指令。查看该文件以获取信息。

一旦你确定了一个准备好 RequireJS 的 webjar，你就可以让 sbt-rjs 来做这件事。这是我的设置供参考：

/** javascripts/main.js **/
'use strict';

requirejs.config({
    paths:{
        'jquery': ['../lib/jquery/jquery'],
        'react': ['../lib/react/react'],
        'bootstrap': ['../lib/bootstrap/js/bootstrap'],
        'react-bootstrap': ['../lib/react-bootstrap/react-bootstrap']
    },
    shim: {
        'bootstrap': {
            deps: ['jquery']
        },
        'react-bootstrap': {
            deps: ['react']
        }
    }
});

记得有方括号，否则CDN替换不会发生。

对于非 requirejs 就绪的脚本，在声明 paths 时不应使用方括号。否则，rjs 将拒绝构建并出现错误path fallback not supported。当然，您不会获得 CDN 的好处。 顺便说一句，RequireJS css 优化也有效。但仅限于内联 css，就像常规的 Requirejs 一样。