A tiny JavaScript bundler to learn how Webpack/Rollup work!
-
Create
example/index.js:import { greet } from './utils.js'; console.log(greet('Developer'));
-
Run the bundler:
node bundler.js
Output:
dist/bundle.jsβ¨
-
Find Dependencies π¦
Loadinggraph LR A[index.js] --> B[utils.js]
-
Transform Code (using Babel)
// Before import { greet } from './utils.js'; // After var _utils = require('./utils.js');
-
Bundle Everything
(function(modules){ // Mini-require() system here... })({ 0: [function(){...}, {}], // index.js 1: [function(){...}, {}] // utils.js })
β
Finds all import statements
β
Handles JS files
β
Super simple (~100 lines)
Try adding:
- Circular dependency support π
- Code splitting βοΈ
- Source maps πΊ
- Dynamic import support π
π AST Explorer
π Babel tools
Made with β€οΈ for learning! πΈοΈ