rollup-plugin-swc
                                
                                 rollup-plugin-swc copied to clipboard
                                
                                    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 | |
|---|---|---|---|
| minifyyour bundle in one pass[^1] | Yes | No | No | 
| Standalone swcMinifyplugin | Yes | No | No | 
| Config Intellisense[^2] | Yes | No | No | 
| Reads your tsconfig.jsonandjsconfig.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 = {}
- includeand- excludecan be- String | RegExp | Array<String | RegExp>, when supplied it will override default values.
- It uses importHelpers,experimentalDecorators,emitDecoratorMetadata,jsxFactory,jsxFragmentFactory,target,baseUrlandpathsoptions from yourtsconfig.jsonorjsconfig.jsonas default values if your doesn't provide corresponding swc configuration.- Currently, rollup-plugin-swcwon't useesModuleInteropfrom yourtsconfig.jsonas swc requiresmodule.typeconfiguration whenmodule.noInteropis given.
- jsconfig.jsonwill be ignored if- tsconfig.jsonand- jsconfig.jsonboth exist.
- baseUrland- pathswill 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 tscwithemitDeclarationOnly, the slowest way but you get type checking, it doesn't bundle the.d.tsfiles.
- Use rollup-plugin-dtswhich 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