RequireJs - Define vs Require

Question

For modules I don't return an object I have been using require instead of define. For example say I have the following jQuery plugin (jquery.my-plugin.js):

require(['jquery'], function($) {
    $.fn.myPlugin = function(options) {
        ...
    };
});

Now if I say the following in another module:

require(['jquery', 'jquery.my-plugin'], function($) {
    $('#element').myPlugin();
});

I've found this doesn't work because myPlugin has not been registered. However if I change the require to a define within my jquery.my-plugin module then it works fine.

I'd appreciate it if someone could clear up why I have to do this. I like to understand something fully before I go ahead and use it. Thanks

possible duplicate of [when to use require and when to use define](http://stackoverflow.com/questions/9507606/when-to-use-require-and-when-to-use-define) — Armand, Jul 31 '15 at 12:32

score 109 · Accepted Answer · edited Nov 25 '15 at 21:35

109

Essentially, when you use require you are saying "i want this, but i want all its dependencies too". So in the example below, we're requiring A, but require will search for all dependencies and ensure they are loaded before continuing.

require(['a'], function(a) {
    // b, c, d, e will be loaded
});

// File A
define(['b','c','d','e'], function() {
    return this;
});

General rule of thumb is you use define when you want to define a module that will be reused by your application and you use require to simply load a dependency.

edited Nov 25 '15 at 21:35

Arashsoft

2,749
5
35
58

answered Jun 28 '13 at 14:10

Paul Osborne

1,550
1
10
11

1

Thanks but why can't I use require instead of define for File A? Essentially it would be doing the same saying File A requires b, c, d and e before it can execute. – nfplee Jun 28 '13 at 14:43
@PaulOsborne: Sounds similar to: "use class definitions (`module.exports`) if you have hierarchial stuff and use generic module objects (`exports`) if you have common reusable utils". That said, do we always use `define` and generic module objects together and `require` and class definitions together ? – Sudheer Aedama May 30 '14 at 21:02
In that case, the second 'require' statement in the OP should be 'define' and the 'jquery' dependency does not need to be listed since 'jquery' is already a dependency for 'jquery.my-plugin' – Niko Bellic Aug 14 '14 at 20:40
2

@NikoBellic no the first 'require' statement in my original question should use a 'define' since it is a dependency (this answer has the dependency 'File A' the other way around). You are correct that you do not need to repeat the dependency on 'jquery' however. – nfplee Jan 15 '15 at 09:11
@nfplee Thanks for answering. Yeah, I agree that the first 'require' in your OP needs to be a define. Please take a look at my answer below. Let me know what you think. I'm not 100% sure, but I think the reason $ doesn't need to be included in the second 'require' is because it is global. – Niko Bellic Jan 15 '15 at 16:35
@nfplee What would be the order of calls in that case of define and require? – meDeepakJain Feb 24 '20 at 07:21

score 5 · Answer 2 · answered Jan 15 '15 at 16:32

Below is the code that should be inside jquery.my-plugin.js which defines a module called 'jquery.my-plugin' that can be used as a dependency elsewhere.

define(['jquery'], function($) { //jquery is a dependency to the jquery.my-plugin module
    $.fn.myPlugin = function(options) { //adds a function to the *global* jQuery object, $ (global since jQuery does not follow AMD)
        ...
    };
});

Below is a section of code where you want to attach your plugin function to the global jQuery object and then use it ...

require(['jquery.my-plugin'], function() { // jquery.my-plugin is loaded which attaches the plugin to the global JQuery object as shown above, then this function fires

    //the only reason $ is visible here is because it's global. If it was a module, you would need to include it as a dependency in the above require statement
    $('#element').myPlugin(); //the $ refers to the global object that has the plugin attached
});

All looks good with me. Yeah the $ object is defined globally so I guess it's optional whether or not to include it within the require statement. By doing so you do avoid potential issues with conflicting libraries and it is consistent with the define statement above. — nfplee, Jan 15 '15 at 22:29

RequireJs - Define vs Require

2 Answers2

Linked