rollup-plugin-swc
rollup-plugin-swc copied to clipboard
Use SWC with Rollup to transform / minify ESNext and TypeScript code.

rollup-plugin-swc
SWC is an extensible Rust-based platform for the next generation of fast developer tools. This plugin is designed to replace rollup-plugin-typescript2
, @rollup/plugin-typescript
, @rollup/plugin-babel
and rollup-plugin-terser
for you.
Comparison
sukkaw/rollup-plugin-swc | mentaljam/rollup-plugin-swc | nicholasxjy/rollup-plugin-swc2 | |
---|---|---|---|
minify your bundle in one pass[^1] |
Yes | No | No |
Standalone swcMinify plugin |
Yes | No | No |
Config Intellisense[^2] | Yes | No | No |
Reads your tsconfig.json and jsconfig.json |
Yes[^3] | No | No |
ESM export | Full | Partial[^4] | No |
TypeScrit declarations | Yes | Yes | Yes |
Has testing | Yes | No | No |
[^1]: If minify is called in Rollup's transform
phase, every individual module processed will result in a minify call. However, if minify is called in Rollup's renderChunk
phase, the minify will only be called once in one whole pass before Rollup generates bundle, results in a faster build.
[^2]: Autocompletion and type checking in your IDE
[^3]: extends
is not supported.
[^4]: mentaljam/rollup-plugin-swc
has both main
and module
fields in package.json
, but has no exports
field.
Install
$ npm i @swc/core rollup-plugin-swc3
# If you prefer yarn
# yarn add @swc/core rollup-plugin-swc3
# If you prefer pnpm
# pnpm add @swc/core rollup-plugin-swc3
Usage
// rollup.config.js
import { swc } from 'rollup-plugin-swc3';
export default {
input: 'xxxx',
output: {},
plugins: [
swc({
// All options are optional
include: /\.[mc]?[jt]sx?$/, // default
exclude: /node_modules/, // default
tsconfig: 'tsconfig.json', // default
// And add your swc configuration here!
// "filename" will be ignored since it is handled by rollup
jsc: {}
}),
];
}
If you want autocompletion in your IDE or type check:
import { swc, defineRollupSwcOption } from 'rollup-plugin-swc3';
export default {
input: 'xxxx',
output: {},
plugins: [
swc(defineRollupSwcOption({
// ... There goes the plugin's configuration
})),
];
}
// or
/** @type {import('rollup-plugin-swc3').PluginOptions} */
const swcPluginConfig = {}
-
include
andexclude
can beString | RegExp | Array<String | RegExp>
, when supplied it will override default values. - It uses
importHelpers
,experimentalDecorators
,emitDecoratorMetadata
,jsxFactory
,jsxFragmentFactory
,target
,baseUrl
andpaths
options from yourtsconfig.json
orjsconfig.json
as default values if your doesn't provide corresponding swc configuration.- Currently,
rollup-plugin-swc
won't useesModuleInterop
from yourtsconfig.json
as swc requiresmodule.type
configuration whenmodule.noInterop
is given. -
jsconfig.json
will be ignored iftsconfig.json
andjsconfig.json
both exist. -
baseUrl
andpaths
will be passed to swc directly. They won't affect how rollup resolve your imports. Please use other plugins to resolve your imports' aliases (e.g., add rollup-plugin-typescript-paths or rollup-plugin-tsconfig-paths before@rollup/plugin-node-resolve
).
- Currently,
Standalone Minify Plugin
If you only want to use swc
to minify your bundle:
import { minify } from 'rollup-plugin-swc3'
export default {
plugins: [
minify({
// swc's minify option here
// mangle: {}
// compress: {}
}),
],
}
If you want autocompletion in your IDE or type check:
import { minify, defineRollupSwcMinifyOption } from 'rollup-plugin-swc3'
export default {
plugins: [
minify(
defineRollupSwcMinifyOption({
// swc's minify option here
// mangle: {}
// compress: {}
})
),
],
}
// or
/** @type {import('@swc/core').JsMinifyOptions} */
const swcMinifyConfig = {}
Write your Rollup config in TypeScript
You can write your Rollup config file in rollup.config.ts
, and use the following command:
rollup --config rollup.config.ts --configPlugin swc3
TypeScript Declaration File
There are serveral ways to generate declaration file:
- Use
tsc
withemitDeclarationOnly
, 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. It is used by this plugin as well.
Use with Non-react JSX
You can either configure it in your tsconfig.json
or in your rollup.config.js
.
// Vue JSX
import vueJsx from 'rollup-plugin-vue-jsx-compat'
import { swc, defineRollupSwcOption } from 'rollup-plugin-swc3';
export default {
input: 'xxxx',
output: {},
plugins: [
vueJsx(),
swc(defineRollupSwcOption({
jsc: {
transform: {
react: {
pragma: 'vueJsxCompat'
}
}
}
})),
];
}
// Preact
import { swc, defineRollupSwcOption } from 'rollup-plugin-swc3';
export default {
input: 'xxxx',
output: {},
plugins: [
vueJsx(),
swc(defineRollupSwcOption({
jsc: {
transform:{
react: {
pragma: 'h',
pragmaFrag: 'Fragment'
// To use preact/jsx-runtime:
// importSource: 'preact',
// runtime: 'automatic'
}
}
}
})),
];
}
rollup-plugin-swc © Sukka, Released under the MIT License.
Inspired by egoist's rollup-plugin-esbuild.
Authored and maintained by Sukka with help from contributors (list).
Personal Website · Blog · GitHub @SukkaW · Telegram Channel @SukkaChannel · Twitter @isukkaw · Keybase @sukka