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

Question

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

ensure that any JavaScript resources referenced from within a WebJar are automatically referenced from the jsdelivr CDN. In addition if any .min.js file is found then that will be used in place of .js. An added bonus here is that there is no change required to your html!

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

我尝试在生产模式下运行我的 Play 应用程序，我的所有 webjar javascripts 仍然被引用为本地。

我没有看到 .min生产中使用的 javascript 文件的版本。

我无法让依赖注入(inject)在生产模式下工作。例如，当我要注入(inject) jquery在我这样的代码中

定义(['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，带有 pipelineStages := Seq(rjs, digest)在我的 build.sbt 中设置。

请让我知道我在哪里弄错了。

谢谢!

Answer 1

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


即便如此，为了让 rjs 工作，必须在常规模块中包含一个 webjar 构建文件。


例如，如果您查看 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 一样。