Using define() in require.js

Question

I'm started learning using require.js

main.js

require(['jquery', 'underscore', 'Module1'], function($, _, Module1) {
    Module1.init();
    $('#output').html('Hello World!');
});

module1.js

define('Module1', [], function(app) {
    var init = function() {
        alert('Hello World!')       ;
    }

    return {
        init: init
    };
});

It's working but I'm wondering that I can change to define('MyApp', [] function(app){}); in module1.js?, and modify my main.js to

require(['jquery', 'underscore', 'MyApp'], function($, _, MyApp) {
    MyApp.init();
    $('#output').html('Hello World!');
});

Please help, so I can understand more about using require.js.

Thanks.

Edited

With help from below answer, I've modified my coding to

module1.js

define('MyApp', [], function(app) {
    var init = function() {
        alert('Hello World!')       ;
    }

    return {
        init: init
    };
});

main.js

require.config({
    baseUrl: 'js',
    paths: {
        Module1: 'module1'
    }
});

require(['jquery', 'underscore', 'Module1'], function($, _, MyApp) {
    MyApp.init();
    $('#output').html('Hello World!');
});

Unfortunately I still couldn't get it work, so please give me more advices.

damian · Accepted Answer · 2015-04-09 15:53:33Z

In the define part you're currently defining MyApp a a dependency of the module, not as the name of the module itself. Search for your requirejs.config part and change the name of your module.

requirejs.config({
    paths: {
        'Module1': '../somepath/module1.js', // change Module1 to MyApp
        ... 
    }
});

When you've changed the name of the module you can initialize the module with this:

require(['MyApp'], function(MyApp) {
    MyApp.init();
});

EDIT

You need to define the other modules/plugins as well.

main.js

require.config({
    baseUrl: 'js',
    paths: {
        'myApp': 'module1',
        'jquery': 'jquery.min',
        'underscore': 'underscore.min'
    }
});

require(['jquery', 'underscore', 'myApp'], function($, _, MyApp) {
    MyApp.init();
    $('#output').html('Hello World!');
});

module1.js

define(function() {
    var init = function() {
        alert('Hello World!');
    };

    return {
        init: init
    };
});

You can also define the name of the module in the module itself but I wouldn't advice it. From the require.js doc:

You may encounter some define() calls that include a name for the module as the first argument to define() [...] These are normally generated by the optimization tool. You can explicitly name modules yourself, but it makes the modules less portable -- if you move the file to another directory you will need to change the name. It is normally best to avoid coding in a name for the module and just let the optimization tool burn in the module names. The optimization tool needs to add the names so that more than one module can be bundled in a file, to allow for faster loading in the browser.

Thanks for very fast answer, I've modified my coding to the edited part, please advise me more.

Valery · Accepted Answer · 2014-04-23 08:19:01Z

1

In define part the first argument is name of module, the second argument - dependencies(the array of string), the third argument - is fabric function that run after all dependencies was satisfied. In require section you use dependency as the first argument and the fabric function as the second. So, in your example you change the name of dependency to MyApp and require section doesn't know what is the dependency Module1 because you change the name of this dependency.

answered Apr 23, 2014 at 8:19

Valery

155 bronze badges

Comments

Nicholas · Accepted Answer · 2014-05-06 04:06:39Z

1

If you are going to define a module with a name different to the file it is in then you should use the bundles config.

require.config({
    bundles: {
        module1: ["MyApp"]
    }
});

You can add other modules you define in the same file to the array.

If there is only a single module in the file then you should define it without a name and use the paths to point the module name to the file like enyce12's answer shows.

answered May 6, 2014 at 4:06

Nicholas

8568 silver badges17 bronze badges

Collectives™ on Stack Overflow

Using define() in require.js

Edited

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edited

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related