Настройка SWC для транспиляции JavaScript/TypeScript

Настройка SWC для транспиляции JavaScript/TypeScript

SWC (Speedy Web Compiler) — транспилятор написанный на Rust, совместимый с Babel по набору трансформаций. Он в 20–70 раз быстрее Babel на холодной сборке. Next.js использует SWC по умолчанию с версии 12. Vite применяет его для TypeScript через esbuild, а для JSX-трансформаций — через плагин. Jest с @swc/jest запускает тесты заметно быстрее чем с babel-jest.

Установка standalone

npm install --save-dev @swc/core @swc/cli

.swcrc — основной конфиг:

{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": false,
        "refresh": false
      },
      "legacyDecorator": false,
      "decoratorMetadata": false
    },
    "target": "es2020",
    "loose": false,
    "externalHelpers": true,
    "keepClassNames": true
  },
  "env": {
    "targets": "> 0.5%, last 2 versions, not dead",
    "mode": "usage",
    "coreJs": "3"
  },
  "minify": false
}

npm install @swc/helpers  # externalHelpers: true — общие хелперы вместо инлайн
npm install core-js@3     # для полифилов через env.mode: "usage"

Интеграция с webpack через swc-loader

npm install --save-dev swc-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
          // опции можно задать инлайн или оставить пустым — читает .swcrc
        },
      },
    ],
  },
};

Замена babel-loader на swc-loader в реальных проектах даёт ускорение сборки в 3–5 раз.

Jest с @swc/jest

npm install --save-dev @swc/jest

// jest.config.mjs
export default {
  transform: {
    '^.+\\.(ts|tsx|js|jsx)$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
            tsx: true,
            decorators: true,
          },
          transform: {
            react: { runtime: 'automatic' },
          },
        },
        env: {
          targets: { node: 18 },
        },
      },
    ],
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

Декораторы

SWC поддерживает два варианта:

Legacy TypeScript декораторы (для MobX, TypeORM, NestJS со старым синтаксисом):

{
  "jsc": {
    "parser": { "decorators": true },
    "transform": {
      "legacyDecorator": true,
      "decoratorMetadata": true
    }
  }
}

Новые TC39 декораторы (2023-11, финализированный стандарт):

{
  "jsc": {
    "parser": { "decorators": true },
    "transform": {
      "legacyDecorator": false,
      "useDefineForClassFields": false
    },
    "experimental": {
      "decorators": true
    }
  }
}

Кастомные плагины через Wasm

В отличие от Babel (где плагины пишутся на JS), SWC-плагины компилируются в WebAssembly. Это усложняет написание собственных плагинов, но существующие работают быстро:

npm install --save-dev @swc-contrib/plugin-styled-components

{
  "jsc": {
    "experimental": {
      "plugins": [
        ["@swc-contrib/plugin-styled-components", {
          "displayName": true,
          "ssr": true
        }]
      ]
    }
  }
}

Каталог плагинов: swc.rs/docs/plugin/ecmascript/plugin-usage

SWC в Rollup через @rollup/plugin-swc

npm install --save-dev @rollup/plugin-swc

import swc from '@rollup/plugin-swc';

export default {
  input: 'src/index.ts',
  plugins: [
    swc({
      swc: {
        jsc: {
          parser: { syntax: 'typescript' },
          target: 'es2020',
        },
      },
    }),
  ],
};

Различия с Babel

Что SWC не делает

Как и Babel, SWC только транспилирует — не проверяет типы. tsc --noEmit остаётся обязательным шагом в CI:

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "build": "swc src -d dist && npm run typecheck"
  }
}

Сроки

Замена Babel на SWC в webpack-проекте: 2–4 часа (замена loader, перенос конфига, тестирование). Настройка SWC для Jest вместо babel-jest: 1–2 часа. Настройка с декораторами и кастомными wasm-плагинами: 4–8 часов.