I am struggling with the requirejs optimizer. This code will work if I just load it in the browser without optimization. If I run the optimizer I get
: ENOENT, no such file or directory 'C:\Users\dev\checkout\src\main\webapp\resources\scripts\
json2.js'
In module tree: main
This is the code
requirejs.config({
paths : {
jquery : "lib/jquery",
bootstrap : "lib/bootstrap",
modals : "lib/modals",
tablesort : "lib/tablesort",
json2 : "lib/json2"
},
shim : {
"bootstrap" : [ "jquery" ],
"modals" : [ "jquery" ],
"tablesort" : [ "jquery" ],
"json2" : [ "jquery" ]
}
});
require([ "jquery", "json2","bootstrap", "modals", "tablesort", "registermodule", "personsmodule" ], function($) {
What needs to be done to get the optimizer working? I tried putting lib/json2 in the require. Then I get jQuery issues because it is non AMD modules.
Edit: still struggling with this one. Tried the simpliest example. Works fine in browser but the optimizer complains about not finding the files. lib/jquery.js and lib/modal.js.
requirejs.config({
paths : {
jquery : "lib/jquery",
modals : "lib/modals"
},
shim : {
"bootstrap" : [ "jquery" ],
"modals" : [ "jquery" ]
}
});
require([ "jquery", "modals" ], function($) {
console.log($("#leverandor_span").text());
$("#register_modal").modal("show");
});
Advertisements. A module in RequireJS is a scoped object and is not available in the global namespace. Hence, global namespace will not be polluted. RequireJS syntax allows to load modules faster without worrying about keeping track of the order of dependencies.
Syntax. define(['module1', 'module2'], function (module1, module2) { //define the module value by returning a value return function () {}; }); You can pass a list of module names when you define a module and RequireJS can be used to retrieve these modules before executing the module.
RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming. It also helps to improve the speed and quality of the code.
As per RequireJS API documentation, shim lets you. Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.
See mainConfigFile
. This was put into place so you do not have to copy your require configuration into runtime/optimize-time files, keeping your build DRY:
//By default all the configuration for optimization happens from the command
//line or by properties in the config file, and configuration that was
//passed to requirejs as part of the app's runtime "main" JS file is *not*
//considered. However, if you prefer the "main" JS file configuration
//to be read for the build so that you do not have to duplicate the values
//in a separate configuration, set this property to the location of that
//main JS file. The first requirejs({}), require({}), requirejs.config({}),
//or require.config({}) call found in that file will be used.
mainConfigFile: '../some/path/to/main.js',
The problem: the require.config() is not parsed by r.js. That configuration is only for runtime. For r.js we need to create another file to configure the paths and other stuff.
({
appDir: "../",
baseUrl: "./",
dir: "dist",
modules: [
{
name: "bootloader"
}
],
paths: {
// libraries path
"json": "lib/json2",
"jquery": "lib/jquery",
"underscore": "lib/underscore",
"bootstrap": "lib/bootstrap",
"backbone": "lib/backbone",
"hogan": "lib/hogan",
// require plugins
"css": "lib/css",
"hgn": "lib/hgn",
"text": "lib/text"
}
})
$r.js -o app.build.js
More details here: http://japhr.blogspot.it/2011/12/optimizing-requirejs-part-2.html
Build file options: http://requirejs.org/docs/optimization.html#wholeproject
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With