The best Rollup config for TypeScript libraries

rollup-typescript.md

Please retweet if this helps you!

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 ext = format =>
  format == 'dts' ? 'd.ts' : format == 'cjs' ? 'js' : 'mjs'

const bundle = format => ({
  input: 'src/index.ts',
  output: {
    file: `${name}.${ext(format)}`,
    format: format == 'cjs' ? 'cjs' : 'es',
    sourcemap: format != 'dts',
  },
  plugins: format == 'dts' ? [dts()] : [esbuild()],
  external: id => !/^[./]/.test(id),
})

export default [
  bundle('es'), //
  bundle('cjs'),
  bundle('dts'),
]