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 · Tweet


You might also enjoy

Dokku on DigitalOcean

Why and How to Keep Your Decryption Keys Off Web Servers

Blind Index 1.0


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