Guide
Tutorials
Config
API
Community
Guide
Tutorials
Config
API
Community

tools.swc

  • Type: Object | Function
  • Default: undefined

Introduction

SWC (Speedy Web Compiler) is a transformer and minimizer for JavaScript and TypeScript based on Rust. SWC can provide the same abilities with Babel, and it's more than 10x faster than Babel.

Modern.js has a out-of-box plugin for SWC, power your Web application with Polyfill and minification, we also port some common used Babel plugins to SWC.

TIP

When using Rspack as the bundler, SWC will be used for transpiling and compression by default, so you don't need to install or configure the SWC plugin.

Used in Rspack mode

You can set the options of builtin:swc-loader through tools.swc.

import { defineConfig } from '@modern-js/app-tools'; export default defineConfig<'rspack'>({ tools: { swc: { jsc: { externalHelpers: false, }, }, }, });

For more usage, please refer to Rsbuild - tools.swc.

Used in Webpack mode

First, you need to execute pnpm run new to enable the SWC compile:

? Please select the operation you want: Enable features
? Please select the feature name: Enable SWC Compile

After the installation, please register the SWC plugin in the modern.config.ts file, then the SWC compilation and compression will be enabled.

modern.config.ts
import { appTools, defineConfig } from '@modern-js/app-tools';
import { swcPlugin } from '@modern-js/plugin-swc';

export default defineConfig({
  plugins: [appTools(), swcPlugin()],
});

Config

You can set the SWC compilation behavior through the tools.swc config.

modern.config.ts
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  tools: {
    swc: {
      jsMinify: {
        compress: {},
        mangle: true,
      },
    },
  },
});

Or using function to have more customize config, or to modify the default config.

modern.config.ts
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  tools: {
    swc(config, { setConfig }) {
      // Used for transpiling decorator of mobx correctly
      setConfig(config, 'jsc.transform.useDefineForClassFields', true);
    },
  },
});

For config details, please refer to SWC Plugin Configuration.