# Ofusca una app de Svelte

@afterpack/svelte envuelve @afterpack/vite para proyectos Svelte: una línea de plugin en vite.config.ts.

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

Las apps de Svelte se compilan a JavaScript mediante [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/svelte` es un envoltorio fino: `afterpackSvelte(options)` *es* [`afterpackVite(options)`](https://www.afterpack.dev/es/docs/frameworks/vite), con un nombre pensado para encontrarlo fácilmente en un proyecto Svelte.

¿Compilas una app completa de SvelteKit? Usa [`@afterpack/sveltekit`](https://www.afterpack.dev/es/docs/frameworks/sveltekit). ¿Compilas una librería de componentes Svelte con Rollup? Usa [`@afterpack/rollup`](https://www.afterpack.dev/es/docs/frameworks/rollup).

## Instalación

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

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { afterpackSvelte } from "@afterpack/svelte";

export default defineConfig({
  plugins: [svelte(), afterpackSvelte()],
});
```

Colócalo **después** de `svelte()`. La exportación con nombre es `afterpackSvelte`; 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.

## Verificación

```ts
afterpackSvelte({ 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)*

## Opciones

Cada [clave de configuración](https://www.afterpack.dev/es/docs/config) se puede pasar aquí como 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 `AfterpackSvelteOptions` es `AfterpackViteOptions`.

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

## Directivas

Un marcador `/* @afterpack … */` dentro de un archivo `.svelte` no se captura. Pon las directivas en un módulo `.ts`/`.js` normal que el componente importe:

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

Cada chunk emitido se ofusca en cualquier caso; 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.
- [SvelteKit](https://www.afterpack.dev/es/docs/frameworks/sveltekit): el paquete envoltorio para 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.