💛 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

1yarn add esbuild rollup-plugin-esbuild --dev

Usage

In rollup.config.js:

1import esbuild from 'rollup-plugin-esbuild'
2
3export default {
4  plugins: [
5    esbuild({
6      // All options are optional
7      include: /\.[jt]sx?$/, // default, inferred from `loaders` option
8      exclude: /node_modules/, // default
9      sourceMap: true, // default
10      minify: process.env.NODE_ENV === 'production',
11      target: 'es2017', // default, or 'es20XX', 'esnext'
12      jsx: 'transform', // default, or 'preserve'
13      jsxFactory: 'React.createElement',
14      jsxFragment: 'React.Fragment',
15      // Like @rollup/plugin-replace
16      define: {
17        __VERSION__: '"x.y.z"',
18      },
19      tsconfig: 'tsconfig.json', // default
20      // Add extra loaders
21      loaders: {
22        // Add .json files support
23        // require @rollup/plugin-commonjs
24        '.json': 'json',
25        // Enable JSX in .js files too
26        '.js': 'jsx',
27      },
28    }),
29  ],
30}

• 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:

1import vueJsx from 'rollup-plugin-vue-jsx-compat'
2import esbuild from 'rollup-plugin-esbuild'
3
4export default {
5  // ...
6  plugins: [
7    vueJsx(),
8    esbuild({
9      jsxFactory: 'vueJsxCompat',
10    }),
11  ],
12}

Standalone Minify Plugin

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

1import { minify } from 'rollup-plugin-esbuild'
2
3export default {
4  plugins: [minify()],
5}

Optimizing Deps

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

1esbuild({
2  optimizeDeps: {
3    include: ['vue', 'vue-router'],
4  },
5})

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)