javascript - requirejs export global variable - Stack Overflow

admin管理员组

文章数量:1398798

I am trying to use bootbox () with requirejs.

main.html

<script>
var require = {
    baseUrl: 'js',
    paths: {
        "jquery"    :['jquery-1.11.0.min'],
        "bootbox"   :['bootbox.min'],
        "bootstrap" :['//netdna.bootstrapcdn/bootstrap/3.1.1/js/bootstrap.min']
    },
    shim:
        'bootstrap' :{deps:['jquery']},
        'bootbox'   :{deps:['bootstrap'],exports: 'bootbox'}
    }
}
</script>
<script src="require.min.js"></script>
<script src="myscript1.js"></script>

main.js

define(['bootbox'],function(bootbox){
    bootbox.alert("Hello world!"); // working properly
});

myscript1.js

require(['main'],function(){
    bootbox.alert("Hello world!"); // not functioning (bootbox is not defined)
});

Normally once bootbox plugin is loaded, we can use bootbox anywhere on the page with this: bootbox.alert("Hello world!"); When using requirejs, I have to pass the bootbox variable and define it everytime when using requirejs in order to use bootbox. I have tried with "exports", but it doesn't seem help.

How can we have the bootbox variable available globally once it is loaded?

Thank you.

I am trying to use bootbox (http://bootboxjs.) with requirejs.

main.html

<script>
var require = {
    baseUrl: 'js',
    paths: {
        "jquery"    :['jquery-1.11.0.min'],
        "bootbox"   :['bootbox.min'],
        "bootstrap" :['//netdna.bootstrapcdn./bootstrap/3.1.1/js/bootstrap.min']
    },
    shim:
        'bootstrap' :{deps:['jquery']},
        'bootbox'   :{deps:['bootstrap'],exports: 'bootbox'}
    }
}
</script>
<script src="require.min.js"></script>
<script src="myscript1.js"></script>

main.js

define(['bootbox'],function(bootbox){
    bootbox.alert("Hello world!"); // working properly
});

myscript1.js

require(['main'],function(){
    bootbox.alert("Hello world!"); // not functioning (bootbox is not defined)
});

Normally once bootbox plugin is loaded, we can use bootbox anywhere on the page with this: bootbox.alert("Hello world!"); When using requirejs, I have to pass the bootbox variable and define it everytime when using requirejs in order to use bootbox. I have tried with "exports", but it doesn't seem help.

How can we have the bootbox variable available globally once it is loaded?

Thank you.

• javascript
• jquery
• requirejs
• bootbox

Share Improve this question Follow asked Apr 28, 2014 at 7:46 user1995781user1995781 19.5k4545 gold badges139139 silver badges241241 bronze badges 1

• 1 The whole point of require.js is not have variables available globally and to program with modules. Why don't you create a Modal 'ponent' which uses bootbox which you can use as and when you need it. This will encapsulate the implementation allowing you to swap out the library if you choose to use a different one for example without affecting any of the code that uses it. – mbx-mbx Commented Apr 28, 2014 at 7:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Here's the deal. Bootbox detects whether it is running in an AMD loader in place (like RequireJS). If so, it won't export anything into the global space but will instead define itself as an AMD module, to be loaded by an AMD loader.

Tidoo's suggestion of loading Bootbox with a script tag works, if you do it carefully. You'd have to load Bootbox before you load RequireJS, for one thing. Otherwise, it would detect that RequireJS is loaded, determine that it is running with an AMD loader, and define itself as an AMD module. This would cause a mismatched anonymous module error from RequireJS. Another thing is that you'd have to load jQuery outside RequireJS and load it before Bootbox. So that's another script tag.

I'd suggest avoiding that solution by simply modifying your code to add the required dependency:

require(['bootbox', 'main'],function(bootbox){
    bootbox.alert("Hello world!");
});

Also, you must not use a shim configuration for Bootbox because it detects whether there is an AMD loader around and calls define by itself if it detects one. A shim configuration is needed only for code that does not call define.

If you want Bootbox to be available globally you should include it manually with a script tag. RequireJS doesn't expose it.

However, I highly remend against this. The whole idea of dependency frameworks such as RequireJS is that you don't define anything on global scope, but to make your dependencies explicit. This not only allows you to lazy load scripts, but it also makes it possible to later replace dependencies, e.g. for unit testing.

EDIT: As Louis correctly mentioned Bootbox already has AMD support. If it detects RequireJS (or any other AMD loader) it doesn't expose anything to the global scope, but since it has AMD support you also don't need to shim it.

本文标签： javascriptrequirejs export global variableStack Overflow