Bundlers

Bundlers are tools that allow you to write code in a modular and easy-to-manage way, and then bundle it in a way that's optimized for production. For example, you probably want a giant front-end application to exist in your codebase as many hundreds of files, but you want to serve it to your visitors as a single file or one file per page.

The point is, a bundler takes care of transforming your code from how you're writing it to how you want it to be served. That said, popular bundlers often do a whole suite of important things, like:

Bundling: Duh, we just covered this.
Minification: Making your code smaller by removing unnecessary whitespace (useful when you have to serve your code to a browser via a slow connection).
Code Splitting: Breaking your code into smaller chunks that can be loaded on-demand.
Tree Shaking: Removing unused code from your final bundle.
Asset Optimization: Optimizing images, fonts, and other assets. For example, converting images to WebP format or reducing their size.
Source Maps: building files that allow you to debug your code in the browser as if it were still in its original form.

For a long time, Webpack was the most popular bundler. It's still used, but Vite has been gaining a lot of traction lately. Vite is often quite a bit faster than Webpack, and it's also much easier to configure in my opinion. It's built on top of (and adds more features to) Rollup, which is another popular bundler.

Assignment

Heifer's codebase has come a long way, and it's high time for a bundler. Let's install cowsay for our "moo" program, then use Vite to bundle it into a single file.

Install Cowsay.

npm i cowsay

Import say from cowsay in main.js.
Combine the moo function we've made with say. You should see a cow saying moo, NAME! in your terminal.

 ____________
< moo, there! >
 ------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Install Vite:

Vite requires Node.js version 20.19.0 or higher (or 22.12.0+). Check your Node.js version with node --version. If you need to upgrade, visit nodejs.org.

npm i -D vite

We can configure Vite to bundle our CLI by setting a vite.config.js file at the root of our project directory:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    lib: {
      entry: "main.js",
      formats: ["es"],
    },
  },
});

build.lib - tells Vite that we’re generating a “library” bundle. In practical terms:
- the build is not based on an HTML file or a browser runtime environment.
- there's a single JavaScript entry which will be packaged (ideal for CLIs or libraries).
- the output can be executed in Node.js.
entry: 'main.js' - sets the entry point for the bundle as main.js.
formats: ['es'] - instructs Vite to output the bundle in ES module format.

By default Vite names the bundled file whatever you've named your project in package.json, but we could override this with fileName.
There are a lot of other configuration settings for Vite.

In your package.json, add a build script and modify the start script to run the bundled file:

{
  "scripts": {
    "build": "vite build",
    "start": "node dist/heifer.js"
  }
}

Run the build script and bundle your code:

npm run build

This should create a dist folder containing your bundled file. The bundled code might look like some Eldritch horror, but that's just bundled code for you!

You should add the dist folder to your .gitignore too. Code that can be regenerated with a command should, as a rule of thumb, be gitignored.

Run and test the bundled output:

npm run start

If all went well, you should see a cow say moo in the terminal!

Run and submit the CLI tests.