The best Rollup config for TypeScript libraries

rollup-typescript.md

Features

🔥 Blazing fast builds
😇 CommonJS bundle
🌲 .mjs bundle
✨ .d.ts bundle + type-checking
🧐 Source maps

Install

1. Install pnpm or replace the pnpm i part with Yarn or NPM.

2. Run this in your terminal:

   pnpm i esbuild rollup rollup-plugin-esbuild rollup-plugin-dts -D
   wget -O rollup.config.js https://gist.githubusercontent.com/aleclarson/9900ed2a9a3119d865286b218e14d226/raw/rollup.config.js

3. Ensure your tsconfig.json contains these values:

   "compilerOptions": {
     "target": "esnext"
   }

4. Ensure your package.json contains these values (and replace the my-lib part):

   "main": "dist/my-lib.js",
   "module": "dist/my-lib.mjs",
   "typings": "dist/my-lib.d.ts",

5. Change the input: 'src/index.ts' line in rollup.config.js if needed.

6. All done! Now do yarn rollup -c to build, or add this to your package.json:

   "scripts": {
     "build": "rollup -c"
   }

rollup.config.js

import dts from 'rollup-plugin-dts'
import esbuild from 'rollup-plugin-esbuild'

const name = require('./package.json').main.replace(/\.js$/, '')

const bundle = config => ({
  ...config,
  input: 'src/index.ts',
  external: id => !/^[./]/.test(id),
})

export default [
  bundle({
    plugins: [esbuild()],
    output: [
      {
        file: `${name}.js`,
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: `${name}.mjs`,
        format: 'es',
        sourcemap: true,
      },
    ],
  }),
  bundle({
    plugins: [dts()],
    output: {
      file: `${name}.d.ts`,
      format: 'es',
    },
  }),
]