0.3.0 • Published 2 years ago

@giveerr/rollup-plugin-swc3 v0.3.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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-swcmentaljam/rollup-plugin-swcnicholasxjy/rollup-plugin-swc2
minify your bundle in one pass^1YesNoNo
Standalone swcMinify pluginYesNoNo
Config Intellisense^2YesNoNo
Reads your tsconfig.json and jsconfig.jsonYes^3NoNo
ESM exportFullPartial^4No
TypeScrit declarationsYesYesYes
Has testingYesNoNo

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

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