Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/SukkaW/rollup-plugin-swc

Use SWC with Rollup to transform / minify ESNext and TypeScript code.
https://github.com/SukkaW/rollup-plugin-swc

esnext jsx minifier rollup rollup-plugin swc tsx typescript

Last synced: about 2 months ago
JSON representation

Use SWC with Rollup to transform / minify ESNext and TypeScript code.

Awesome Lists containing this project

README 

        


  



rollup-plugin-swc



[SWC](https://swc.rs/) 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`](#react-server-component-directives-use-client-and-use-server)



> Since `0.9.1` the support for `'use client'` and `'use server'` has been separated into a standalone rollup plugin [`rollup-preserve-directives`](https://github.com/huozhi/rollup-preserve-directives), the previous `preserveUseDirective` named export is retained for the backward compatibility.



## Comparison



|                                                | [sukkaw/rollup-plugin-swc](https://github.com/SukkaW/rollup-plugin-swc) | [mentaljam/rollup-plugin-swc](https://github.com/mentaljam/rollup-plugin-swc) | [nicholasxjy/rollup-plugin-swc2](https://github.com/nicholasxjy/rollup-plugin-swc2) | [@rollup/plugin-swc](https://github.com/rollup/plugins/tree/master/packages/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



```bash

$ 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



```js

// 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:



```js

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`

- Default: `/node_modules/`



A [picomatch pattern](https://github.com/micromatch/picomatch), 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`

- Default: `/\.[mc]?[jt]sx?$/`



A [picomatch pattern](https://github.com/micromatch/picomatch), 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`](https://code.visualstudio.com/docs/languages/jsconfig) 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`](https://www.npmjs.com/package/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](https://www.npmjs.com/package/rollup-plugin-typescript-paths) or [rollup-plugin-tsconfig-paths](https://www.npmjs.com/package/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:



```js

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:



```js

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:



```js

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`](https://github.com/huozhi/rollup-preserve-directives), maintained by [@huozhi](https://github.com/huozhi) and me. The previous `preserveUseDirective` named export is retained for the backward compatibility.



```bash

# npm

npm install -D rollup-preserve-directives

# yarn

yarn add -D rollup-preserve-directives

# pnpm

pnpm add -D rollup-preserve-directives

```



```js

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



  ```js

  // 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:



  ```js

  // 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:



```sh

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



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

        }

      }

    })),

  ];

}

```



```js

// 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](https://github.com/SukkaW), Released under the [MIT](./LICENSE) License.


Inspired by [egoist](https://github.com/egoist)'s [rollup-plugin-esbuild](https://github.com/egoist/rollup-plugin-esbuild).


Authored and maintained by Sukka with help from contributors ([list](https://github.com/SukkaW/rollup-plugin-swc/graphs/contributors)).



> [Personal Website](https://skk.moe) · [Blog](https://blog.skk.moe) · GitHub [@SukkaW](https://github.com/SukkaW) · Telegram Channel [@SukkaChannel](https://t.me/SukkaChannel) · Mastodon [@[email protected]](https://acg.mn/@sukka) · Twitter [@isukkaw](https://twitter.com/isukkaw) · Keybase [@sukka](https://keybase.io/sukka)