# Ofusca una aplicación SvelteKit

@afterpack/sveltekit: una línea de plugin después de sveltekit() en vite.config.ts.

Source: https://www.afterpack.dev/es/docs/frameworks/sveltekit

SvelteKit compila con [Vite](https://www.afterpack.dev/es/docs/frameworks/vite), y AfterPack se integra a nivel de **[bundler](https://www.afterpack.dev/es/docs/frameworks)**, así que `@afterpack/sveltekit` es un envoltorio fino: `afterpackSveltekit(options)` *es* [`afterpackVite(options)`](https://www.afterpack.dev/es/docs/frameworks/vite), con un nombre pensado para encontrarlo fácilmente en un proyecto Kit.

## Instalación

```bash
npm install -D @afterpack/sveltekit
```

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { afterpackSveltekit } from "@afterpack/sveltekit";

export default defineConfig({
  plugins: [sveltekit(), afterpackSveltekit()],
});
```

Colócalo **después** de `sveltekit()`. La exportación con nombre es `afterpackSveltekit`; el paquete también reexporta `afterpackVite` y el tipo `AfterpackViteOptions`.

## Build

`vite build` ahora emite salida ofuscada. `vite dev` no se toca, porque el plugin solo se ejecuta en el `generateBundle` del build, antes de que Vite escriba el bundle.

Se ofusca todo el JavaScript que emita tu adaptador. Kit ejecuta Vite una vez para el cliente y otra para el servidor, y el plugin ofusca cada bundle a medida que se produce, así que quedan cubiertos tanto el bundle de cliente prerrenderizado de `adapter-static` como un bundle de servidor Node o serverless. Con `adapter-static` y `adapter-node` el adaptador escribe en `build/`; otros adaptadores escriben en otro sitio.

Fija una [`seed`](https://www.afterpack.dev/es/docs/config#seed) cuando la salida del cliente y la del servidor se publiquen como una sola versión y quieras que ambas partes se compilen con la misma semilla. `seed: "git"` es la forma más sencilla de garantizarlo. [Builds y CI](https://www.afterpack.dev/es/docs/builds) explica cuándo compensa fijarla y cuándo una semilla nueva en cada build es la opción más fuerte.

## Verificación

```ts
afterpackSveltekit({ protectionMap: { enabled: true } });
```

Escribe el [Protection Map](https://www.afterpack.dev/es/docs/protection-map) combinado en `.afterpack/protectionMap.html`, ignorado por git. El efecto secundario sobre los source maps y las reglas de manejo son los de [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite#verify).

*(live Protection Map demo embed — see https://www.afterpack.dev/protection-map-demo)*

Para comprobar un despliegue con `adapter-static` o `adapter-node`, ejecuta `npx afterpack@latest verify build` antes de subirlo. El adapter copia la salida de cliente protegida de `.svelte-kit/output/client` a `build/`, y [`verify`](https://www.afterpack.dev/es/docs/cli#afterpack-verify-dir) comprueba la copia contra el recibo de protección de esa salida y nombra cualquier archivo que haya cambiado.

## Opciones

Cualquier [clave de configuración](https://www.afterpack.dev/es/docs/config) puede pasarse aquí en el objeto de opciones, que se reenvía tal cual a [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite#options). El alias de tipo `AfterpackSveltekitOptions` es `AfterpackViteOptions`.

```ts
afterpackSveltekit({ seed: "git", preset: "medium" });
```

## Directivas

Las directivas son una función [Pro](https://www.afterpack.dev/es/docs/pro). En un [build Free](https://www.afterpack.dev/es/docs/directives#free-builds), una directiva que aumenta la protección detiene el build con `DIAG_PRO_DIRECTIVE_REQUIRES_KEY`.

Un marcador `/* @afterpack … */` dentro de un archivo `.svelte` no se captura. Pon la directiva en un módulo `.ts`/`.js` normal que importe la ruta. `src/lib/` es su lugar natural:

```ts
// src/lib/license.ts
/* @afterpack preset=hard */
export function verify(token: string) {
  // ...
}
/* @afterpack end */
```

Cada chunk emitido se ofusca de todos modos; solo la directiva necesita el módulo normal.

## Siguiente

- [Frameworks](https://www.afterpack.dev/es/docs/frameworks): la matriz completa.
- [Vite](https://www.afterpack.dev/es/docs/frameworks/vite): el plugin que hace el trabajo real.
- [Svelte](https://www.afterpack.dev/es/docs/frameworks/svelte): aplicaciones Svelte sin Kit.
- [Protection Map](https://www.afterpack.dev/es/docs/protection-map): cómo leer el informe.
- [Builds y CI](https://www.afterpack.dev/es/docs/builds): semillas, desarrollo frente a producción, promocionar los mismos bytes.