Awesome

rollup-plugin-esbuild-transform

Use esbuild with Rollup to transform any supported content types.

Why

esbuild as a bundler has some problems such as #475 which has still not been fixed since Oct, 2020.

rollup-plugin-esbuild is great but there is no simpler way to use multiple loader with different options, and for some reason it does not provide all available options from esbuild transform API.

Install

npm install -D esbuild rollup-plugin-esbuild-transform

Example

// rollup.config.js

import { join } from 'path'
import esbuild from 'rollup-plugin-esbuild-transform'

export default {
  // ...
  plugins: [
    esbuild([
      {
        loader: 'json'
      },
      {
        loader: 'tsx',
        legalComments: 'eof'
      },
      {
        loader: 'ts',
        include: /\.tsx?$/,
        tsconfig: join(__dirname, 'tsconfig.json')
      },
      {
        output: true,
        minify: true,
        target: 'es2015'
      }
    ])
  ]
}

Options

// index.d.ts

import { TransformOptions as EsbuildTransformOptions } from 'esbuild'
import { FilterPattern } from '@rollup/pluginutils'
import { Plugin } from 'rollup'

export interface TransformOptions extends EsbuildTransformOptions {
  tsconfig?: string
}

export interface Options extends TransformOptions {
  output?: boolean
  include?: FilterPattern
  exclude?: FilterPattern
}

declare function esbuildTransform(options?: Options | Options[]): Plugin
export default esbuildTransform

This plugin uses the same options from esbuild transform API.

tsconfig is the path to tsconfig.json file relative to process.cwd(). It will not be used if tsconfigRaw is provided.

output is for indicating whether this transformation should be performed after the chunk (bundle) has been rendered.

include and exclude are picomatch patterns. They can be string | RegExp | Array<string | RegExp>. When supplied they will override the default values.

If output: true, then the options include and exclude will be applied to the chunk's filename from RollupOptions.output.file.

`include`

Default to <code>new RegExp(`\\.(?:${loaderExtensions.join('|')})$`)</code> (supports .cjs, .mjs, .cts, .mts), or undefined (match any filename) if output: true.

If a file is matched by more than one pattern (as the example below), the options other than loader will be shallowly merged into and possibly override the previous ones.

// options
[
  {
    loader: 'tsx',
    legalComments: 'eof'
  },
  {
    loader: 'ts',
    include: /\.tsx?$/,
    tsconfig: join(__dirname, 'tsconfig.json')
  }
]

// the final transform options for `index.tsx` will become
{
  loader: 'tsx',
  legalComments: 'eof',
  tsconfig: join(__dirname, 'tsconfig.json')
}

`exclude`

Default to /node_modules/, or undefined if output: true.

It takes priority over include.

Other default options

// output: false | undefined
{
  format: options.loader === 'json' ? 'esm' : undefined,
  sourcefile: id, // the resolved file path
  sourcemap: true,
  ...options
}

// output: true
{
  sourcefile: chunk.fileName,
  sourcemap: true,
  ...options
}