https://github.com/ronami/minipack

📦 A simplified example of a modern module bundler written in JavaScript
https://github.com/ronami/minipack

browserify commonjs es2015 es6-modules example javascript module-bundler modules parcel-bundler webpack

Last synced: 6 days ago
JSON representation

📦 A simplified example of a modern module bundler written in JavaScript

• Host: GitHub
• URL: https://github.com/ronami/minipack
• Owner: ronami
• License: mit
• Created: 2018-02-08T23:02:05.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-02-14T14:51:03.000Z (almost 4 years ago)
• Last Synced: 2024-11-29T18:03:00.705Z (13 days ago)
• Topics: browserify, commonjs, es2015, es6-modules, example, javascript, module-bundler, modules, parcel-bundler, webpack
• Language: JavaScript
• Homepage:
• Size: 25.4 KB
• Stars: 3,197
• Watchers: 39
• Forks: 321
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - minipack
• awesome-list - minipack

README

        
## 📦 Minipack

> A simplified example of a modern module bundler written in JavaScript

### Introduction

As front-end developers, we spend a lot of time working with tools like [Webpack](https://github.com/webpack/webpack), [Browserify](https://github.com/browserify/browserify), and [Parcel](https://github.com/parcel-bundler/parcel).

Understanding how those tools work can help us make better decisions on how we write our code. By understanding how our code turns into a bundle and how that bundle looks like we can also debug it better.

The purpose of this project is to explain how most bundlers work under the hood. It contains a short implementation of a simplified but still reasonably accurate bundler. Along with the code, there are comments explaining what the code is trying to achieve.

### Cool, where do I start?

Head on to the source code: [src/minipack.js](src/minipack.js).

### Try running the code

Start by installing dependencies:

```sh

$ npm install

```

And then run our script:

```sh

$ node src/minipack.js

```

### Additional links

- [AST Explorer](https://astexplorer.net)

- [Babel REPL](https://babeljs.io/repl)

- [Babylon](https://github.com/babel/babel/tree/master/packages/babel-parser)

- [Babel Plugin Handbook](https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/plugin-handbook.md)

- [Webpack: Modules](https://webpack.js.org/concepts/modules)

### Read this in other languages

- [한글/Korean](https://github.com/hg-pyun/minipack-kr)

- [中文/Chinese](https://github.com/chinanf-boy/minipack-explain)

- [Русский/Russian](https://github.com/makewebme/build-your-own-webpack)