We have answer of your question!

100% solved queries, no empty question

Question: RequireJS: bundling module with plugins


0

I'm using an external library that consists of a "core" plus multiple "extensions". Every extension depends on the core. Think jQuery or Rx.

What I need to do is to bundle the core together with some of the extensions and provide that as a single module. On the surface, it seems that something like this should work:

// lib.js
define(
    "lib",
    ["./Lib/lib", "./Lib/ext1", "./Lib/ext2"], 
    function(lib) { return lib; }
);

The problem, however, is that extensions expect the "core" to be available by the module ID of "lib". In other words, "ext1" is defined like this:

// Lib/ext1.js
define( ["lib"], function(lib) { lib.ext.someFunc = ... } );

One can spot the problem here: because the name "lib" refers to my "bundled" module instead of just the "core", it is not yet available at the time ext1 loads, so the whole chain becomes circular and falls apart.

Of course, I could map the core to "lib" and then give my bundled module a different name:

// main.js
require.config( { paths: { lib: "Lib/lib" } } );

// lib.js
define(
    "bundled-lib",
    ["./Lib/lib", "./Lib/ext1", "./Lib/ext2"], 
    function(lib) { return lib; }
);

But that approach is highly undesirable for a few reasons:

  1. It's just plain inconvenient to use a different name. There is no good common sense name that I could use instead, "lib" is pretty much the only option, and anything else will look ugly.

  2. But more importantly, this may lead to hard-to-catch bugs. Down the road, when I have forgotten all about this little hack, I may just follow my common sense and import "lib" instead of "bundled-lib", and then my extensions will not get loaded. Or sometimes they will. If some other module which correctly imports "bundled-lib" just happens to load before the new "lib"-importing module, then it will work. Otherwise, it won't. Meaning that my application will either crash or not depending on whether certain features have or have not been used.

So the bottom line is, I would like to bundle the core with extensions, call the bundle "lib", but somehow have the extensions to only import the core, while not modifying the extensions themselves.

Any ideas anyone?

Question author Fyodor-soikin | Source

Answer


1


This sounds very similar to jQuery and jQuery plugins. Seems like you have an understanding of the implications, so you just need to make a decision on which method is preferred.

I would not go with a module that returns 'lib', which already has those extensions. If you feel feel that you only need single dependency where you reference extended lib, just go with your 'bundled-lib' approach.

To stick with best practices and not confuse yourself in a future I believe it would be best not to bundle, but for those modules where you rely on extensions, include dependency to your core lib and those extensions:

  define(['lib', 'ext1'], function(lib){
    // module definition...
  });

This way it is VERY clear what are dependencies for this module. I'm sure you thought about it and I just hope it help you with making a decision.

Answer author Fyodor-soikin

Tickanswer.com is providing the only single recommended solution of the question RequireJS: bundling module with plugins under the categories i.e javascript , module , requirejs , amd , . Our team of experts filter the best solution for you.

Related Search Queries:


You may also add your answer

Thanks for contributing an answer to Tick Answer!