To start off, we will need to create a folder that we're ready to work with. To do this, either work in the folder that we worked in Chapter 9, Practical Example – Building a Static Server, or pull down the code from this book's GitHub repository. With this, run the npm install -g rollup command. This will put the rollup system into our global path so that we can utilize the command line if we want to by running the rollup command. Next, we are going to create a configuration file. To do this, we will add a rollup.config.js file to the base of our directory (the exact same location as our package.json file) and add the following code to it:

module.exports = {
    input: "./main.js",
    output: {
        file: "./dist/build.js",
        format: "esm"
    }
}

We have told Rollup that the starting point of our application is in the main.js file. Rollup will follow this starting point and run through it to see what it depends on. Whatever it depends on, it will try to put it into a single file and remove any unwanted dependencies along the way (this is called tree-shaking). Once it's done, it will put the file in dist/build.js.

If we try to run this, we will run into a problem. Here, we are utilizing private variables for classes, and Rollup does not support this, along with other features of ESNext that we are utilizing. We will also need to change anywhere that had member variables set outside of a function. This means we will need to change cache.js to the following:

export default class LRUCache {
    constructor(num=10) {
        this.numEntries = num;
        this.cache = new Map();
    }
}

We will also need to replace all of the constructors in template.js, just like we did with LRUCache.

After making the preceding changes, we should see that rollup is happy with us and is now compiling. If we go into the dist/build.js file, we will see that it put all of the files together. Let's go ahead and put another option in our configuration file. Follow these steps:

1. Run the following command to add the minifier and code uglifier plugin to Rollup as a dev dependency:

> npm install -D rollup-plugin-terser

2. With this installed, add the following lines to our config.js file:

import { terser } from 'rollup-plugin-terser';
module.exports = {
    input: "./main.js",
    output: {
        file: "./dist/build.js",
        format: "esm",
        plugins: [terser()]
    }
}

Now, if we take a look at our dist/build.js file, we will see a file that is barely noticeable. This is all we need for the Rollup configuration for our application, but there are many more configuration options and plugins that can help with the compilation process. Next, we will take a look at some options that can help us put our CSS files into a smaller format, and also look at what would happen if we used Sass and how we could compile that with Rollup.