AfterPack
Ver como Markdown

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.

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 es la integración natural, y la CLI funciona sobre la salida en cualquier caso. 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:

$ npm install -D @afterpack/vite
// 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 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 (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 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:

$ npx afterpack@latest build/client --seed=git

Indica el directorio como argumento de ruta: 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 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, el comportamiento de fallo seguro, los artefactos) es idéntico.

Verificación

El 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 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 funciona con este plugin igual que en la página de Vite, incluida la captura de directivas; consulta Configuración para ver todas las claves.

Directivas

El plugin lee las directivas de tu código fuente. La CLI las lee cuando su entrada lleva un source map. Consulta Directivas.

Casos límite

  • Falla de forma segura, sin posibilidad de anularlo. Un diagnóstico error/critical, un resultado vacío o un archivo que el motor no pudo ofuscar hace fallar el build.
  • La salida de servidor es JavaScript sin más. AfterPack ofusca cualquier .js que encuentre en el directorio al que lo apuntes.

Siguiente