iggredible / bandler

The simple Javascript module bundler. Capable of bundling simple CJS or ESM modules.

Why did I create this?

At work we use webpack and I use rollup for personal use. Up to this point, much of the bundling process is rather magical. You tell them where the entry is, designate output, and poof! Your code is automagically bundled.

I created this project mainly to teach myself how bundler works. My hope is that others could understand how bundlers work from this project.

This project is inspired by minipack and wbpck-bundler, both of which accomplishes similar things. In case you're wondering, the main difference is that minipack bundles ES6 and wbpck-bundler bundles CJS. Bandler attempts to bundle both CJS and ES6 without additional config from user.

With that being said, this project is not production-ready. This is not a webpack/ rollup replacement. This is a toy bundler 🎁. You have been warned.

Code explanation

I wrote an article explaining the code. You should check it out!

Usage

Run node ./bandler.js /direction/to/entry.js

1. Install dependencies: npm i

2. This project has 2 examples: ./example1/entry.js uses ES6 modules and ./example2/entry.js uses CJS modules

3. Run either entries, for example: node ./bandler.js ./example2/entry.js

It will output the bundled code on terminal, such as this:

(function(modules){
  const require = id => {
    const {factory, map} = modules[id];
    const localRequire = requireDeclarationName => require(map[requireDeclarationName]);
    const module = {exports: {}};

    factory(module, localRequire);
    return module.exports;
  }
  require(0);
})({0: {
    factory: (module, require) => {
      const module1 = require('./module1.js');

      module1();

    },
    map: {"./module1.js":1}
  },1: {
    factory: (module, require) => {
      "use strict";

      var module1 = function module1() {
      console.log("Hello from module1!");
  };

      module.exports = module1;
    },
    map: {}
}})

The code above is a bundled code from example2 entry and all its dependencies. Copy/paste the code on your browser console to see the code above works (disclaimer: it is just console.log).

Contributing

If you think this project could be made clearer/ better/ found bugs, please feel free to submit PRs.