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 last year.

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 esbuild from 'rollup-plugin-esbuild-transform'

export default {
  plugins: [
    esbuild([
      {
        loader: 'json'
      },
      {
        loader: 'tsx',
        banner: "import React from 'react'"
      },
      {
        loader: 'ts'
      },
      {
        output: true,
        minify: true,
        target: 'es2015'
      }
    ])
  ]
}

Options

// index.d.ts

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

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

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

export { Options, esbuildTransform as default }

This plugin uses the same options from esbuild transform API.

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 new RegExp(`\\.${loader} ) (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 merged into and possibly override the previous ones.

// for index.tsx
[
  {
    loader: 'tsx',
    banner: "import React from 'react'"
  },
  {
    loader: 'ts',
    include: /\.tsx?$/,
    tsconfigRaw
  }
]

// the final transform options will become
{
  loader: 'tsx',
  banner: "import React from 'react'",
  tsconfigRaw
}

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: rollupOutputOptions.sourcemap !== false,
  ...options
}

License

MIT License © 2021 Exuanbo