Piñata 📦

Bundler is a tool for dealing with JS bundling.

Table of Contents

• Piñata 📦
  • How it works
    • What is Bundling?
    • Ok, but how?
    • Parsing the entry file
    • Dependency graphs
  • Installation
  • Usage
  • Contributing

How it works

What is Bundling?

Bundling is a technique used by developers to reduce the number of HTTP requests for JS files to the minimum. Essentially, in the front end world, to bundle something is to put your whole project into a big, sometimes obfuscated or minified, JS file.

Ok, but how?

Well, here are the steps my bundler takes:

• Parse the entry file and generate an AST;
• Create a dependency graph;
• Create an AST for every dependency;
• Transpile everything with Babel

Parsing the entry file

To find the dependencies inside a file, we need to parse it. We can do this using AST (or simply syntax trees) parsers.

Now that we know our dependencies, we store them into a list for later.

Dependency graphs

A dependency graph represents dependencies of the project files towards each other.

The example below is the visual dependency graph representation of the example files of this repository.

Installation

Just install the package:

npm i -D @pinatajs/core  # -D means --save-dev which appends the package to the devDependencies object
# or use yarn if you want
yarn -D @pinatajs/core
# or use pnpm

Usage

Just run the command. (I would suggest you to add it as a script)

pinata-cli

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.