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

2024-02-06

正如广告所宣传的那样,rjs在游戏中可以

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

然而,我似乎无法让其中任何一个发挥作用。

  1. 我尝试在生产模式下运行我的 Play 应用程序,但我的所有 webjar javascript 仍被引用为本地。
  2. 我没有看到.min生产中使用的 javascript 文件的版本。
  3. 我无法让依赖注入在生产模式下工作。例如,当我想注入时jquery在我的代码中是这样的

    定义(['jquery'],函数($){ '使用严格'; console.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 中进行设置。

请告诉我哪里错了。

Thanks!


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

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

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. enter image description here

一旦你确定了一个支持 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 那样。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在Play框架中使用RequireJS优化器? 的相关文章

随机推荐