CODEWITHSUNDEEP
javascriptrequirejs
Artisan
Artisan

Reputation: 4112

Using define() in require.js

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.

Upvotes: 0

Views: 156

Answers (3)

damian
damian

Reputation: 5444

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.

Upvotes: 1

Nicholas
Nicholas

Reputation: 846

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.

Upvotes: 1

Valery
Valery

Reputation: 15

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.

Upvotes: 1

Related Questions