adamisntdead / wbpck-bundler

A Little Toy Javascript Module Bundler 🎁

A toy module bundler, kind of like webpack but missing loads of features ❤️

A module bundler is a tool that takes all of your code and all of your codes dependencies and all of their dependencies (and so on) and puts it into a single, standalone file, usually so it can be run in the browser.

In this repo, I will (attempt to) build a little toy module bundler for learning purposes 📝

The Code

You should look at this post about the code. There's only about 60 lines of code, mixed in with some explanations of how it all fits together.

Usage

If you want to test out how it works, the code exports a function that you pass in the full path to your entry point, and it will return the bundle.

const bundle = require('./index')
const entry = __dirname + '/entry.js'

console.log(bundle(entry))

Thanks

Big thanks to Luciano Mammino for his talk Unbundling the JavaScript module bundler at the July DublinJS meetup - that gave me everything I needed to know to write this. Also giving credit to minipack, which is very similar to this project, mostly as I looked at the source to see how it solved some problems (like name collisions)

License

MIT

wbpck-bundler's Issues

Avoid module duplication

If we require the same module in multiple places the bundler adds the same dependency multiple times into the bundle. Eg.

// main.js
const a = require('./a');
const b = require('./b');

// a.js
module.exports = () => {};

// b.js
const a = require('./a');

module.exports => () => { a(); };

The bundler will generate following dependency graph

main module <- a module <- b module <- a module

We can avoid this duplication by checking module existence in the graph. Inside the getModules function

module.requires.forEach(dependency => {
  const basedir = path.dirname(module.filepath)
  const dependencyPath = resolve(dependency, { basedir })

  // to avoid module duplication
  let dependencyObject = modules.find(m => m.filepath === dependencyPath);

  if (dependencyObject) {
    module.map[dependency] = dependencyObject.id
   } else {
    dependencyObject = createModuleObject(dependencyPath)
    module.map[dependency] = dependencyObject.id
    modules.push(dependencyObject)
  }
})

@adamisntdead I would like create a PR for the above changes, If you like this solution. Thanks.