Difference between require() and define() in RequireJS? [duplicate]

One core difference that annoyed me in early use was figuring out that a define might never be called.

As long as there is only one define per file, it will register that module as available under that filename. However, define modules are only loaded once a require function asks for each of them.

Define: If you need a XXX, then load these other things first, then return the result of this function.

Require: Load these other things, then run this function. (no "if")

Example: Let's say you include this JS file in your page:

// this is in company/welcomepage.jsdefine(['company/ui_library'],    function(uiLib) {        console.log('Welcome to {company}!');    });

If that's the only Javascript file, you could open your page, and there would be nothing in the console log, in spite of the script telling it to welcome the user. However, that changes if somewhere in the page, or in another script, you insert the following:

require(['company/welcomepage'], function() {    // optionally insert some other page-initialization logic here});

Now, the page will put a welcome message in the console when it loads.

In fact, with that second one in place, there would be no need to manually include welcomepage.js as a <script> tag; it would load it from its location as soon as it sees the require, and realizes it needs it.

require and requirejs are the same.

require === requirejs // true

require is a way to load a module which has been defined. For example to load the logger module I could do:

require(["logger"], function(logger){  logger.bla("S");});

Here i am calling require, specifying an already defined module called logger and using it by calling its bla method.

define is a way to define a module. For example to define a logger module I could do:

// logger.jsdefine(function(){  return {    bla: function(x){      alert(x);    }  }});

Here i called define and defined the logger module. in this module I returned the bla function i want to expose.

Sometimes define looks very similar to exports because define can also depend and use other modules just like require can use other modules. Let me show you the same logger module, this time using a module

// logger.jsdefine(["popup"], function(popup){  return {    bla: function(x){      popup.show(x);    }  }});

Here the logger module I defined, also has a dependency called popup and thus it looks like require.

I believe you always use define for your module definitions. You have several flavours to do so, you can define a module with its dependencies in an array as the first argument to define (as in the example you posted).

Or you can use the Simplified CommonJS wrapper, something like this:

define(function (require) {    var otherModule = require('otherModule');    return function () {        return otherModule.operation();    };});

Maybe you got mixed up with the JSONP service dependency format, which uses require() to load the service, and then specify define() as the JSONP callback which will eventually define the module once the service responds.

So in the end, you use define() to define modules, and require() to load them.