G1Joshi/Agent-Skills

SWC

SWC (Speedy Web Compiler) es una plataforma extensible basada en Rust. Es el compilador dentro de Next.js y Deno.

Cuándo Usar

• Transpilación de Alto Rendimiento de JavaScript/TypeScript: Reemplazar Babel por un compilador basado en Rust hasta 20 veces más rápido.
• Pipelines de Next.js y Bundlers Modernos: Transpilar React JSX, TSX, características modernas de ECMAScript y activos de Webpack/Turbopack.
• Manipulación Programática de AST y Generación de Código: Construir herramientas de compilación personalizadas rápidas usando la API de Node.js @swc/core.
• Minificación de Activos de Producción: Minificar bundles de JS y CSS a velocidades extremas usando el minificador de @swc/core.

Inicio Rápido

1. .swcrc Mínimo

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

2. Compilar vía CLI

npx @swc/cli src -d dist

Conceptos Clave

Configuración de Producción de SWC (.swcrc)

Configurando TypeScript moderno, React 19 JSX runtime y transpilación de módulos:

{
  "$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
}

Compilación Programática con la API de @swc/core

Transpilar archivos fuente de forma asíncrona en scripts de Node.js:

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("Transpiled Code:\n", output.code);
  if (output.map) {
    console.log("Source Map Generated");
  }
}

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

Transpilación CLI de Alta Velocidad

Compilar árboles de directorios directamente con la línea de comandos de SWC:

# Transpilar src/ a dist/ con mapas de origen
npx swc src -d dist --copy-files --source-maps

# Transpilar y agrupar con swcpack
npx swc src/index.ts -o dist/bundle.js --minify

Patrones Comunes

Acelerar Pruebas Jest con @swc/jest

Problema: La transpilación de TypeScript con ts-jest hace que los conjuntos de pruebas se ejecuten muy lentamente.
Solución: Reemplazar ts-jest por @swc/jest.

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

Pipeline de Agrupación y Minificación con SWC

Problema: Necesidad de minificación rápida para scripts de compilación de producción.
Solución: Habilitar opciones de minify dentro de .swcrc.

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

Mejores Prácticas (2026)

• Hacer instalar @swc/helpers y habilitar externalHelpers: true para evitar duplicar stubs de ayuda del transpilador.
• Hacer emparejar SWC con tsc --noEmit en pipelines de CI/CD ya que SWC transpila código sin realizar verificación de tipos.
• Hacer configurar target: "es2022" o más reciente para aprovechar las capacidades nativas de los navegadores modernos.
• Hacer usar @swc/jest o @swc/register para acelerar drásticamente la ejecución de pruebas unitarias.
• No hacer depender de plugins de Babel a menos que sea estrictamente necesario; verificar si existen plugins nativos de SWC (plugins Wasm).
• No hacer confirmar directorios de caché de compilación .swc en repositorios Git.
• No hacer ejecutar la minificación de SWC sin generar mapas de origen para la resolución de problemas en producción.

Solución de Problemas

Error / Síntoma	Causa	Solución
failed to handle: error parsing typescript	Sintaxis de TypeScript (ej. JSX o decoradores) usada sin habilitar banderas en .swcrc	Asegurar que "syntax": "typescript", "tsx": true, y "decorators": true estén presentes en jsc.parser.
Los metadatos de decoradores no se emiten (Reflect.getMetadata devuelve undefined)	transform.legacyDecorator y transform.decoratorMetadata no configurados	Establecer "legacyDecorator": true y "decoratorMetadata": true dentro de jsc.transform.
Cannot find module '@swc/core-darwin-arm64'	Falló la instalación del binario nativo durante npm/yarn install	Ejecutar npm install --force @swc/core para forzar la descarga del binario nativo para la arquitectura objetivo.

Referencias

• Documentación de SWC