tools.swc

  • 类型: Object | Function
  • 默认值: undefined

介绍

SWC (Speedy Web Compiler) 是基于 Rust 语言编写的高性能 JavaScript 和 TypeScript 转译和压缩工具。在 Polyfill 和语法降级方面可以和 Babel 提供一致的能力,并且性能比 Babel 高出一个数量级。

Modern.js 提供了开箱即用的 SWC 插件,可以为你的 Web 应用提供语法降级、Polyfill 以及压缩,并且移植了一些额外常见的 Babel 插件。

TIP

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

在 Rspack 模式下使用

通过 tools.swc 可以设置 Rspack builtin:swc-loader 的选项。

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

更多用法可参考 Rsbuild - tools.swc

在 Webpack 模式下使用

首先,你需要执行 pnpm run new 启用 SWC 编译:

? 请选择你想要的操作 启用可选功能
? 请选择功能名称 启用「SWC 编译」

执行完成后,你只需在 modern.config.ts 文件中注册 Modern.js 的 SWC 插件,即可启用 SWC 编译和压缩能力。

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

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

配置项

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

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

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

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

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);
    },
  },
});

完整配置项请参考 Modern.js Builder - SWC 插件配置