# Ofusca una app de Remix

No existe un paquete @afterpack/remix. Remix compila con Vite, así que usa @afterpack/vite o ejecuta la CLI sobre la salida del build.

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

> **Sin paquete específico para Remix**
>
> AfterPack no publica `@afterpack/remix`. Remix v2 y React Router v7 compilan con Vite, así que [el plugin de Vite](https://www.afterpack.dev/es/docs/frameworks/vite) es la integración natural, y [la CLI](https://www.afterpack.dev/es/docs/cli) funciona sobre la salida en cualquier caso. [Frameworks](https://www.afterpack.dev/es/docs/frameworks) tiene la matriz completa.

## Instalación

El propio plugin de Remix se ejecuta dentro de tu `vite.config.ts`, así que `@afterpack/vite` va en el mismo array `plugins`, después de él:

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

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { vitePlugin as remix } from "@remix-run/dev";
import { afterpackVite } from "@afterpack/vite";

export default defineConfig({
  plugins: [remix(), afterpackVite()],
});
```

O prescinde del paquete y ejecuta [la CLI](https://www.afterpack.dev/es/docs/cli) sobre la salida del build.

## Build

El plugin se ejecuta en `generateBundle` y ofusca cada chunk de JavaScript del bundle antes de que Vite lo escriba. Remix compila las partes de cliente y de servidor como builds de Vite separados, así que el plugin se ejecuta una vez por parte, solo sobre el bundle de esa parte. Fija una única [`seed`](https://www.afterpack.dev/es/docs/config#seed) (`seed: "git"` es lo más sencillo) si las dos partes se publican juntas y quieres que se compilen con la misma semilla. [Build y CI](https://www.afterpack.dev/es/docs/builds) explica la contrapartida.

Compilar con la CLI funciona igual: primero compila y después apunta AfterPack a cada directorio de salida. Un build de Remix con Vite suele escribir `build/client` y `build/server`:

```bash
npx afterpack@latest build/client --seed=git
```

Indica el directorio como [argumento de ruta](https://www.afterpack.dev/es/docs/cli#usage): sin él, la CLI elige el más reciente entre `dist/`, `build/`, `out/`, `.output/` y `.next/`, que no es lo que quieres cuando los builds de cliente y servidor se ofuscan por separado. Acepta un directorio que recorrer o un único archivo `.js`/`.mjs`/`.cjs`. Ejecútala una vez por cada directorio que quieras ofuscar, con la misma [`--seed`](https://www.afterpack.dev/es/docs/config#seed) en ambos cuando se publiquen juntos. Las dos vías llaman a la misma pasada compartida, así que todo lo demás (la [escala de presets](https://www.afterpack.dev/es/docs/presets), el [comportamiento de fallo seguro](https://www.afterpack.dev/es/docs/diagnostics#fail-closed-no-exceptions), los [artefactos](https://www.afterpack.dev/es/docs/cli#files)) es idéntico.

## Verificación

El [Protection Map](https://www.afterpack.dev/es/docs/protection-map) se escribe por defecto cuando Vite emite un source map y el build no se ejecuta en CI (`CI=true` o `CI=1`); el [modo de build](https://www.afterpack.dev/es/docs/config#build-mode) no lo desactiva. Vite no emite ningún source map a menos que se configure `build.sourcemap`, así que compila con los source maps activados en el build que quieras inspeccionar y abre `.afterpack/protectionMap.html`, ignorado por git. Contiene todo tu código fuente. Nunca lo subas al repositorio ni lo sirvas.

## Opciones

Cualquier [clave de configuración](https://www.afterpack.dev/es/docs/config) funciona con este plugin igual que en la [página de Vite](https://www.afterpack.dev/es/docs/frameworks/vite#options), incluida la captura de directivas; consulta [Configuración](https://www.afterpack.dev/es/docs/config) para ver todas las claves.

## 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. La CLI no lee ninguna. Consulta [Directivas](https://www.afterpack.dev/es/docs/directives).

## Casos límite

- **Falla de forma segura, sin posibilidad de anularlo.** Un [diagnóstico](https://www.afterpack.dev/es/docs/diagnostics) `error`/`critical`, un resultado vacío o un archivo que el motor no pudo ofuscar [hace fallar el build](https://www.afterpack.dev/es/docs/diagnostics#exit-codes).
- **La salida de servidor es JavaScript sin más.** AfterPack ofusca cualquier `.js` que encuentre en el directorio al que lo apuntes.

## Siguiente

- [Frameworks](https://www.afterpack.dev/es/docs/frameworks): la matriz completa.
- [Vite](https://www.afterpack.dev/es/docs/frameworks/vite): el plugin que recomienda esta página.
- [Referencia de la CLI](https://www.afterpack.dev/es/docs/cli#flags): la lista completa de flags.
- [Configuración](https://www.afterpack.dev/es/docs/config): cada opción y qué superficie puede establecerla.
- [Presets](https://www.afterpack.dev/es/docs/presets): la escala con la que se resuelve `preset`.
- [Build y CI](https://www.afterpack.dev/es/docs/builds): semillas, desarrollo frente a producción, promocionar los mismos bytes.
- [Protection Map](https://www.afterpack.dev/es/docs/protection-map): cómo leer el informe.