Rollup

Rollup uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively everywhere, but Rollup lets you do it today.

Creating a bundle with rollup

Create rollup.config.js this will store all the config regarding the bundle that will be created.

install packages

• @rollup/plugin-commonjs - to convert libraries written in CommonJS to ES Syntax because rollup uses code modules included in the ES6.
• @rollup/plugin-node-resolve - to resolve modules or packages installed.

yarn add -D @rollup/plugin-commonjs @rollup/plugin-node-resolve

install lodash which is used to show how rollup budles when external libraries are present.

yarn add lodash

Create a index.js file and copy paste the following code

import { add } from "lodash";
console.log("Answer - ", add(10, 30));

Copy paste the below code in rollup.config.js

import nodeResolve from "@rollup/plugin-node-resolve";
import { defineConfig } from "rollup";
import commonjs from "@rollup/plugin-commonjs";

export default defineConfig({
  input: "./src/index.js",
  output: [
    { file: "./build.amd.js", format: "amd" },
    {
      dir: "dist/cjs",
      format: "cjs",
    },
    {
      dir: "dist/es",
      format: "es",
    },
  ],
  plugins: [
    nodeResolve(),
    commonjs(),
  ],
});

Options passed in config

• input - location to the entry point of our code.
• output
  • dir/file - specifies the location to the file or directory where bundled code will be stored.
  • format - specifies the format of the generated bundle ('amd' | 'cjs' | 'es' | 'iife' | 'umd' | system)
• plugins - various plugins that will be used to create bundle and transform our code.

Run the command to create a build, build will be created as specified in the output parameter in config.

// create build
rollup -c rollup.config.js

The above command will do the bundling with lodash code. To exclude the lodash code from the bundle add property "external" with name of the library you want to exclude from the bundle.

 {
  ... 
  plugins: [
    nodeResolve(),
    commonjs(),
  ],
  external: ["lodash"],
 }

Create the build again and check in the created build you will not the code from the lodash library being added to the build.

import json from "@rollup/plugin-json";
import nodeResolve from "@rollup/plugin-node-resolve";
import terser from "@rollup/plugin-terser";
import { defineConfig } from "rollup";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
export default defineConfig({
  input: "./src/index.js",
  output: [
    {
      dir: "dist/cjs",
      format: "cjs",
    },
    {
      dir: "dist/es",
      format: "es",
    },
    // {
    //   file: "./build.iife.js",
    //   format: "iife",
    //   // plugins: [terser()]
    // },
    // { file: "./build.umd.js", format: "umd" },
  ],
  plugins: [
    nodeResolve(),
    commonjs(),
    babel(),
    json(),
    terser({
      // compress: {
      //   defaults: false,
      // },
      format: {
        beautify: true,
      },
    }),
  ],
  external: ["lodash"],
});