Package Your JavaScript Libraries With Rollup

Rollup is a great tool for building libraries.

“Webpack for apps, and Rollup for libraries”

Run:

yarn add rollup rollup-plugin-buble rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-uglify --dev

Add to package.json:

{
  "main": "dist/my-project.js",
  "module": "dist/my-project.esm.js",
  "scripts": {
    "build": "rollup -c"
  }
}

Add dist/ to your .gitignore.

Create rollup.config.js with:

import buble from "rollup-plugin-buble";
import commonjs from "rollup-plugin-commonjs";
import pkg from "./package.json";
import resolve from "rollup-plugin-node-resolve";
import uglify from "rollup-plugin-uglify";

const input = "src/index.js";
const outputName = "MyProject";
const external = Object.keys(pkg.peerDependencies || {});
const esExternal = external.concat(Object.keys(pkg.dependencies || {}));
const banner =
`/*
 * ${pkg.name}
 * ${pkg.description}
 * ${pkg.repository.url}
 * v${pkg.version}
 * ${pkg.license} License
 */
`;

export default [
  {
    input: input,
    output: {
      name: outputName,
      file: pkg.main,
      format: "umd",
      banner: banner
    },
    external: external,
    plugins: [
      resolve(),
      commonjs(),
      buble()
    ]
  },
  {
    input: input,
    output: {
      name: outputName,
      file: pkg.main.replace(/\.js$/, ".min.js"),
      format: "umd"
    },
    external: external,
    plugins: [
      resolve(),
      commonjs(),
      buble(),
      uglify()
    ]
  },
  {
    input: input,
    output: {
      file: pkg.module,
      format: "es",
      banner: banner
    },
    external: esExternal,
    plugins: [
      buble()
    ]
  }
];

And run:

yarn build

fire

Published March 27, 2018


You might also enjoy

Adding CSP to Rails

The Safely Pattern

navigator.sendBeacon and Rails


All code examples are public domain.
Use them however you’d like (licensed under CC0).