Expert SWC-Unterstützung

SWC

SWC (Speedy Web Compiler) ist eine erweiterbare Plattform auf Rust-Basis. Es ist der Compiler, der in Next.js und Deno verwendet wird.

Verwendungszweck

• Hochleistungs-JavaScript/TypeScript-Transpilierung: Ersetzung von Babel durch einen bis zu 20-mal schnelleren Rust-basierten Compiler.
• Next.js & moderne Bundler-Pipelines: Transpilierung von React JSX, TSX, modernen ECMAScript-Funktionen und Webpack/Turbopack-Assets.
• Programmatische AST-Manipulation & Code-Generierung: Erstellung schneller, benutzerdefinierter Build-Tools mit der @swc/core Node.js-API.
• Minifizierung von Produktions-Assets: JS- und CSS-Bundles mit extremer Geschwindigkeit mit dem Minifier von @swc/core minifizieren.

Schnellstart

1. Minimale .swcrc

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "target": "es2022"
  },
  "minify": false
}

2. Kompilierung über CLI

npx @swc/cli src -d dist

Kernkonzepte

Produktions-SWC-Konfiguration (.swcrc)

Konfiguration von modernem TypeScript, React 19 JSX-Laufzeit und Modultranspilierung:

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "refresh": true
      }
    },
    "target": "es2022",
    "loose": false,
    "externalHelpers": true,
    "keepClassNames": true,
    "minify": {
      "compress": {
        "unused": true,
        "drop_console": true
      },
      "mangle": true
    }
  },
  "module": {
    "type": "es6"
  },
  "minify": true,
  "sourceMaps": true
}

Programmatische Kompilierung mit der @swc/core API

Asynchrone Transpilierung von Quelldateien in Node.js-Skripten:

import swc from "@swc/core";
import fs from "node:fs/promises";

async function compileTypeScript(filePath) {
  const code = await fs.readFile(filePath, "utf-8");

  const output = await swc.transform(code, {
    filename: filePath,
    sourceMaps: true,
    jsc: {
      parser: { syntax: "typescript", tsx: true },
      target: "es2022",
    },
    module: { type: "commonjs" },
  });

  console.log("Transpilierter Code:\n", output.code);
  if (output.map) {
    console.log("Source Map generiert");
  }
}

compileTypeScript("./src/index.ts");

Hochgeschwindigkeits-CLI-Transpilierung

Direkte Kompilierung von Verzeichnisbäumen mit der SWC-Befehlszeile:

# src/ nach dist/ mit Source Maps transpilieren
npx swc src -d dist --copy-files --source-maps

# Mit swcpack transpilieren und bündeln
npx swc src/index.ts -o dist/bundle.js --minify

Häufige Muster

Jest-Tests mit @swc/jest beschleunigen

Problem: TypeScript-Transpilierung mit ts-jest führt dazu, dass Test-Suites sehr langsam laufen. Lösung: Ersetzen Sie ts-jest durch @swc/jest.

// jest.config.js
module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": [
      "@swc/jest",
      {
        jsc: {
          transform: {
            react: { runtime: "automatic" },
          },
        },
      },
    ],
  },
};

SWC-Bündelungs- & Minifizierungspipeline

Problem: Schnelle Minifizierung für Produktions-Build-Skripte erforderlich. Lösung: Aktivieren Sie die minify-Optionen in .swcrc.

{
  "minify": true,
  "jsc": {
    "minify": {
      "compress": {
        "drop_console": true
      },
      "mangle": true
    }
  }
}

Best Practices (2026)

• Tun Sie @swc/helpers installieren und externalHelpers: true aktivieren, um die Duplizierung von Transpiler-Laufzeit-Helper-Stubs zu vermeiden.
• Tun Sie SWC mit tsc --noEmit in CI/CD-Pipelines kombinieren, da SWC Code transpiliert, ohne eine Typprüfung durchzuführen.
• Tun Sie target: "es2022" oder neuer konfigurieren, um native moderne Browserfähigkeiten zu nutzen.
• Tun Sie @swc/jest oder @swc/register verwenden, um die Ausführung von Unit-Tests drastisch zu beschleunigen.
• Tun Sie nicht sich auf Babel-Plugins verlassen, es sei denn, es ist unbedingt erforderlich; prüfen Sie, ob native SWC-Plugins (Wasm-Plugins) existieren.
• Tun Sie nicht .swc-Build-Cache-Verzeichnisse in Git-Repositorys committen.
• Tun Sie nicht die SWC-Minifizierung ohne Generierung von Source Maps zur Produktionsfehlersuche ausführen.

Fehlerbehebung

Fehler / Symptom	Ursache	Lösung
failed to handle: error parsing typescript	TypeScript-Syntax (z.B. JSX oder Decorators) ohne Aktivierung der Flags in .swcrc	Stellen Sie sicher, dass "syntax": "typescript", "tsx": true und "decorators": true in jsc.parser vorhanden sind.
Decorator-Metadaten werden nicht ausgegeben (Reflect.getMetadata gibt undefined zurück)	transform.legacyDecorator und transform.decoratorMetadata nicht konfiguriert	Setzen Sie "legacyDecorator": true und "decoratorMetadata": true innerhalb von jsc.transform.
Cannot find module '@swc/core-darwin-arm64'	Native Binärinstallation während npm/yarn-Installation fehlgeschlagen	Führen Sie npm install --force @swc/core aus, um den nativen Binärabbau für die Zielarchitektur auszulösen.

Referenzen

• SWC-Dokumentation