Skip to content

Instantly share code, notes, and snippets.

@aleclarson

aleclarson/rollup-typescript.md

Last active September 14, 2025 14:31
Show Gist options
  • Save aleclarson/9900ed2a9a3119d865286b218e14d226 to your computer and use it in GitHub Desktop.
Save aleclarson/9900ed2a9a3119d865286b218e14d226 to your computer and use it in GitHub Desktop.
Download ZIP
The best Rollup config for TypeScript libraries
Raw
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.

  1. Run this in your terminal:

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

  2. Ensure your tsconfig.json contains these values:

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

  3. 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",

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

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

    "scripts": {
  "build": "rollup -c"
}
Raw
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',
},
}),
]
@HenryC-3
Copy link

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

To resolve this issue, use rollup 2 instead.

@PavelLaptev
Copy link

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

@ffind
Copy link

ffind commented Jan 9, 2023 •
edited
Loading

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$/, '');

@FlavioZanoni
Copy link

FlavioZanoni commented Sep 24, 2023 •
edited
Loading

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

@devloop01
Copy link

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)
})

@ericprud
Copy link

ericprud commented Nov 5, 2023 •
edited
Loading

+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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment