Налаштування 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 — спільні хелпери замість inline
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: 'node16',
          mode: 'usage',
          coreJs: '3',
        },
      },
    ],
  },
  testEnvironment: 'node',
};

Терміни

Заміна Babel на SWC в існуючому проекті: 2–4 години включаючи тестування. Настройка SWC для нового проекту: 30–60 хвилин.