javascript - Load modules dynamically with Require.js - Stack Overflow

admin管理员组

文章数量:1023230

I am trying to load modules dynamically as described at the beginning of this post:

Reference link

Here is my scripts/main.js

require.config({
  baseUrl: 'scripts',
  paths: {
    jquery: 'lib/jquery-2.0.3'
  },
  config: {
    'main': {
      modules: ['mod1', 'mod2', 'mod3']
    }
  }
});

require(function(require, exports, module) {
  console.log("Loading modules");
  require(module.config().modules);
});

When main.js gets loaded, code inside the outer require function never gets executed and "Loading modules" never gets printed to the console. Having read the AMD documentation at This link, I can't see what I am doing wrong. What is the proper way of dynamically loading modules defined externally in an array?

Thanks!

UPDATE:

Here is what I have now:

// main.js
require.config({
  ...
  config: {
    'some_module': {
      modules: ['mod1']
    }
  }
});

require(['some_module'], function(some_module) {
});

// some_module.js
define(function(require, exports, module) {
  var mods = module.config().modules;

  var mod;
  for (var i=0; i < mods.length; i++) {
    mod = require(mods[i]);
    mod.fn_call();
  }
});

When I execute require(module.config().modules), mod1 indeed gets loaded. I am not sure how to use the return value of require to call a function returned by mod1, however.

With the code above, I get

Uncaught Error: Module name "mod1" has not been loaded yet for context: _
.html#notloaded

How can I access the functions from the modules I am loading?

I am trying to load modules dynamically as described at the beginning of this post:

Reference link

Here is my scripts/main.js

require.config({
  baseUrl: 'scripts',
  paths: {
    jquery: 'lib/jquery-2.0.3'
  },
  config: {
    'main': {
      modules: ['mod1', 'mod2', 'mod3']
    }
  }
});

require(function(require, exports, module) {
  console.log("Loading modules");
  require(module.config().modules);
});

When main.js gets loaded, code inside the outer require function never gets executed and "Loading modules" never gets printed to the console. Having read the AMD documentation at This link, I can't see what I am doing wrong. What is the proper way of dynamically loading modules defined externally in an array?

Thanks!

UPDATE:

Here is what I have now:

// main.js
require.config({
  ...
  config: {
    'some_module': {
      modules: ['mod1']
    }
  }
});

require(['some_module'], function(some_module) {
});

// some_module.js
define(function(require, exports, module) {
  var mods = module.config().modules;

  var mod;
  for (var i=0; i < mods.length; i++) {
    mod = require(mods[i]);
    mod.fn_call();
  }
});

When I execute require(module.config().modules), mod1 indeed gets loaded. I am not sure how to use the return value of require to call a function returned by mod1, however.

With the code above, I get

Uncaught Error: Module name "mod1" has not been loaded yet for context: _
http://requirejs/docs/errors.html#notloaded

How can I access the functions from the modules I am loading?

• javascript
• jquery
• requirejs

Share Improve this question Follow edited Jan 28, 2014 at 5:44 martasd asked Jan 27, 2014 at 10:57 martasdmartasd 12511 gold badge11 silver badge1010 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You should use the define instruction:

define(function(require, exports, module) {
    console.log("Loading modules");
    require(module.config().modules);
});

By config property of RequireJS configuration you define configurations for each of your modules. Then, in module definition you may access that config, in your case to load dependencies.

In any case, I don't think you need to expose your application's main entry point as an AMD module, because it makes no sense. It should be like this:

// some_module.js (or path for some_module alias)
define(function(require, exports, module) {
    require(module.config().modules);
    ...
    return function () {};
});

// main.js
require.config({
  ...
  config: {
    'some_module': {
      modules: ['mod1', 'mod2', 'mod3']
    }
  }
});

require('some_module'); // loads some_module, mod1, mod2, mod3

Why are you loading your modules in this way? You're trying to make a async call inside a loop, basically you are rewriting your "mod" variable every time with another require even without the async call of require return something.

// some_module.js
define(function(require, exports, module) {
  var mods = module.config().modules;

  var mod;
  for (var i=0; i < mods.length; i++) {
    mod = require(mods[i]);//your loop doesn't will wait for it...
    mod.fn_call();
  }
});

Load your modules in this way and if you want to put some dependencies, you do that with config(http://requirejs/docs/api.html#config), i don't see any reasons to not do this...

define(['mod1', 'mod2', 'mod3'], function(mod1, mod2, mod3) {
         //do whatever you want with your modules
    });

I am trying to load modules dynamically as described at the beginning of this post:

Reference link

Here is my scripts/main.js

require.config({
  baseUrl: 'scripts',
  paths: {
    jquery: 'lib/jquery-2.0.3'
  },
  config: {
    'main': {
      modules: ['mod1', 'mod2', 'mod3']
    }
  }
});

require(function(require, exports, module) {
  console.log("Loading modules");
  require(module.config().modules);
});

When main.js gets loaded, code inside the outer require function never gets executed and "Loading modules" never gets printed to the console. Having read the AMD documentation at This link, I can't see what I am doing wrong. What is the proper way of dynamically loading modules defined externally in an array?

Thanks!

UPDATE:

Here is what I have now:

// main.js
require.config({
  ...
  config: {
    'some_module': {
      modules: ['mod1']
    }
  }
});

require(['some_module'], function(some_module) {
});

// some_module.js
define(function(require, exports, module) {
  var mods = module.config().modules;

  var mod;
  for (var i=0; i < mods.length; i++) {
    mod = require(mods[i]);
    mod.fn_call();
  }
});

When I execute require(module.config().modules), mod1 indeed gets loaded. I am not sure how to use the return value of require to call a function returned by mod1, however.

With the code above, I get

Uncaught Error: Module name "mod1" has not been loaded yet for context: _
.html#notloaded

How can I access the functions from the modules I am loading?

I am trying to load modules dynamically as described at the beginning of this post:

Reference link

Here is my scripts/main.js

require.config({
  baseUrl: 'scripts',
  paths: {
    jquery: 'lib/jquery-2.0.3'
  },
  config: {
    'main': {
      modules: ['mod1', 'mod2', 'mod3']
    }
  }
});

require(function(require, exports, module) {
  console.log("Loading modules");
  require(module.config().modules);
});

When main.js gets loaded, code inside the outer require function never gets executed and "Loading modules" never gets printed to the console. Having read the AMD documentation at This link, I can't see what I am doing wrong. What is the proper way of dynamically loading modules defined externally in an array?

Thanks!

UPDATE:

Here is what I have now:

// main.js
require.config({
  ...
  config: {
    'some_module': {
      modules: ['mod1']
    }
  }
});

require(['some_module'], function(some_module) {
});

// some_module.js
define(function(require, exports, module) {
  var mods = module.config().modules;

  var mod;
  for (var i=0; i < mods.length; i++) {
    mod = require(mods[i]);
    mod.fn_call();
  }
});

When I execute require(module.config().modules), mod1 indeed gets loaded. I am not sure how to use the return value of require to call a function returned by mod1, however.

With the code above, I get

Uncaught Error: Module name "mod1" has not been loaded yet for context: _
http://requirejs/docs/errors.html#notloaded

How can I access the functions from the modules I am loading?

• javascript
• jquery
• requirejs

Share Improve this question Follow edited Jan 28, 2014 at 5:44 martasd asked Jan 27, 2014 at 10:57 martasdmartasd 12511 gold badge11 silver badge1010 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You should use the define instruction:

define(function(require, exports, module) {
    console.log("Loading modules");
    require(module.config().modules);
});

By config property of RequireJS configuration you define configurations for each of your modules. Then, in module definition you may access that config, in your case to load dependencies.

In any case, I don't think you need to expose your application's main entry point as an AMD module, because it makes no sense. It should be like this:

// some_module.js (or path for some_module alias)
define(function(require, exports, module) {
    require(module.config().modules);
    ...
    return function () {};
});

// main.js
require.config({
  ...
  config: {
    'some_module': {
      modules: ['mod1', 'mod2', 'mod3']
    }
  }
});

require('some_module'); // loads some_module, mod1, mod2, mod3

Why are you loading your modules in this way? You're trying to make a async call inside a loop, basically you are rewriting your "mod" variable every time with another require even without the async call of require return something.

// some_module.js
define(function(require, exports, module) {
  var mods = module.config().modules;

  var mod;
  for (var i=0; i < mods.length; i++) {
    mod = require(mods[i]);//your loop doesn't will wait for it...
    mod.fn_call();
  }
});

Load your modules in this way and if you want to put some dependencies, you do that with config(http://requirejs/docs/api.html#config), i don't see any reasons to not do this...

define(['mod1', 'mod2', 'mod3'], function(mod1, mod2, mod3) {
         //do whatever you want with your modules
    });

本文标签： javascriptLoad modules dynamically with RequirejsStack Overflow