rollup-plugin-swc3

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 pass1	Yes	No	No
Standalone swcMinify plugin	Yes	No	No
Config Intellisense2	Yes	No	No
Reads your tsconfig.json and jsconfig.json	Yes3	No	No
ESM export	Full	Partial4	No
TypeScrit declarations	Yes	Yes	Yes
Has testing	Yes	No	No

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: /\.[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 and exclude can be String | RegExp | Array<String | RegExp>, when supplied it will override default values.
• It uses importHelpers, experimentalDecorators, emitDecoratorMetadata, jsxFactory, jsxFragmentFactory, target, baseUrl and paths options from your tsconfig.json or jsconfig.json as default values if your doesn't provide corresponding swc configuration.
  • Currently, rollup-plugin-swc won't use esModuleInterop from your tsconfig.json as swc requires module.type configuration when module.noInterop is given.
  • jsconfig.json will be ignored if tsconfig.json and jsconfig.json both exist.
  • baseUrl and paths 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).

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 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. 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

Footnotes

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. ↩