如何在Play框架中使用RequireJS优化器? [英] How to use RequireJS optimizer in Play framework?

问题描述

如广告所示，Play中的rjs可以

As advertised, the rjs in Play can

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

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!

但是，我似乎无法使其中任何一个起作用.

However, I cannot seem to get any of that to work.

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

3. 我无法使依赖项注入在生产模式下工作.例如，当我想在我的代码中插入jquery时

1. I tried running my Play app in production mode, and all my webjar javascripts are still being referenced as local.
2. I do not see the .min version of javascript files being used in production.

3. I cannot get dependency injection to work in production mode. For example, when I want to inject jquery in my code like this

define(['jquery']，function($){ 使用严格"； console.log($.grep); 返回 { sum:函数(a，b){ 返回a + b; } }; });

define(['jquery'], function ($) { 'use strict'; console.log($.grep); return { sum: function (a, b) { return a + b; } }; });

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

I can get this to work fine in dev mode, but in production mode, the rjs failed saying

[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的错误位置

Obviously it is looking at the wrong location for jQuery, despite the config setup generated by Webjar

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)设置.

I am using Play 2.4.0, with pipelineStages := Seq(rjs, digest) setup in my build.sbt.

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

Please let me know where I got it wrong.

谢谢！

推荐答案

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

It turns out that RequireJS optimization support does not apply to all Webjars, but rather limited to Classic Webjars.

即使那样，常规模块也必须包含一个webjar构建文件，以便rjs起作用.

Even then, a webjar build file has to be included with the regular module in order for rjs to work.

例如，如果您查看jQuery经典的Webjar，您会发现其中包含特殊的Webjar构建说明.查看该文件以供参考.

If you look at the jQuery classic webjar, for example, you will see that a special webjar build instruction is included. Take a look at that file for your information.

一旦您确定一个已准备好RequireJS的webjar，就可以让sbt-rjs完成它.这是我的设置供参考:

Once you have identify a webjar that is RequireJS ready, you can let sbt-rjs does it thing. Here is my setup for reference:

/** 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替换将不会发生.

Remember to have square brackets, otherwise CDN replacement will not happen.

对于非requirejs就绪的脚本，在声明paths时不应使用方括号.否则，rjs将拒绝生成错误path fallback not supported的代码.当然，您不会获得CDN的好处. 只是一点说明，RequireJS css优化也可以.但仅限于内联css，就像常规的Requirejs一样.

For the non-requirejs ready scripts, you should not have square brackets when declaring the paths. Otherwise, rjs will refuse to build with error path fallback not supported. Of course, you won't get the CDN benefit. Just a side note, RequireJS css optimization works, too. But only limited to inlining the css, like the regular Requirejs does.

这篇关于如何在Play框架中使用RequireJS优化器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！