Repository files navigation

SWC is an extensible Rust-based platform for the next generation of fast developer tools. This plugin is designed to replacerollup-plugin-typescript2,@rollup/plugin-typescript,@rollup/plugin-babel androllup-plugin-terser for you.

New: Building library for React Server Component support is added in0.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 yourrollup.config.js

Since0.9.1 the support for'use client' and'use server' has been separated into a standalone rollup pluginrollup-preserve-directives, the previouspreserveUseDirective named export is retained for the backward compatibility.

$ 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

// rollup.config.jsimport{swc}from'rollup-plugin-swc3';exportdefault{input:'xxxx',output:{},plugins:[swc({// All options are optionalinclude:/\.[mc]?[jt]sx?$/,// defaultexclude:/node_modules/,// defaulttsconfig:'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 rollupjsc:{}}),];}

If you want autocompletion in your IDE or type check:

import{swc,defineRollupSwcOption}from'rollup-plugin-swc3';exportdefault{input:'xxxx',output:{},plugins:[swc(defineRollupSwcOption({// ... There goes the plugin's configuration})),];}// or/**@type {import('rollup-plugin-swc3').PluginOptions} */constswcPluginConfig={}

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

Apicomatch pattern, or array of patterns, which specifies the files in the build the plugin shouldignore.

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

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

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

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

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

• The configuration your passed torollup-plugin-swc will always have the highest priority (higher thantsconfig.json/jsconfig.json).
• rollup-plugin-swc usesget-tsconfig to find thetsconfig.json/jsconfig.json for the file currently being transpiled.
  • You can also provide a custom filename (E.g.tsconfig.rollup.json,jsconfig.compile.json) totsconfig option, androllup-plugin-swc will find and resolve thenearest file with that filename.
  • You can also provide an absolute path (E.g./path/to/your/tsconfig.json) totsconfig option, androllup-plugin-swc will only use the provided path as a single source of truth.
• You can preventrollup-plugin-swc from readingtsconfig.json/jsconfig.json by settingtsconfig option tofalse.
• jsconfig.json will be ignored iftsconfig.json andjsconfig.json both exist.
• Theextends oftsconfig.json/jsconfig.json isnot supported now supported.
• compilerOptions.target will be passed to swc'sjsc.target.
• compilerOptions.jsxImportSource,compilerOptions.jsxFactory, andcompilerOptions.jsxFragmentFactory will be passed to swc'sjsc.transform.react.importSource,jsc.transform.react.pragma andjsc.transform.react.pragmaFrag.
• WhencompilerOptions.jsx is eitherreact-jsx orreact-jsxdev, swc'sjsc.transform.react.runtime will beautomatic, otherwise it will beclassic.
  • compilerOptions.jsx: react-jsxdev will also set swc'sjsc.transform.react.development totrue.
  • compilerOptions.jsx: preserve will be ignored. swc will always transpile your jsx into javascript code.
• compilerOptions.baseUrl andcompilerOptions.paths will be passed to swc'sjsc.baseUrl andjsc.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., addrollup-plugin-typescript-paths orrollup-plugin-tsconfig-paths before@rollup/plugin-node-resolve).
• compilerOptions.importHelpers will be passed to swc'sjsc.externalHelpers. You will have to have@swc/helpers avaliable in your project when enabled.
• compilerOptions.experimentalDecorators andcompilerOptions.emitDecoratorMetadata will be passed to swc'sjsc.parser.decorators andjsc.transform.decoratorMetadata.
• compilerOptions.esModuleInterop will always beignored, as swc requiresmodule.type to exist whenmodule.noInterop is given.

If you only want to useswc to minify your bundle:

import{minify}from'rollup-plugin-swc3'exportdefault{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'exportdefault{plugins:[minify(defineRollupSwcMinifyOption({// swc's minify option here// mangle: {}// compress: {}})),],}// or/**@type {import('@swc/core').JsMinifyOptions} */constswcMinifyConfig={}

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

import{defineConfig}from'vite';import{viteMinify}from'rollup-plugin-swc3'exportdefaultdefineConfig({plugins:[viteMinify({// swc's minify option here// mangle: {}// compress: {}}),],})

Since version0.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 pluginrollup-preserve-directives, maintained by@huozhi and me. The previouspreserveUseDirective named export is retained for the backward compatibility.

# npmnpm install -D rollup-preserve-directives# yarnyarn add -D rollup-preserve-directives# pnpmpnpm add -D rollup-preserve-directives

// rollup.config.jsimport{swc}from'rollup-plugin-swc3';importpreserveDirectivesfrom'rollup-preserve-directives';exportdefault{input:'xxxx',output:{},plugins:[swc(),// And add `preserveDirectives` plugin after the `swc` pluginpreserveDirectives()];}

And that is it!

preserveDirectives supports:

• Merging duplicated directives in the output bundles

  // src/foo.js'use sukka';'use foxtail';exportconstfoo='foo';// src/bar.js'use sukka';exportconstbar='bar';// src/index.jsexport{foo}from'./foo';export{bar}from'./bar';// rollup.config.jsexportdefault{input:'src/index.js',output:{file:'dist/index.js'}plugins:[swc(),preserveDirectives()]}// dist/index.js'use sukka';'use foxtail';constfoo='foo';constbar='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';exportconstFoo=()=>{useState('client-only code')};// src/server.js'use server';import'fs';exportconstbar='server only code';// rollup.config.jsexportdefault{// let rollup bundle client and server separately by adding two entriesinput:{client:'src/client.js',server:'src/server.js'},// output both client bundle and server bundle in the "dist/" directoryoutput:{dir:'dist/',entryFileName:'[name].js'}plugins:[swc(),preserveDirectives()]}// dist/client.js'use client';import{useState}from'react';constFoo=()=>{useState('client-only code')};export{Foo};// dist/server.js'use server';import'fs';constbar='server only code';export{bar};

You can write your Rollup config file inrollup.config.ts, and use the following command:

rollup --config rollup.config.ts --configPlugin swc3

There are serveral ways to generate declaration file:

• Usetsc withemitDeclarationOnly, the slowest way but you get type checking, it doesn't bundle the.d.ts files.
• Userollup-plugin-dts which generates and bundle.d.ts, also does type checking. It is used by this plugin as well.

You can either configure it in yourtsconfig.json or in yourrollup.config.js.

// Vue JSXimport{swc,defineRollupSwcOption}from'rollup-plugin-swc3';exportdefault{input:'xxxx',output:{},plugins:[swc(defineRollupSwcOption({jsc:{experimental:{plugins:[['swc-plugin-vue-jsx',{}]]// npm i swc-plugin-vue-jsx}}})),];}

// Preactimport{swc,defineRollupSwcOption}from'rollup-plugin-swc3';exportdefault{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 theMIT License.
Inspired byegoist'srollup-plugin-esbuild.
Authored and maintained by Sukka with help from contributors (list).

Personal Website ·Blog · GitHub@SukkaW · Telegram Channel@SukkaChannel · Mastodon@sukka@acg.mn · Twitter@isukkaw · Keybase@sukka