How to Generate Multiple Outputs with Rollup: A Guide

If you enjoy this story, feel free to like or share it with others who might appreciate a mix of code and creativity.

---

I’m a weaver in a hall, tasked with creating a tapestry that contains multiple intricate patterns, each representing a different theme. My loom is none other than Rollup, an extraordinary tool crafted for transforming threads of JavaScript into exquisite designs.

As I begin, I gather my threads, each strand a distinct module of code. I envision the final tapestry, knowing that each pattern — each bundle — must stand out yet complement the others. The tapestry must be versatile, with sections that can be displayed individually or together, much like a library that offers multiple outputs.

I start setting up my loom. In Rollup, this means configuring the output options. I weave the first pattern by defining an output object, specifying how this section of my tapestry should manifest. This could be a classic motif, an ES module, ready to be admired in modern browsers.

Now, I turn my attention to the next pattern, a lively motif meant for a different audience, perhaps an older browser requiring a UMD format. I configure another output, adjusting the tension and texture of my threads, ensuring that this section of the tapestry can stand on its own.

As I continue, each new pattern is a separate output configuration in my Rollup setup, each carefully crafted with its own options for format and destination. My loom, much like Rollup, allows the creation of multiple outputs from a single set of threads, each designed to meet the specific needs of the audience.

With each pass of the shuttle, the tapestry grows more complex and beautiful. Rollup’s ability to generate multiple outputs from a single source is like the skill of a master weaver, bringing together diverse patterns into one cohesive masterpiece.

Finally, I step back to admire the completed tapestry, a testament to the art of careful planning and execution. Each pattern, each output, is distinct yet harmonious, ready to be shared with the world. And in this weaving, I find the joy of creation, much like the satisfaction of a coder crafting a library with Rollup’s elegant capabilities.

---

To start, I set up my rollup.config.js file, the blueprint for my weaving. Here’s a glimpse of how I bring those patterns to life in code:

export default [
  // First output configuration
  {
    input: 'src/main.js',
    output: {
      file: 'dist/bundle-esm.js',
      format: 'esm',
    },
    plugins: [/* plugins specific to this bundle */],
  },
  // Second output configuration
  {
    input: 'src/main.js',
    output: {
      file: 'dist/bundle-umd.js',
      format: 'umd',
      name: 'MyLibrary',
    },
    plugins: [/* plugins specific to this bundle */],
  },
];

In this configuration, I define two distinct patterns: an ES module and a UMD module. Each output object specifies the file where the bundle should be saved and the format that dictates how the code should be structured. The name option is necessary for UMD formats, allowing my library to be accessed globally.

Each configuration is like a separate loom setting, tailored to the needs of different environments. By specifying a shared input file, I ensure that all outputs stem from the same source, maintaining consistency across my tapestry of code.

The flexibility of Rollup allows me to add specific plugins to each configuration. These plugins are like the different tools I use to enhance my weaving, adding features like minification or transformation specific to each output.

Key Takeaways:

1. Multiple Outputs: Rollup can generate multiple outputs from a single source, much like weaving different patterns into one tapestry. This is achieved by defining multiple configuration objects within the rollup.config.js file.
2. Customization: Each output can be customized with its own format and settings, allowing developers to target different environments with tailored bundles.
3. Consistency: By using a shared input, you ensure that all outputs are consistent, much like a cohesive design in a tapestry.
4. Plugins and Flexibility: Rollup’s plugin system allows for further customization of each output, enhancing the functionality and performance of the final bundles.