RequireJS: How to load multiple functions from one module?

Question

I have a module that needs to return 3 functions,i wrote the module like this (sorry about all the returns, I translated this directly from coffeescript):

(function() {
  define("inColor", [], function() {
    var init;
    init = function(value, obj) {
      var foundVal;
      foundVal = void 0;
      $.each(obj, function(key, val) {
        if (value === key) {
          foundVal = val;
        }
      });
      return foundVal;
    };
    return init;
  });

  define("fillColor", ['inColor'], function(inColor) {
    var capletColor, init;
    capletColor = {
      primary: "#3DA0DB",
      info: "#B5D1D8",
      success: "#2ECC71",
      warning: "#FFCC33",
      danger: "#E15258",
      inverse: "#62707D",
      theme: "#f37864",
      "theme-inverse": "#6CC3A0",
      palevioletred: "#913B53",
      green: "#99CC00",
      lightseagreen: "#1ABC9B"
    };
    init = function(obj) {
      var codeColor;
      inColor = inColor(obj.data("color") || obj.data("toolscolor"), capletColor);
      codeColor = inColor || obj.data("color") || obj.data("toolscolor");
      return codeColor;
    };
    return init;
  });

  define("rgbaColor", [], function() {
    var init;
    init = function(hex, opacity) {
      var b, bigint, g, r;
      bigint = parseInt(hex.replace("#", ""), 16);
      r = (bigint >> 16) & 255;
      g = (bigint >> 8) & 255;
      b = bigint & 255;
      if (opacity || opacity <= 1) {
        return "rgba(" + r + "," + g + "," + b + "," + (opacity || 1) + ")";
      } else {
        return "rgb(" + r + "," + g + "," + b + ")";
      }
    };
    return init;
  });

  define('colorModuleLoader', ['inColor', 'fillColor', 'rgbaColor'], function(inColor, fillColor, rgbaColor) {
    return {
      inColor: inColor,
      fillColor: fillColor,
      rgbaColor: rgbaColor
    };
  });

}).call(this);

Now i load my module like this:

require(['tmp/assets/scripts/admin/modules/caplet.color'], function(colorModuleLoader) {
    return window.alert(colorModuleLoader.rgbaColor("#F37864", 0.1));
  });

The module is loaded, but error says colorModuleLoader is undefined when i try t alert the value,can anyone explain why?

thank you for the input, but i found out people tend to read js instead of coffee on this site — user2002495
– user2002495, Commented Apr 15, 2014 at 11:02
My guess is that in case of multiple modules, and/or the explicit file require, require.js doesn't know your callback does expect the colorModuleLoader module — Bergi
– Bergi, Commented Apr 15, 2014 at 11:06

Louis · Accepted Answer · 2014-04-15 11:04:13Z

8

As far as RequireJS is concerned you have four modules there, and they are all in one file. (As many modules as define calls.) The basic rules for proper operation of RequireJS are that you should have one module per file and your define calls should not name their modules. (The optimizer r.js adds module names.) There are some exceptions to these rules but you really need to know what you are doing to use these exceptions (and be able to explain why you need to do something different than the basic rule).

What you can do is to have your tmp/assets/scripts/admin/modules/caplet.color.js file contain one module that exports all the functions you need:

define(function() {

    function inColor() {...}

    function fillColor() {...}

    function rgbaColor() {...}

    return {
      inColor: inColor,
      fillColor: fillColor,
      rgbaColor: rgbaColor
    };    

});

answered Apr 15, 2014 at 11:04

Louis

152k28 gold badges288 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2002495 Over a year ago

Works like magic, thanks. Anyway i noticed you are the same man who helped me in requirejs question yesterday, you are pretty cool man :)

Louis Over a year ago

Glad to help! By the way, since there was a discussion about Coffee Script vs JS in comments. I do appreciate that you posted in JS. (And it was a good thing to put a comment that it was translated from CS for those who would want to complain about the generated code.) I don't use CS so while I can read it, I find it more difficult. :)

Tim Hutchison · Accepted Answer · 2017-06-09 15:17:39Z

1

If you do have to pull multiple modules from one file you can do it using bundles in your requirejs.config({}) statement.

requirejs.config({
  bundles: {
    'tmp/assets/scripts/admin/modules/caplet.color':['inColor', 'fillColor', 'rgbaColor', 'colorModuleLoader']
  }
});

require(['inColor', 'fillColor', 'rgbaColor', 'colorModuleLoader'], function(inColor, fillColor, rgbaColor, colorModuleLoader){
  // write code here
})

answered Jun 9, 2017 at 15:17

Tim Hutchison

3,65312 gold badges47 silver badges79 bronze badges

Collectives™ on Stack Overflow

RequireJS: How to load multiple functions from one module?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related