-
Notifications
You must be signed in to change notification settings - Fork 0
RequireJS support
According to RequireJS' website
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
What this means in practice is that one can use RequireJS to modularize big javascript codebases. RequireJS achieves this by implementing a semi-standard API called Asynchronous Module Definition (other similar ideas include CommonJS ). Using AMD it's possible to resolve and load javascript modules, usually kept in separate files, at client side while allowing server side optimization, that is, for production use, dependencies can be minified and combined. Therefore, RequireJs supports both client side and server side resolutions.
RequireJs support is enabled by default, so all you need to do is to drop javascript modules into public/javascripts
and then bootstrap the module using one of the preferred RequireJS bootstraping techniques.
-
require.js
is bundled with play, so users do not need to add it manually - in dev mode dependencies resolved client side, closure compiler - without commonJS support - is run through the scripts for sanity check but no files are modified
-
requireJs
setting key in your build script should contain the list of modules you want to run through the optimizer (modules should be relative toapp/assets/javascripts
) - empty
requireJs
key indicates that no optimization should take place -
stage
,dist
andstart
commands were changed to run RequireJS's optimizer for configured moduled inapp/assets/javascripts
. The minified and combined assets are stored inapp/assets/javascripts-min
- a new template tag
@requireJs
can be used to switch between dev and prod mode seamlessly - by default a rhino based optimizer is used, the native, node version can be configured for performance via
requireNativePath
setting - right now this is enabled only for javascript but we are looking into using it for css as well
create app/assets/javascripts/main.js
:
require(["helper/lib"],function(l) {
var s = l.sum(4, 5);
alert(s);
});
create app/assets/javascripts/helper/lib.js
:
define(function() {
return {
sum: function(a,b) {
return a + b;
}
}
});
create app/views/index.scala.html
:
@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, module = routes.Assets.at("javascripts/main").url)
In project/Build.scala
add:
val main = play.Project(appName, appVersion, appDependencies).settings(
requireJs += "main.js"
)
After rendering the page in Dev mode you should see: 9
popping up in an alert
your application's jar file should contain (public/javascript/main.js
):
define("helper/lib",[],function(){return{sum:function(e,t){return e+t}}}),require(["helper/lib"],function(e){var t=e.sum(5,4);alert(t)}),define("main",function(){})
- Working with public assets
- Using CoffeeScript
- Using LESS CSS
- Using Google Closure Compiler
- Using RequireJs
- Installing Play
- Creating a new application
- Anatomy of a Play application
- Using the Play console
- Setting-up your preferred IDE
- Sample applications