How to Use Rollup for Efficient JavaScript Bundling

If you enjoy this tale of theatrical triumph and JavaScript wizardry, feel free to show some love with a like or share!

---

I’m a director tasked with putting on a play. My actors, each with their unique talents, are scattered across different parts of the theater, rehearsing their lines. To create a seamless masterpiece on stage, I need to bring them all together. Enter Rollup, my trusty stage manager.

First, I gather my script—my JavaScript library. Each scene, or module, is a vital part of the story, but they’re scattered like loose pages. Rollup helps me collect these scattered scenes from different corners of the theater, ensuring that no line is forgotten and no prop is left behind.

As we progress, I find myself juggling not just the actors, but also their costumes and props—these are the dependencies in my library. Rollup, with the precision of an experienced stagehand, manages these dependencies, ensuring that each actor has exactly what they need when they step into the spotlight.

Now, it’s time for the dress rehearsal. Rollup optimizes the script, trimming unnecessary dialogues and ensuring the performance is sleek and engaging. It’s like watching my talented cast deliver their lines with newfound energy and clarity.

Finally, the big night arrives. The curtains rise, and thanks to Rollup, my play—the bundled library—unfolds seamlessly, enchanting the audience from the first act to the final bow. The applause echoes, and I know that Rollup has helped me direct a performance worthy of the est stage.

---

First, I set up my stage—my project directory. I ensure I have Node.js and npm installed, much like having a well-equipped theater. I then install Rollup as a development dependency, the way a director might recruit a trusted assistant:

npm install --save-dev rollup

Next, I script my play. My JavaScript modules, like talented actors, each have a role. I create a src folder where all these modules reside. My main script, main.js, is the lead actor of this performance:

// src/main.js
import { greet } from './greet.js';

console.log(greet('world'));

// src/greet.js
export function greet(name) {
  return `Hello, ${name}!`;
}

I then create a rollup.config.js file, my director’s playbook, detailing how Rollup should bring this script to life. Here’s where I define the entry point and output, ensuring each scene unfolds in the correct order:

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'iife', // Immediately Invoked Function Expression
    name: 'MyLibrary'
  }
};

With a simple command, I cue Rollup to compile my masterpiece:

npx rollup -c

The result? A single, cohesive bundle.js file, much like a perfectly rehearsed performance ready for the audience. This bundled script can be used anywhere, confident that all parts work harmoniously together.

Key Takeaways

1. Setup: Just like preparing a theater, ensure your environment is ready with Node.js and npm, then install Rollup.
2. Organize: Place your modules in a src folder, making sure each piece is prepared for the final performance.
3. Configuration: Use rollup.config.js to define how your modules should be bundled, specifying entry points and output configurations.
4. Bundling: Run Rollup to compile everything into a single file, ready for deployment or distribution.