Geek Answers Handbook

How to use the RequireJS optimizer in the Play platform?

As indicated, rjs on Play may

make sure that any JavaScript resources referenced in WebJar are automatically referenced by the jsdelivr CDN. In addition, if a .min.js file is found, it will be used instead of .js. The added bonus here is that no changes are required for your html!

However, I cannot get anything to work.

  • I tried to launch the Play application in production mode, and all my webjar javascripts still refer to local ones.
  • I do not see the version of javascript .min files that are used in the production process.

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

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

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

 [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)

Obviously he is looking for the wrong location for jQuery, despite the configuration setting generated by Webjar

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

to have the correct location for jquery .

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

Please let me know where I was wrong.

Thanks!

+5
source share
1 answer

It turned out that RequireJS optimization support does not apply to all Webjars, but is limited to classic Webjars. enter image description here

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

If you look at classic webjar jQuery, for example, you will see that a special instruction for building webjar is included. Take a look at this file for your information. enter image description here

Once you define a webjar that is RequJS ready, you can let sbt-rjs do this. 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'] } } });

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

For scripts that are not required, you should not have square brackets when declaring paths . Otherwise, rjs will refuse to build with the error path fallback not supported . Of course, you will not get the benefits of CDN. Just note that optimizing RequireJS css too. But it is limited only to embedding css, as regular Requirejs does.

+4
source

More articles:


All Articles