rollup-plugin-esbuild

What is rollup-plugin-esbuild?

The rollup-plugin-esbuild package is a Rollup plugin that integrates esbuild, a fast JavaScript bundler and minifier, into the Rollup build process. It allows you to transpile TypeScript, JSX, and modern JavaScript syntax to older versions of JavaScript, as well as minify the output.

What are rollup-plugin-esbuild's main functionalities?

Transpile TypeScript

This feature allows you to transpile TypeScript files to JavaScript. The code sample demonstrates how to configure rollup-plugin-esbuild to process .ts files and output a CommonJS bundle.

const esbuild = require('rollup-plugin-esbuild');

module.exports = {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    esbuild({
      include: /\.ts$/,
      minify: false,
      target: 'es2015'
    })
  ]
};

Transpile JSX

This feature allows you to transpile JSX files to JavaScript. The code sample demonstrates how to configure rollup-plugin-esbuild to process .jsx files and output an ES module bundle.

const esbuild = require('rollup-plugin-esbuild');

module.exports = {
  input: 'src/index.jsx',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    esbuild({
      include: /\.jsx$/,
      minify: false,
      target: 'es2015'
    })
  ]
};

Minify JavaScript

This feature allows you to minify JavaScript files. The code sample demonstrates how to configure rollup-plugin-esbuild to minify the output and target ES2015.

const esbuild = require('rollup-plugin-esbuild');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'iife'
  },
  plugins: [
    esbuild({
      minify: true,
      target: 'es2015'
    })
  ]
};

Other packages similar to rollup-plugin-esbuild

rollup-plugin-terser

The rollup-plugin-terser package is a Rollup plugin that uses Terser to minify JavaScript. While rollup-plugin-esbuild can also minify JavaScript, rollup-plugin-terser is specifically focused on minification and offers more advanced minification options.

rollup-plugin-babel

The rollup-plugin-babel package is a Rollup plugin that uses Babel to transpile JavaScript. It supports a wide range of JavaScript syntax transformations and plugins. Compared to rollup-plugin-esbuild, rollup-plugin-babel is more configurable and supports a broader range of transformations, but it is generally slower.

rollup-plugin-sucrase

The rollup-plugin-sucrase package is a Rollup plugin that uses Sucrase to transpile modern JavaScript and TypeScript. Sucrase is designed to be faster than Babel for specific use cases, such as transpiling TypeScript and JSX. Compared to rollup-plugin-esbuild, rollup-plugin-sucrase is also focused on speed but supports fewer transformations.

README

💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.

---

rollup-plugin-esbuild

esbuild is by far one of the fastest TS/ESNext to ES6 compilers and minifier, this plugin replaces rollup-plugin-typescript2, @rollup/plugin-typescript and rollup-plugin-terser for you.

Install

yarn add esbuild rollup-plugin-esbuild --dev

Usage

In rollup.config.js:

import esbuild from 'rollup-plugin-esbuild'

export default {
  plugins: [
    esbuild({
      // All options are optional
      include: /\.[jt]sx?$/, // default, inferred from `loaders` option
      exclude: /node_modules/, // default
      sourceMap: true, // default
      minify: process.env.NODE_ENV === 'production',
      target: 'es2017', // default, or 'es20XX', 'esnext'
      jsx: 'transform', // default, or 'preserve'
      jsxFactory: 'React.createElement',
      jsxFragment: 'React.Fragment',
      // Like @rollup/plugin-replace
      define: {
        __VERSION__: '"x.y.z"',
      },
      tsconfig: 'tsconfig.json', // default
      // Add extra loaders
      loaders: {
        // Add .json files support
        // require @rollup/plugin-commonjs
        '.json': 'json',
        // Enable JSX in .js files too
        '.js': 'jsx',
      },
    }),
  ],
}

• include and exclude can be String | RegExp | Array[...String|RegExp], when supplied it will override default values.
• It uses jsx, jsxDev, jsxFactory, jsxFragmentFactory and target options from your tsconfig.json as default values.

Declaration File

There are serveral ways to generate declaration file:

• Use tsc with emitDeclarationOnly, the slowest way but you get type checking, it doesn't bundle the .d.ts files.
• Use rollup-plugin-dts which generates and bundle .d.ts, also does type checking.
• Use api-extractor by Microsoft, looks quite complex to me so I didn't try it, PR welcome to update this section.

Use with Vue JSX

Use this with rollup-plugin-vue-jsx:

import vueJsx from 'rollup-plugin-vue-jsx-compat'
import esbuild from 'rollup-plugin-esbuild'

export default {
  // ...
  plugins: [
    vueJsx(),
    esbuild({
      jsxFactory: 'vueJsxCompat',
    }),
  ],
}

Standalone Minify Plugin

If you only want to use this plugin to minify your bundle:

import { minify } from 'rollup-plugin-esbuild'

export default {
  plugins: [minify()],
}

Optimizing Deps

You can use this plugin to pre-bundle dependencies using esbuild and inline them in the Rollup-generated bundle:

esbuild({
  optimizeDeps: {
    include: ['vue', 'vue-router'],
  },
})

This eliminates the need of @rollup/plugin-node-modules and @rollup/plugin-commonjs.

Note that this is an experimental features, breaking changes might happen across minor version bump.

TODO: Maybe we can scan Rollup input files to get a list of deps to optimize automatically.

Sponsors

License

MIT © EGOIST (Kevin Titor)