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

Question

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

确保从jsdelivr CDN自动引用从WebJar中引用的任何JavaScript资源.此外,如果找到任何.min.js文件,那么将使用该文件代替.js.这里的另一个好处是你的html不需要改变!

但是,我似乎无法让任何一个工作.

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

3. 我不能让依赖注入在生产模式下工作.例如,当我想像jquery我这样注入我的代码时

   define(['jquery'],function($){'use strict'; console.log($.grep); return {sum:function(a,b){return 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)

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

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中使用setup.

请告诉我哪里弄错了.

谢谢!

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 那样。