{"id":10260,"date":"2025-11-04T18:39:59","date_gmt":"2025-11-04T18:39:59","guid":{"rendered":"https:\/\/hellonitish.com\/blog\/?p=10260"},"modified":"2025-11-05T07:24:35","modified_gmt":"2025-11-05T07:24:35","slug":"understanding-rollup-js-beginners-guide","status":"publish","type":"post","link":"https:\/\/hellonitish.com\/blog\/understanding-rollup-js-beginners-guide\/","title":{"rendered":"Understanding Rollup.js: A Beginner’s Guide"},"content":{"rendered":"\n

Peek inside a modern JavaScript project and you will probably see a folder called dist<\/code> with some massive files inside it with names like colorful.min.js, colorful.esm.js, colorful.umd.js etc. Each of them is meant for a specific target and contain the entire optimized code of your project.<\/p>\n\n\n\n

Where did these files come from? A bundler creates them. There are quite a few bundlers that you can use. However, our focus in this post will be on Rollup.<\/p>\n\n\n\n

Rollup is a module bundler<\/em>. A quiet but powerful tool that takes all your scattered JavaScript files, follows every import<\/code> trail, removes whatever you\u2019re not using, and rolls it all up into one clean file that browsers can actually understand. It\u2019s the reason your dozens of .js<\/code> files can load as a single, efficient script on the web.<\/p>\n\n\n\n

Why Use a Bundler at All?<\/h2>\n\n\n\n

In the early days of the web, you could drop one JavaScript file into your page with a simple line like this:<\/p>\n\n\n\n

<script src=\"app.js\"><\/script><\/code><\/pre>\n\n\n\n
That worked fine when your entire project was a few hundred lines of code.<\/p>\n\n\n\n
But as apps grew, developers began splitting code into multiple files like math.js<\/code>, utils.js<\/code>, api.js<\/code>, and so on to keep things organized. The browser, however, doesn\u2019t natively understand your project structure. It just sees separate files that it has to fetch one by one.<\/p>\n\n\n\n
Each <script><\/code> tag means a separate network request:<\/p>\n\n\n\n
<script src=\"math.js\"><\/script>\n<script src=\"utils.js\"><\/script>\n<script src=\"main.js\"><\/script><\/code><\/pre>\n\n\n\n
That’s three requests for three files.<\/p>\n\n\n\n
Now imagine a modern app with hundreds<\/em> of files \u2014 that\u2019s hundreds of separate downloads before your app can even start. Slow, messy, and frustrating.<\/p>\n\n\n\n
A bundler<\/strong> solves this. It takes all those small files, figures out how they depend on each other, and merges them into one or a few optimized files that the browser can load instantly. It also removes unused code (a process called tree-shaking<\/em>), minifies everything, and can even make your modern syntax work on older browsers.<\/p>\n\n\n\n
How Rollup Works (The Simple Version)<\/h2>\n\n\n\n
When you give Rollup an entry file, say src\/colorful.js<\/code>, it starts reading your code. Every time it sees an import<\/code> statement, it follows the trail, pulling in the imported files. It repeats this process recursively until it has your entire project mapped out like a dependency web.<\/p>\n\n\n\n
Then, it rolls everything together:<\/p>\n\n\n\n
    \n
  1. Combines all modules into one file<\/li>\n\n\n\n
  2. Removes anything you didn\u2019t use<\/li>\n\n\n\n
  3. Produces clean, optimized output files like:
    colorful.esm.js<\/code> (for modern JavaScript) 
    colorful.cjs.js<\/code> (for Node.js) 
    colorful.umd.js<\/code> (for browsers and AMD) 
    colorful.min.js<\/code> (a minified version for production)<\/li>\n<\/ol>\n\n\n\n
    That\u2019s the \u201croll up\u201d in Rollup \u2014 a bundle of everything you need, nothing you don\u2019t.<\/p>\n\n\n\n
    Multiple Output Formats Explained<\/h2>\n\n\n\n
    When you open your dist<\/code> folder after a Rollup build, you might see several files that look suspiciously similar:<\/p>\n\n\n\n
    colorful.esm.js  \ncolorful.cjs.js  \ncolorful.umd.js  \ncolorful.min.js<\/code><\/pre>\n\n\n\n
    They all contain the same<\/em> codebase, your project, but each one speaks a slightly different \u201cdialect\u201d of JavaScript. Think of them as the same book translated for different readers.<\/p>\n\n\n\n
    Let\u2019s break down what each format means.<\/p>\n\n\n\n
    ESM \u2014 For the Modern World<\/h3>\n\n\n\n
    ESM stands for ES Modules<\/strong>, the official JavaScript module system introduced in ES6 (import<\/code> and export<\/code>).<\/p>\n\n\n\n
    This format is used by modern browsers and tools like Rollup, Vite, and Webpack.<\/p>\n\n\n\n
    You can use it like this:<\/p>\n\n\n\n
    import { getRandomColor } from '.\/colorful.esm.js';<\/code><\/pre>\n\n\n\n
    Because ESM supports static imports, bundlers can tree-shake it efficiently \u2014 meaning unused parts of your library simply vanish in the final build. This is the most modern and future-proof<\/em> format.<\/p>\n\n\n\n
    CJS \u2014 The Node.js Veteran<\/h3>\n\n\n\n
    CJS stands for CommonJS<\/strong>, the older module system used by Node.js. It uses require()<\/code> and module.exports<\/code> instead of import<\/code> and export<\/code>:<\/p>\n\n\n\n
    const { getRandomColor } = require('.\/colorful.cjs.js');<\/code><\/pre>\n\n\n\n
    This format is mostly for backward compatibility. Older tools, servers, and Node environments still rely on CommonJS. If you\u2019re publishing a library on npm, you\u2019ll definitely want to include this.<\/p>\n\n\n\n
    UMD \u2014 The Universal Translator<\/h3>\n\n\n\n
    UMD stands for Universal Module Definition<\/strong>, and it\u2019s like a multilingual interpreter. It works everywhere \u2014 Node, AMD (like RequireJS), or directly in the browser.<\/p>\n\n\n\n
    You can even drop it into an HTML file:<\/p>\n\n\n\n
    <script src=\"colorful.umd.js\"><\/script>\n<script>\n  console.log(Colorful.getRandomColor());\n<\/script><\/code><\/pre>\n\n\n\n
    It attaches your code to a global variable (in this case, Colorful<\/code>), so browsers without module support can still use it. This makes UMD great for demos, playgrounds, or older environments.<\/p>\n\n\n\n
    IIFE \u2014 The Browser-Ready File<\/h3>\n\n\n\n
    IIFE stands for Immediately Invoked Function Expression<\/strong>, a self-running script. When loaded, it runs instantly and exposes your library as a global variable.<\/p>\n\n\n\n
    <script src=\"colorful.min.js\"><\/script>\n<script>\n  console.log(Colorful.getRandomColor());\n<\/script><\/code><\/pre>\n\n\n\n
    The .min.js<\/code> version is the same code, just minified with Terser to make it smaller and faster to load.<\/p>\n\n\n\n
    So\u2026 Why So Many?<\/h3>\n\n\n\n
    Because JavaScript runs in a lot<\/em> of different environments like browsers, servers, build tools, and everything in between.<\/p>\n\n\n\n
    Rollup makes it easy to build once and ship everywhere.<\/p>\n\n\n\n
    Getting Started with Rollup<\/h2>\n\n\n\n
    Let’s start from scratch so you know how Rollup fits in a project.<\/p>\n\n\n\n
    Execute the following commands in the terminal to create a math-demo<\/strong> directory and a package.json<\/strong> file within it.<\/p>\n\n\n\n
    mkdir math-demo\ncd math-demo\nnpm init -y<\/code><\/pre>\n\n\n\n
    Install Rollup<\/h3>\n\n\n\n
    Now install Rollup and some of its most common plugins by executing the following command.<\/p>\n\n\n\n
    npm install rollup @rollup\/plugin-node-resolve @rollup\/plugin-commonjs rollup-plugin-terser --save-dev<\/code><\/pre>\n\n\n\n
      \n
    • rollup<\/code>: the core bundler<\/li>\n\n\n\n
    • node-resolve<\/code>: lets Rollup import packages from node_modules<\/code><\/li>\n\n\n\n
    • commonjs<\/code>: converts old-style CommonJS modules into ES modules<\/li>\n\n\n\n
    • terser<\/code>: minifies your final output<\/li>\n<\/ul>\n\n\n\n
      Write Some Code<\/h3>\n\n\n\n
      Now create the src<\/strong> directory within your project directory, i.e., math-demo<\/strong>, and create two files named math.js<\/strong> and main.js<\/strong> within the src<\/strong> directory.<\/p>\n\n\n\n
      src\/\n  math.js\n  main.js<\/code><\/pre>\n\n\n\n
      Add the following code to math.js<\/strong>:<\/p>\n\n\n\n
      export function add(a, b) {\n  return a + b;\n}\n\nexport function multiply(a, b) {\n  return a * b;\n}<\/code><\/pre>\n\n\n\n
      Add the following code to main.js<\/strong>:<\/p>\n\n\n\n
      import { add } from '.\/math.js';\n\nconsole.log('2 + 3 =', add(2, 3));<\/code><\/pre>\n\n\n\n
      You now have a mini \u201cproject\u201d with one file importing another. This is perfect for testing a bundler.<\/p>\n\n\n\n
      Create a Rollup Config<\/h3>\n\n\n\n
      Add a file named rollup.config.js<\/strong> in your root folder, i.e., math-demo<\/strong> with the following code:<\/p>\n\n\n\n
      import { nodeResolve } from '@rollup\/plugin-node-resolve';\nimport commonjs from '@rollup\/plugin-commonjs';\nimport { terser } from 'rollup-plugin-terser';\n\nexport default {\n  input: 'src\/main.js',           \/\/ Entry point\n  output: {\n    file: 'dist\/math-demo.min.js',   \/\/ Output file\n    format: 'iife',               \/\/ IIFE for browsers\n    name: 'MathDemoApp',          \/\/ Global variable name\n    plugins: [terser()]           \/\/ Minify output\n  },\n  plugins: [nodeResolve(), commonjs()]\n};<\/code><\/pre>\n\n\n\n
      This tells Rollup:<\/p>\n\n\n\n
      \n
      Start from main.js<\/strong>, gather everything it imports, and create a single file at dist\/math-demo.min.js<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
      Run the build<\/h3>\n\n\n\n
      Execute the following command in your terminal now:<\/p>\n\n\n\n
      npx rollup -c<\/code><\/pre>\n\n\n\n
      and you should see:<\/p>\n\n\n\n
      dist\/\n  math-demo.min.js<\/code><\/pre>\n\n\n\n
      This file should have the following code:<\/p>\n\n\n\n
      !function(){\"use strict\";console.log(\"2 + 3 =\",2+3)}();<\/code><\/pre>\n\n\n\n
      What happened? Where are add()<\/code> and multiply()<\/code>?<\/p>\n\n\n\n
      Understanding What Happened<\/h3>\n\n\n\n
      Rollup started at main.js<\/code> and built a dependency graph.
      It noticed:<\/p>\n\n\n\n
        \n
      • You imported only add<\/code>.<\/li>\n\n\n\n
      • You never used multiply<\/code>.<\/li>\n<\/ul>\n\n\n\n
        So during bundling, Rollup did tree-shaking and removed multiply()<\/code> completely and gave us this code:<\/p>\n\n\n\n
        (function () {\n  'use strict';\n\n  \/\/ src\/math.js\n  function add(a, b) {\n    return a + b;\n  }\n\n  \/\/ src\/main.js\n  console.log('2 + 3 =', add(2, 3));\n\n})();<\/code><\/pre>\n\n\n\n
        Now it was Terser’s turn to do its magic and it does the following:<\/p>\n\n\n\n
          \n
        1. Remove whitespace and comments.<\/li>\n\n\n\n
        2. Rename variables (if safe).<\/li>\n\n\n\n
        3. Inline trivial functions<\/strong> (this is what you noticed).<\/li>\n\n\n\n
        4. Remove redundant return paths or scopes.<\/li>\n<\/ol>\n\n\n\n
          Since your add()<\/code> was:<\/p>\n\n\n\n
          function add(a, b) { return a + b; }<\/code><\/pre>\n\n\n\n
          and it was only used once, Terser said:<\/p>\n\n\n\n
          \n
          \u201cNo point keeping this function. I\u2019ll just replace add(2, 3)<\/code> with 2 + 3<\/code>.\u201d<\/p>\n<\/blockquote>\n\n\n\n
          The end result was this code:<\/p>\n\n\n\n
          !function(){\"use strict\";console.log(\"2 + 3 =\",2+3)}();<\/code><\/pre>\n\n\n\n
          You could replace the original output<\/code> value in rollup.config.js<\/strong> with this one to create three different production ready files:<\/p>\n\n\n\n
          output: [\n    {\n      file: 'dist\/math-demo.esm.js',\n      format: 'esm',\n    },\n    {\n      file: 'dist\/math-demo.min.js',\n      format: 'iife',\n      name: 'MathApp',\n      plugins: [terser()]\n    },\n    {\n      file: 'dist\/math-demo.js',\n      format: 'iife',\n      name: 'MathApp'\n    }\n  ],<\/code><\/pre>\n\n\n\n
          Final Thoughts<\/h2>\n\n\n\n
          Bundling may look like magic at first. One moment you have a folder full of small files, and the next you\u2019ve got a single bundle.js<\/code> ready to run anywhere. But as you\u2019ve seen, it\u2019s just smart, systematic work: Rollup follows every import<\/code>, removes the extras, and builds one efficient file for your browser, Node, or any environment you choose.<\/p>\n\n\n\n
          Rollup stands out because it does this job with minimal setup and maximum clarity. You don\u2019t need a monster config or a web of plugins to get started just input<\/code>, output<\/code>, format<\/code>, and plugins<\/code>. Whether you\u2019re creating a small utility library or learning how build tools actually work, Rollup gives you a front-row seat to how modern JavaScript comes together behind the scenes.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Peek inside a modern JavaScript project and you will probably see a folder called dist with some massive files inside it with names like colorful.min.js, colorful.esm.js, colorful.umd.js etc. Each of them is meant for a specific target and contain the entire optimized code of your project. Where did these files come from? A bundler creates […]<\/p>\n","protected":false},"author":2,"featured_media":10277,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-10260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-notes"],"_links":{"self":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/comments?post=10260"}],"version-history":[{"count":8,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10260\/revisions"}],"predecessor-version":[{"id":10276,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10260\/revisions\/10276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/media\/10277"}],"wp:attachment":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/media?parent=10260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/categories?post=10260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/tags?post=10260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}