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.

New: Building library for React Server Component support is added in 0.9.0! 'use client' and 'use server' directives now are handled properly, without triggering rollup warnings. Start using 'use client' and 'use server' in your library by adding two lines in your rollup.config.js

Since 0.9.1 the support for 'use client' and 'use server' has been separated into a standalone rollup plugin rollup-preserve-directives, the previous preserveUseDirective named export is retained for the backward compatibility.

Comparison

| | sukkaw/rollup-plugin-swc | mentaljam/rollup-plugin-swc | nicholasxjy/rollup-plugin-swc2 | @rollup/plugin-swc | | ---------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | minify your bundle in one pass[^1] | ✅ | 🛑 | 🛑 | 🛑 | | Standalone swcMinify plugin | ✅ | 🛑 | 🛑 | 🛑 | | Config Intellisense[^2] | ✅ | 🛑 | 🛑 | 🛑 | | Reads your tsconfig.json and jsconfig.json | ✅ | 🛑 | 🛑 | 🛑 | | ESM export | ✅ | 🟡[^3] | 🛑 | ✅ | | TypeScript declarations | ✅ | ✅ | ✅ | ✅ | | Has testing | ✅ | 🛑 | 🛑 | ✅ |

[^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]: mentaljam/rollup-plugin-swc has both main and module fields in package.json, but has🛑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
      // tsconfig: false, // You can also prevent `rollup-plugin-swc` from reading tsconfig.json, see below
      // 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 = {}

exclude

• Type: string | RegExp | Array<String | RegExp>
• Default: /node_modules/

A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore.

extensions

• Type: string[]
• Default: ['.ts', '.tsx', '.mjs', '.js', '.cjs', '.jsx']

Specifies the files in the build the plugin should operate on. Also, the plugin will search and resolve files for extensions in the order specified for extensionless imports.

include

• Type: string | RegExp | Array<String | RegExp>
• Default: /\.[mc]?[jt]sx?$/

A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on.

tsconfig

• Type: string | false | undefined
• Default: 'tsconfig.json'

rollup-plugin-swc will read your tsconfig.json or jsconfig.json for default values if your doesn't provide corresponding swc options:

• The configuration your passed to rollup-plugin-swc will always have the highest priority (higher than tsconfig.json/jsconfig.json).
• rollup-plugin-swc uses get-tsconfig to find the tsconfig.json/jsconfig.json for the file currently being transpiled.
  • You can also provide a custom filename (E.g. tsconfig.rollup.json, jsconfig.compile.json) to tsconfig option, and rollup-plugin-swc will find and resolve the nearest file with that filename.
  • You can also provide an absolute path (E.g. /path/to/your/tsconfig.json) to tsconfig option, and rollup-plugin-swc will only use the provided path as a single source of truth.
• You can prevent rollup-plugin-swc from reading tsconfig.json/jsconfig.json by setting tsconfig option to false.
• jsconfig.json will be ignored if tsconfig.json and jsconfig.json both exist.
• The extends of tsconfig.json/jsconfig.json is ~~not supported~~ now supported.
• compilerOptions.target will be passed to swc's jsc.target.
• compilerOptions.jsxImportSource, compilerOptions.jsxFactory, and compilerOptions.jsxFragmentFactory will be passed to swc's jsc.transform.react.importSource, jsc.transform.react.pragma and jsc.transform.react.pragmaFrag.
• When compilerOptions.jsx is either react-jsx or react-jsxdev, swc's jsc.transform.react.runtime will be automatic, otherwise it will be classic.
  • compilerOptions.jsx: react-jsxdev will also set swc's jsc.transform.react.development to true.
  • compilerOptions.jsx: preserve will be ignored. swc will always transpile your jsx into javascript code.
• compilerOptions.baseUrl and compilerOptions.paths will be passed to swc's jsc.baseUrl and jsc.paths directly. They won't affect how rollup resolve your imports. If you have encounted any issue during bundling, 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).
• compilerOptions.importHelpers will be passed to swc's jsc.externalHelpers. You will have to have @swc/helpers avaliable in your project when enabled.
• compilerOptions.experimentalDecorators and compilerOptions.emitDecoratorMetadata will be passed to swc's jsc.parser.decorators and jsc.transform.decoratorMetadata.
• compilerOptions.esModuleInterop will always be ignored, as swc requires module.type to exist when module.noInterop is given.

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 = {}

If you are are using Vite and you do not want to use terser or esbuild for minification, rollup-plugin-swc3 also provides a standalone minify plugin designed for Vite:

import { defineConfig } from 'vite';
import { viteMinify } from 'rollup-plugin-swc3'

export default defineConfig({
  plugins: [
    viteMinify({
      // swc's minify option here
      // mangle: {}
      // compress: {}
    }),
  ],
})

React Server Component directives ('use client' and 'use server')

~~Since version 0.9.0, the support for 'use client' and 'use server' has been added:~~

The support for 'use client' and 'use server' has been separated into a standalone rollup plugin rollup-preserve-directives, maintained by @huozhi and me. The previous preserveUseDirective named export is retained for the backward compatibility.

# npm
npm install -D rollup-preserve-directives
# yarn
yarn add -D rollup-preserve-directives
# pnpm
pnpm add -D rollup-preserve-directives

// rollup.config.js
import { swc } from 'rollup-plugin-swc3';
import preserveDirectives from 'rollup-preserve-directives';

export default {
  input: 'xxxx',
  output: {},
  plugins: [
    swc(),
    // And add `preserveDirectives` plugin after the `swc` plugin
    preserveDirectives()
  ];
}

And that is it!

preserveDirectives supports:

• Merging duplicated directives in the output bundles

  // src/foo.js
  'use sukka';
  'use foxtail';
  
  export const foo = 'foo';
  
  // src/bar.js
  'use sukka';
  export const bar = 'bar';
  
  // src/index.js
  export { foo } from './foo';
  export { bar } from './bar';
  
  // rollup.config.js
  export default {
    input: 'src/index.js',
    output: { file: 'dist/index.js' }
    plugins: [swc(), preserveDirectives()]
  }
  
  // dist/index.js
  'use sukka';
  'use foxtail';
  
  const foo = 'foo';
  const bar = 'bar';
  
  export { foo, bar };

• When bundle React Client Component and React Server Component separately, mutiple entries will have their own separated and correct directives:

  // src/client.js
  'use client';
  import { useState } from 'react';
  export const Foo = () => { useState('client-only code') };
  
  // src/server.js
  'use server';
  import 'fs';
  export const bar = 'server only code';
  
  // rollup.config.js
  export default {
    // let rollup bundle client and server separately by adding two entries
    input: {
      client: 'src/client.js',
      server: 'src/server.js'
    },
    // output both client bundle and server bundle in the "dist/" directory
    output: { dir: 'dist/', entryFileName: '[name].js' }
    plugins: [swc(), preserveDirectives()]
  }
  
  // dist/client.js
  'use client';
  import { useState } from 'react';
  const Foo = () => { useState('client-only code') };
  export { Foo };
  
  // dist/server.js
  'use server';
  import 'fs';
  const bar = 'server only code';
  export { bar };

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 { swc, defineRollupSwcOption } from 'rollup-plugin-swc3';

export default {
  input: 'xxxx',
  output: {},
  plugins: [
    swc(defineRollupSwcOption({
      jsc: {
        experimental: {
          plugins: [['swc-plugin-vue-jsx', {}]] // npm i swc-plugin-vue-jsx
        }
      }
    })),
  ];
}

// Preact
import { swc, defineRollupSwcOption } from 'rollup-plugin-swc3';

export default {
  input: 'xxxx',
  output: {},
  plugins: [
    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 · Mastodon @[email protected] · Twitter @isukkaw · Keybase @sukka