Transformers

Choose and configure transformers

Transformers

The transformer option selects the engine that converts your TypeScript and modern JavaScript source into the output Packem bundles. It is the option-reference companion to the Transformers guide, which compares the engines in detail.

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

export default defineConfig({
  transformer,
})

Setting the transformer

transformer is a function (TransformerFn), not a string. You import the adapter you want from @visulima/packem and pass it straight through to defineConfig.

import esbuild from '@visulima/packem/transformer/esbuild'
import swc from '@visulima/packem/transformer/swc'
import oxc from '@visulima/packem/transformer/oxc'
import sucrase from '@visulima/packem/transformer/sucrase'

There are four transformer import paths:

Import pathEngine
@visulima/packem/transformer/esbuildesbuild (Go)
@visulima/packem/transformer/swcswc (Rust)
@visulima/packem/transformer/oxcOXC (Rust, experimental)
@visulima/packem/transformer/sucrasesucrase (JavaScript)

Under the default bundler: 'rollup' backend, transformer is required — Packem refuses to build without it. See the Transformers guide for how to choose between the four engines.

When each transformer applies

The transformer option only takes effect under the default 'rollup' bundler. The esbuild / swc / oxc / sucrase adapters are Rollup plugins, so they are only invoked on the Rollup path.

When you select bundler: 'rolldown', Rolldown ships its own oxc-based transform and always uses it. In that case the transformer option must be omitted — passing one is a configuration mistake and Packem will refuse to build.

// ✅ Rollup (default) — transformer required
export default defineConfig({
  bundler: 'rollup',
  transformer: esbuild,
})

// ✅ Rolldown — no transformer
export default defineConfig({
  bundler: 'rolldown',
})

Switching transformers conditionally

Because transformer is just a value, you can swap engines based on the environment:

import esbuild from '@visulima/packem/transformer/esbuild'
import swc from '@visulima/packem/transformer/swc'

const isDev = process.env.NODE_ENV === 'development'

export default defineConfig({
  transformer: isDev ? esbuild : swc,
})

  • Bundler - Rollup (transformer-driven) vs Rolldown (built-in oxc)
  • Target - Compilation targets passed to the transformer
  • Minification - Output minification
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