RequireJS Optimization

Question

I`m using r.js to optimize my app, as i saw in several samples, i used build.json configuration file to config my optimization options.

The problem is that when i set reference to the output javascript file after optimization I`m getting the following error in the browser:

Uncaught ReferenceError: define is not defined main-built.js:14735

Looks like, all my app modules are exists but RequireJs is missing.

This is my build.json configuration file:

{
  "baseUrl": "../", 
  "name": "src/modules/main",
  "include": ["src/modules/main", "src/modules/navbar/navbar", "src/modules/contact/contact", "src/modules/about/about"], 
  "exclude": [], "optimize": "none", "out": "main-built.js", 
  "insertRequire": ["src/modules/main"]
}

How do i add requirejs to the output js file? maybe i need to add something else to config? or maybe the problem is not the config?

Thanks, Ori

Answer 1

Try:

<script src="scripts/require.js" data-main="scripts/main-built"></script>

Answer 2

If I understood correctly, this is how it should work.

What r.js does is that it compiles all RequireJS modules into a single file. However you still need to load that file with RequireJS script, for example:

<script data-main="scripts/main" src="scripts/require.js"></script>

So just add a minified version of require.js to your website and load the optimized module using that.

Answer 3

You have to include require.js if you have modularized your project using RequireJS:

<script data-main="scripts/main" src="scripts/require.js"></script>

This is because RequireJS handles the loading of modules and resolving dependencies. Without it, your browser does not know what define means. A way to get around this is to use UMD (Universal Module Definition). This makes it so that your module can be used with or without RequireJS. You can see many examples here. One that fits your use case is:

// Uses AMD or browser globals to create a module.

// If you want something that will also work in Node, see returnExports.js
// If you want to support other stricter CommonJS environments,
// or if you need to create a circular dependency, see commonJsStrict.js

// Defines a module "amdWeb" that depends another module called "b".
// Note that the name of the module is implied by the file name. It is best
// if the file name and the exported global have matching names.

// If the 'b' module also uses this type of boilerplate, then
// in the browser, it will create a global .b that is used below.

// If you do not want to support the browser global path, then you
// can remove the `root` use and the passing `this` as the first arg to
// the top function.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else {
        // Browser globals
        root.amdWeb = factory(root.b);
    }
}(this, function (b) {
    //use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));