Build your own bundler

Ronen Amiel

what is a bundler?

Bundlers let us write modules that work in the browser

ECMASCRIPT MODULES

// this module depends on lodash
import _ from 'lodash';

// this is what this module exposes
export default someValue;

COMMONJS

// this module depends on lodash
const _ = require('lodash');

// this is what this module exposes
module.exports = someValue;

dependency graph

// app.js
import {Component} from ‘react’;
import {Button} from ‘./button’;

export class App extends Component {
  render() {
    // ...
  }
}

button.js

react

app.js

button.css

internal.js

IMPLEMENTATION overview

  1. Parse a single file and extract its dependencies
  2. Recursively build a dependency graph
  3. Package everything into a single file

our example project

entry.js

message.js

name.js

Let's code :)

Questions?

RONENAMIEL@TWITTER

Visit https://github.com/ronami/minipack to see the code base with comments explaining every part of the talk

Build your own bundler

By Ronen Amiel

Build your own bundler

  • 1,485