# Ofuscación de JavaScript para tu framework

Qué paquete instalar para tu stack, dónde se engancha y qué escribe.

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

AfterPack ofusca el JavaScript que produjo tu bundler. Instala el paquete de tu stack y tu build habitual emitirá salida ofuscada. Para cualquier otro caso, ejecuta [`npx afterpack@latest`](https://www.afterpack.dev/es/docs/cli) sobre la salida del build.

## Matriz de frameworks

| Framework | Paquete | Cómo se conecta | Dónde se ejecuta | Salida del build |
|---|---|---|---|---|
| [Next.js](https://www.afterpack.dev/es/docs/frameworks/nextjs) | `@afterpack/next` | `withAfterpack(config)` | `runAfterProductionCompile`, dentro de `next build`, después de que Next escriba los chunks | `.next/static/chunks`, `out/` |
| [Vite](https://www.afterpack.dev/es/docs/frameworks/vite) | `@afterpack/vite` | `afterpackVite()` en `plugins` | `generateBundle`, en el pipeline | `build.outDir` |
| [Webpack](https://www.afterpack.dev/es/docs/frameworks/webpack) | `@afterpack/webpack` | `new AfterpackWebpackPlugin()` | `compilation.hooks.processAssets`, en el pipeline | `output.path` |
| [Rollup](https://www.afterpack.dev/es/docs/frameworks/rollup) | `@afterpack/rollup` | `afterpackRollup()` en `plugins` | `generateBundle`, en el pipeline | `output.dir` o `output.file` |
| [esbuild](https://www.afterpack.dev/es/docs/frameworks/esbuild) | `@afterpack/esbuild` | `afterpackEsbuild()` en `plugins` | `onEnd`, después de que esbuild escribe | `outdir` o `outfile` |
| [Astro](https://www.afterpack.dev/es/docs/frameworks/astro) | `@afterpack/astro` | `afterpack()` en `integrations` | `@afterpack/vite` dentro de la configuración de Vite de Astro | `dist/` |
| [Svelte](https://www.afterpack.dev/es/docs/frameworks/svelte) | `@afterpack/svelte` | `afterpackSvelte()` en `plugins` | `@afterpack/vite` | `dist/` |
| [SvelteKit](https://www.afterpack.dev/es/docs/frameworks/sveltekit) | `@afterpack/sveltekit` | `afterpackSveltekit()` después de `sveltekit()` | `@afterpack/vite` | salida del adaptador (`build/`) |
| [Vue 3](https://www.afterpack.dev/es/docs/frameworks/vue) | `@afterpack/vue` | `afterpackVue()` después de `vue()` | `@afterpack/vite` | `dist/` |
| [Nuxt 3](https://www.afterpack.dev/es/docs/frameworks/nuxt) | `@afterpack/nuxt` | `modules: ["@afterpack/nuxt"]` | `@afterpack/vite` sobre la configuración de Vite de Nuxt | `.output/public/_nuxt/` |
| [Angular v17+](https://www.afterpack.dev/es/docs/frameworks/angular) | `@afterpack/angular` | `afterpackAngular()` en un script postbuild | una pasada postbuild, después de que `ng build` escribe | `dist/<app>/browser` |
| [Electron](https://www.afterpack.dev/es/docs/frameworks/electron) | `@afterpack/electron` | `withAfterpack(config)` alrededor de `electron-vite` | `@afterpack/vite` en las tres partes, con una sola semilla | el `out/` de cada parte |
| [Parcel](https://www.afterpack.dev/es/docs/frameworks/parcel) | `@afterpack/parcel-optimizer` | una entrada en `optimizers` de `.parcelrc` | un Optimizer de Parcel 2, por bundle, en el pipeline | el `distDir` de Parcel |

Astro, Svelte, SvelteKit, Vue, Nuxt y Angular instalan `@afterpack/vite`, o ejecutan la misma pasada compartida, así que no tienes que conectarlo a mano.

## Sin plugin

| Stack | Ruta |
|---|---|
| [Remix / React Router v7](https://www.afterpack.dev/es/docs/frameworks/remix) | Se basa en Vite: usa `@afterpack/vite` o la CLI. |
| [JS sin framework](https://www.afterpack.dev/es/docs/frameworks/plain) | No hay bundler en el que engancharse: `npx afterpack@latest <dir>`. |

## Qué hace cada integración

Los valores por defecto están en el [Inicio rápido](https://www.afterpack.dev/es/docs/quickstart#what-a-build-does-by-default). Además de esos, todos los plugins y la CLI comparten este comportamiento:

- **Todo build es de [producción](https://www.afterpack.dev/es/docs/config#build-mode) salvo que diga que es de desarrollo.** `build.mode=development` o `NODE_ENV=development` producen un build de desarrollo, y Parcel sigue su propio modo. Un build de producción no escribe ningún [source map](https://www.afterpack.dev/es/docs/config#sourceMap-enabled) y elimina los mapas que escribió tu bundler, incluidos los de CSS. Un mapa publicado revierte la ofuscación.
- **Los mismos [artefactos](https://www.afterpack.dev/es/docs/cli#files).** Un único [`protectionMap.html`](https://www.afterpack.dev/es/docs/config#protectionMap-enabled) combinado (uno por bundle en Parcel) en `.afterpack/`, ignorado por git, cuando el mapa está activado (por defecto, solo si el build emitió un source map y no se ejecuta en CI), y un `.map` junto a cada archivo cuando los mapas están activados. `.afterpack/` lleva su propio `.gitignore`; el tuyo nunca se edita. [`build.backup`](https://www.afterpack.dev/es/docs/config#build-backup) tiene dos formas: la CLI replica tus originales en `.afterpack/backups/` en cada ejecución, y un plugin que ofusca archivos en disco (`@afterpack/next`, `@afterpack/esbuild`, `@afterpack/angular`) escribe un `.backup.<hash>` al lado de la salida cuando lo pides. Los plugins que actúan dentro del pipeline no tienen ningún archivo emitido junto al que dejar una copia de seguridad, y avisan cuando la pides.
- **Los nombres con hash de contenido siguen a los bytes ofuscados.** Cada plugin nombra un archivo ofuscado a partir de su contenido más la semilla, la versión del motor y tu configuración, así que un mismo nombre nunca sirve dos archivos distintos. La CLI hace lo mismo en los builds de Next.js, Angular, Vite y webpack, y en cualquier otra salida mantiene los nombres que escribió tu bundler. Consulta [Nombres de archivo y caché](https://www.afterpack.dev/es/docs/builds#file-names-and-caching).
- **Un solo interruptor para omitir una ejecución.** [`build.autorun: false`](https://www.afterpack.dev/es/docs/config#build-autorun) mantiene el plugin instalado y omite el motor.
- **El plugin lee las directivas de tu código fuente**, en todas las integraciones que tienen un hook
  desde el que leerlas. [Angular](https://www.afterpack.dev/es/docs/frameworks/angular) rechaza la clave directamente: su builder está
  sellado, así que la pasada solo ve salida ya minificada. La CLI la rechaza por la misma razón. Las directivas son una función [Pro](https://www.afterpack.dev/es/docs/pro).

## Siguiente

- [Inicio rápido](https://www.afterpack.dev/es/docs/quickstart): elige un stack y compila.
- [Builds y CI](https://www.afterpack.dev/es/docs/builds): semillas, desarrollo frente a producción, promocionar los mismos bytes.
- [Configuración](https://www.afterpack.dev/es/docs/config): cada opción y dónde establecerla.