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.

Used in Rspack mode#

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

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

Register SWC Plugin#

Modern.js supports registering SWC's Wasm plugin through tools.swc, such as registering @swc/plugin-styled-components:

export default {
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [['@swc/plugin-styled-components', {}]],
        },
      },
    },
  },
};

Please note that the SWC plugin is still an experimental feature, and the SWC Wasm plugin is currently not backward compatible. The version of the SWC plugin is closely tied to the version of swc_core that Rspack depends on.

This means that you must to choose an SWC plugin that matches the current version of swc_core to ensure that it works properly. If the version of the SWC plugin you are using does not match the version of swc_core that Rspack depends on, Rspack will throw the following error during the build process:

If you encounter the above issues, a common solution is to upgrade both the Modern.js and SWC plugins to the latest versions.

For details, please refer to Rsbuild - SWC Plugin Version.

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.

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.

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.

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.