Skip to content

fazalilahi/mini-bundler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌟 Mini Bundler 🌟

A tiny JavaScript bundler to learn how Webpack/Rollup work!


πŸš€ Quick Start

  1. Create example/index.js:

    import { greet } from './utils.js';
    console.log(greet('Developer'));
  2. Run the bundler:

    node bundler.js

    Output: dist/bundle.js ✨


πŸ”§ How It Works in 3 Steps

  1. Find Dependencies πŸ“¦

    graph LR
      A[index.js] --> B[utils.js]
    
    Loading
  2. Transform Code (using Babel)

    // Before
    import { greet } from './utils.js';
    // After
    var _utils = require('./utils.js');
  3. Bundle Everything

    (function(modules){
      // Mini-require() system here...
    })({
      0: [function(){...}, {}], // index.js
      1: [function(){...}, {}]  // utils.js
    })

🎯 Key Features

βœ… Finds all import statements βœ… Handles JS files βœ… Super simple (~100 lines)


πŸ›  Want to Improve It?

Try adding:

  • Circular dependency support πŸ”„
  • Code splitting βœ‚οΈ
  • Source maps πŸ—Ί
  • Dynamic import support πŸ”€

πŸ€“ Learn More

πŸ”— AST Explorer
πŸ”— Babel tools


Made with ❀️ for learning! πŸ•ΈοΈ

About

To understand modern module bundlers in javascript

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published