The best Rollup config for TypeScript libraries

rollup-typescript.md

It's 2024. You should use tsup instead of this.

---

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',
    },
  }),
]

Simple and it works. Thanks!

With what Node.js version does using "target": "esnext" makes it compatible? Will it generate Node.js 12 compatible code?

@danechitoaie check out: https://stackoverflow.com/questions/59787574/typescript-tsconfig-settings-for-node-js-12

@TorbjornHoltmon Awesome! Thanks!

I tried this with styled-components and it failed to grab the module. Is that supposed to be in a separate bundle?

It works perfectly for my Typescript CLI setup, thanks! 😊

It seems like rollup-plugin-esbuild would cause build failure when working with rollup 3.

To resolve this issue, use rollup 2 instead.

looks like it works to me, thanks!
node v16.6.1, npm 8.11.0, yarn 1.22.19

Got this error
[!] RollupError: Node tried to load your configuration as an ES module even though it is likely CommonJS.
node v18.12.1, yarn 1.22.19

that fixes the issue

import packageJson from './package.json' assert { type: 'json' };

const name = packageJson.main.replace(/\.js$/, '');

if you want to maintain folder structure:

import dts from "rollup-plugin-dts"
import esbuild from "rollup-plugin-esbuild"

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

export default [
  bundle({
    plugins: [esbuild()],
    output: [
      {
        dir: "dist",
        format: "es",
        exports: "named",
        preserveModules: true, // Keep directory structure and files
      },
    ],
  }),
  bundle({
    plugins: [dts()],
    output: {
      dir: "dist",
      format: "es",
      exports: "named",
      preserveModules: true, // Keep directory structure and files
    },
  }),
]

a little improvement if you want hints when typing

/**
 * @param {import('rollup').RollupOptions} config
 * @returns {import('rollup').RollupOptions}
 */
const bundle = (config) => ({
	...config,
	input: 'src/index.ts',
	external: (id) => !/^[./]/.test(id)
})

+1 to @FlavioZanoni's rollup.config.js amendment; it also took care of:
[!] RollupError: Node tried to load your configuration as an ES module even though it is likely CommonJS.
mentioned by @ffind

• node v18.18.1
• tsc 4.7.4
• rollup v4.3.0

[edit] @FlavioZanoni's config removes sourcemap: true; you can add it back at lines 19 and 29.