Custom Plugins

Extend Packem with custom Rollup plugins

Custom Plugins

Packem exposes a top-level plugins option so you can inject your own Rollup plugins into the build pipeline. Each entry controls when the plugin runs (enforce) and which pipeline it applies to (type).

Overview

The plugins option takes an array of objects with the following shape:

  • plugin — the Rollup plugin instance (required).
  • enforce"pre" or "post", similar to webpack loaders, to adjust application order. Omit it to run with the default group.
  • type"build" (default) or "dts". A dts plugin only runs while declaration files are generated.

Resolution order

Packem resolves plugins in this order:

  • Alias
  • User plugins with enforce: 'pre'
  • Rollup core plugins
  • User plugins without an enforce value
  • Rollup build plugins
  • User plugins with enforce: 'post'
  • Rollup post-build plugins (minify, manifest, copy, reporting)

Configuration

packem.config.ts

import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin'
import { defineConfig } from '@visulima/packem/config'
import transformer from '@visulima/packem/transformer/esbuild'

export default defineConfig({
  transformer,
  plugins: [
    {
      enforce: 'pre',
      plugin: optimizeLodashImports()
      // type: "build" -> default value
    }
  ]
})

Targeting the Declaration Pipeline

Set type: 'dts' to run a plugin only when declaration files are generated:

import { defineConfig } from '@visulima/packem/config'
import transformer from '@visulima/packem/transformer/esbuild'
import type { Plugin } from 'rollup'

const stripInternalComments = (): Plugin => ({
  name: 'strip-internal-comments',
  renderChunk(code) {
    return code.replace(/\/\*\* @internal \*\/[\s\S]*?\n/g, '')
  }
})

export default defineConfig({
  transformer,
  declaration: true,
  plugins: [
    {
      type: 'dts',
      plugin: stripInternalComments()
    }
  ]
})

Multiple Plugins with Ordering

import { defineConfig } from '@visulima/packem/config'
import transformer from '@visulima/packem/transformer/esbuild'
import replace from '@rollup/plugin-replace'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  transformer,
  plugins: [
    {
      // runs before Rollup core plugins
      enforce: 'pre',
      plugin: replace({
        preventAssignment: true,
        values: { __VERSION__: '1.0.0' }
      })
    },
    {
      // runs after build plugins, before post-build reporting
      enforce: 'post',
      plugin: visualizer({ filename: 'stats.html' })
    }
  ]
})

Notes

  • plugin accepts any standard Rollup Plugin instance, so the entire Rollup plugin ecosystem is available.
  • Use enforce: 'pre' for transforms that must run before Packem's core resolution, and enforce: 'post' for output-stage plugins.
  • A type: 'dts' plugin is skipped entirely when declarations are not being generated.
Support

Contribute to our work and keep us going

Community is the heart of open source. The success of our packages wouldn't be possible without the incredible contributions of users, testers, and developers who collaborate with us every day.Want to get involved? Here are some tips on how you can make a meaningful impact on our open source projects.

Ready to help us out?

Be sure to check out the package's contribution guidelines first. They'll walk you through the process on how to properly submit an issue or pull request to our repositories.

Submit a pull request

Found something to improve? Fork the repo, make your changes, and open a PR. We review every contribution and provide feedback to help you get merged.

Good first issues

Simple issues suited for people new to open source development, and often a good place to start working on a package.
View good first issues