Use SWC with Rollup to transform 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.

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: {},
  plugin: [
    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: {},
  plugin: [
    swc(defineRollupSwcOption({
      // ... There goes the plugin's configuration
    })),
  ];
}
  • include and exclude can be String | RegExp | Array<String | RegExp>, when supplied it will override default values.
  • It uses importHelpers, experimentalDecorators, emitDecoratorMetadata, jsxFactory, jsxFragmentFactory and target options from your tsconfig.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.

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 esither 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: {},
  plugin: [
    vueJsx(),
    swc(defineRollupSwcOption({
      jsc: {
        react: {
          pragma: 'vueJsxCompat'
        }
      }
    })),
  ];
}

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

export default {
  input: 'xxxx',
  output: {},
  plugin: [
    vueJsx(),
    swc(defineRollupSwcOption({
      jsc: {
        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

GitHub

View Github