How do I export a global variable from Require.js?

Question

I'm trying to make an external library using Require.js. Thanks to Require.js not compiling single js file correctly and Require.js (almond.js) Timing Off I've figured out how to get everything to "compile" in to a single optimized/built file, and that single file works. There's just one problem: I can't figure out how to set a variable for my library.

Let's say I want my library to create window.Foo. I tried using a main.js file with:

window.Foo = require([], function() {
    window.Foo = {someValue: 1};
    return {someValue: 2};
});

and a wrapper end fragment of:

    return require('main');
}));

As you can see, I tried to expose Foo to the global space both by explicitly setting window.Foo from inside the require call, and setting it explicitly from outside via the return value of the end fragment. But neither one works; if I add a console.log(window.foo) right after I load the built file, it tells me that window.Foo is undefined.

If I do a window.setTimeout window.Foo eventually does get set (to {someValue: 1}), but I can't very well expect my users to have to wrap all their code with a timeout. Can anyone please explain how I can get window.Foo to be defined as soon as my optimized/built file is loaded?

Answer 1

If you follow James' instructions here, you can easily produce a library designed as a bundle of RequireJS modules that someone can load synchronously.

I've got a github repository illustrating the whole thing. The salient points:

• The main module exports Foo to the global space:

  define('main', ["./modC"], function () {
  
  console.log("inside");
  window.Foo = {someValue: 1};
  
  return {someValue: 2};
  
  });
  

  It also returns a value that is exported by the start fragment as Bar (that's the line that says root.Bar = factory();). So it illustrates two ways to export to the global space.

• The wrapper code used by r.js starts main with the synchronous form of require:

  require(`main`);
  

If you load it, you'll see the following output:

outside
loaded modC
inside
out in the HTML!
value of window.Foo: Object {someValue: 1}
value of window.Bar: Object {someValue: 2}

Answer 2

Calls to require() are async, meaning the return value of the function that you pass as argument is not returned by require() itself. Your issue could be solved in different ways, the RequireJS way is defining your code in a module and requiring it as a dependency:

// mymodule.js
define([], function() {
    window.Foo = {someValue: 1};
    return {someValue: 2};
});

// main.js
require(['mymodule'], function (mymodule) {
    console.log(window.Foo); // {someValue: 1}
    console.log(mymodule); // {someValue: 2}
});