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.
rollup-plugin-esbuild
esbuild is by far one of the fastest TS/ESNext to ES6 compilers, so it makes sense to use it over Babel/TSC with Rollup to take advantage of both worlds (Speed and the Rollup plugin ecosytem).
Install
yarn add rollup-plugin-esbuild --dev
Usage
In rollup.config.js
:
import esbuild from 'rollup-plugin-esbuild'
export default {
plugins: [
esbuild({
include: /\.[jt]sx?$/,
exclude: /node_modules/,
watch: process.argv.includes('--watch'),
minify: process.env.NODE_ENV === 'production',
target: 'es2017'
jsxFactory: 'React.createElement',
jsxFragment: 'React.Fragment'
define: {
__VERSION__: '"x.y.z"'
}
}),
],
}
include
and exclude
can be String | RegExp | Array[...String|RegExp]
, when supplied it will override 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
, no type checking so it's very fast. - Use
api-extractor
by Microsoft, looks quite complex to me so I didn't try it, PR welcome to update this section.
Type Checking
How do I get type checking then? VS Code only shows type errors for opened files!
You can enable type checking in testing, for example use jest with ts-jest to run tests, here's an example jest config file.
License
MIT © EGOIST (Kevin Titor)