# Ofusca un sitio de Astro

@afterpack/astro es una integración ligera que conecta @afterpack/vite con el propio pipeline de Vite de Astro.

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

Astro compila cada isla y cada bundle de cliente a través de su propio pipeline de Vite, y AfterPack se integra a nivel del **bundler**. `@afterpack/astro` existe para que no tengas que conectar tú a mano `vite: { plugins: [...] }`.

Todo ocurre en el `generateBundle` de [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite), dentro del propio pipeline de Vite de Astro.

## Instalación

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

```js
// astro.config.mjs
import { defineConfig } from "astro/config";
import afterpack from "@afterpack/astro";

export default defineConfig({
  integrations: [afterpack()],
});
```

La exportación por defecto y la exportación con nombre `afterpackAstro` son la misma función.

## Build

`astro build` emite ahora salida ofuscada. `astro dev` no se toca, porque el plugin solo se ejecuta en el `generateBundle` del build, el hook que usa siempre [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite). Astro escribe los chunks ofuscados; los originales nunca llegan a `dist/`.

La superficie ofuscada es el JavaScript que emite Astro: los bundles de islas y los scripts de cliente, normalmente bajo `dist/_astro/`. La lógica de plantillas `.astro` renderizada en el servidor que nunca se convierte en JS de cliente queda fuera del alcance.

## Verificación

El [Protection Map](https://www.afterpack.dev/es/docs/protection-map) se escribe por defecto solo cuando Vite emite un source map (`vite.build.sourcemap`) y el build no se ejecuta en CI (`CI=true` o `CI=1`); el [modo de build de producción](https://www.afterpack.dev/es/docs/config#build-mode) no lo desactiva. Pídelo de forma explícita cuando quieras inspeccionar uno:

```js
integrations: [afterpack({ protectionMap: { enabled: true } })],
```

Se escribe en `.afterpack/protectionMap.html`, ignorado por git. El efecto secundario sobre los source maps y las reglas para manejarlos 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

Cualquier [clave de configuración](https://www.afterpack.dev/es/docs/config) se puede pasar aquí en el objeto de opciones, que se reenvía tal cual a [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite#options), por ejemplo `afterpack({ preset: "hard", complexity: 40 })`. El alias de tipo `AfterpackAstroOptions` es `AfterpackViteOptions`:

```js
integrations: [afterpack({ 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`.

El plugin lee las directivas de tu código fuente, antes de la minificación. [Solo comentarios de bloque](https://www.afterpack.dev/es/docs/directives#writing-one):

Las directivas dentro de los propios archivos de componente `.astro` no se capturan. Pon la directiva en el archivo `.jsx`/`.tsx` de la isla:

```jsx
/* @afterpack preset=hard */
export function LicenseGate({ token }) {
  // ...
}
/* @afterpack end */
```

## 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.
- [Protection Map](https://www.afterpack.dev/es/docs/protection-map): cómo leer el informe.
- [Directivas](https://www.afterpack.dev/es/docs/directives): la gramática completa de los marcadores.
- [Build y CI](https://www.afterpack.dev/es/docs/builds): semillas, desarrollo frente a producción, promocionar los mismos bytes.