FuseBox and the epicness of dynamic modules

Dynamic modules are in very high demand nowadays. FuseBox offers a great support for latter, providing limitless possibilities.

To get your interested right away I have prepared a neat demo,

Before we get there, let me explain the internals of FuseBox, and why the framework is best at dealing with dynamic modules.

The EcoSystem

FuseBox offers 100% compatible commonjs ecosystem for browsers. Every single file that you bundle will be accessible via FuseBox API. It does not modify your code in any way, hence it’s possible to play around, merge bundles, and modify them at runtime.

Let’s check an example. Open this angular2 todo-demo. It’s powered by FuseBox. Open a developer console, and try to import this file like so:

FuseBox.import("./todo/todo-filter.pipe")

You are getting the exports of todo/todo-filter.pipe.

Now imagine how that can change your approach of coding.

Unlike WebPack, FuseBox creates virtual files:

_s.file("foo/bar.js", function(exports, require, module, __filename, __dirname){});

_s.file("foo/woo.js", function(exports, require, module, __filename, __dirname){})

It keeps the original structure within the bundle. Therefore fusing 2 bundles is going to be painless. It’s fun to create runtime plugins too.

Access to any npm module

Now, let’s go back to the playground

I have intentionally included NodeJS’ path module, and as you can see you can import it and use it as if you are running the code on server.

FuseBox.import("path")

Now the fun part. Dynamic modules respect their location. Therefore a require function is going to treat your imports accordingly.

FuseBox.dynamic("foo/moduleB.js", "")

As if you have a folder “foo” with “moduleB.js”

Now some magic. Let’s register index.js

FuseBox.dynamic("foo/index.js", "module.exports = require('./*')")

We are using a wildcard import in this example. Not as if we had to. Just for fun. Require the folder like so:

FuseBox.import("./foo")

It will triggerindex.js in that folder, just like in NodeJS.

Dynamic modules with FuseBox are fun. You can override modules, remove them, register new, create virtual packages and much much more for you to discover.

Get to know FuseBox!

FuseBox — bundle your project within a fraction of a second_FuseBox is a bundler/module loader that combines the power of webpack, JSPM and SystemJS. It takes 50–100ms to re…_hackernoon.com

If you like the project, don’t forget to star it on github! And of course, spread the word by clicking ♥

Join our gitter channel, we are active and very friendly!