Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I am struggling with the requirejs optimizer and non AMD modules

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");

});
like image 604
pethel Avatar asked Jul 04 '12 06:07

pethel


People also ask

What is AMD RequireJS?

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.

How do you use RequireJS?

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.

Why do we need RequireJS?

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.

What is RequireJS shim?

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.


2 Answers

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',
like image 190
ProVega Avatar answered Oct 15 '22 17:10

ProVega


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.

Create a file (e.g app.build.js) and configure the paths

({
   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"
   }
})

run the optimizer:

$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

like image 33
Marcelo De Zen Avatar answered Oct 15 '22 18:10

Marcelo De Zen