---
title: swc
---

# tools.swc

- **类型：** `Object | Function`
- **默认值：** `undefined`

## 介绍

import SWC from '@site-docs/components/swc.mdx';

<SWC />

:::tip
在使用 Rspack 作为打包工具时，默认会使用 SWC 进行转译和压缩，因此你不需要再安装和配置 SWC 插件。
:::

## 在 Rspack 模式下使用

通过 `tools.swc` 可以设置 Rspack [builtin:swc-loader](https://rspack.dev/zh/guide/features/builtin-swc-loader) 的选项。

```
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig<'rspack'>({
  tools: {
    swc: {
      jsc: {
        externalHelpers: false,
      },
    },
  },
});
```

更多用法可参考 [Rsbuild - tools.swc](https://rsbuild.dev/zh/config/tools/swc)。

### 注册 SWC 插件

Modern.js 支持通过 `tools.swc` 注册 SWC 的 Wasm 插件，比如注册 [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components)：

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

需要注意的是，SWC 的插件仍然是一个实验性功能，目前 SWC 的 Wasm 插件是不向后兼容的，SWC 插件的版本与 Rspack 依赖的 swc_core 版本存在强耦合关系。

这意味着，你需要选择和当前 swc_core 版本匹配的 SWC 插件，才能使它正常执行。如果你使用的 SWC 插件版本与 Rspack 依赖的 swc_core 版本不匹配，Rspack 在执行构建时会抛出如下错误：

```
1: failed to run Wasm plugin transform. Please ensure the version of `swc_core`
   used by the plugin is compatible with the host runtime.
```

如果你遇到了以上问题，通常可行的解决方法是将 Modern.js 和 SWC 插件都升级到最新版本。

详情可参考 [Rsbuild - SWC 插件版本](https://rsbuild.dev/zh/guide/basic/configure-swc#swc-%E6%8F%92%E4%BB%B6%E7%89%88%E6%9C%AC)。

## 在 Webpack 模式下使用

import EnableSWC from '@site-docs/components/enableSwc.mdx';

<EnableSWC />

### 配置项

你可以通过 `tools.swc` 配置项来设置 SWC 编译行为。

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

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

当然也可以使用函数进行更灵活的配置，或者修改某些默认配置。

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

export default defineConfig({
  tools: {
    swc(config, { setConfig }) {
      // 用于 mobx 中 decorator 编译
      setConfig(config, 'jsc.transform.useDefineForClassFields', true);
    },
  },
});
```

完整配置项请参考 [SWC 插件配置](/plugin/cli-plugins/plugin-swc.html#配置)。
