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 sobre la salida del build.
Matriz de frameworks
| Framework | Paquete | Cómo se conecta | Dónde se ejecuta | Salida del build |
|---|---|---|---|---|
| Next.js | @afterpack/next | withAfterpack(config) | runAfterProductionCompile, dentro de next build, después de que Next escriba los chunks | .next/static/chunks, out/ |
| Vite | @afterpack/vite | afterpackVite() en plugins | generateBundle, en el pipeline | build.outDir |
| Webpack | @afterpack/webpack | new AfterpackWebpackPlugin() | compilation.hooks.processAssets, en el pipeline | output.path |
| Rollup | @afterpack/rollup | afterpackRollup() en plugins | generateBundle, en el pipeline | output.dir o output.file |
| esbuild | @afterpack/esbuild | afterpackEsbuild() en plugins | onEnd, después de que esbuild escribe | outdir o outfile |
| Astro | @afterpack/astro | afterpack() en integrations | @afterpack/vite dentro de la configuración de Vite de Astro | dist/ |
| Svelte | @afterpack/svelte | afterpackSvelte() en plugins | @afterpack/vite | dist/ |
| SvelteKit | @afterpack/sveltekit | afterpackSveltekit() después de sveltekit() | @afterpack/vite | salida del adaptador (build/) |
| Vue 3 | @afterpack/vue | afterpackVue() después de vue() | @afterpack/vite | dist/ |
| Nuxt 3 | @afterpack/nuxt | modules: ["@afterpack/nuxt"] | @afterpack/vite sobre la configuración de Vite de Nuxt | .output/public/_nuxt/ |
| Angular v17+ | @afterpack/angular | afterpackAngular() en un script postbuild | una pasada postbuild, después de que ng build escribe | dist/<app>/browser |
| 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 | @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 | Se basa en Vite: usa @afterpack/vite o la CLI. |
| JS sin framework | 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. Además de esos, todos los plugins y la CLI comparten este comportamiento:
- Todo build es de producción salvo que diga que es de desarrollo.
build.mode=developmentoNODE_ENV=developmentproducen un build de desarrollo, y Parcel sigue su propio modo. Un build de producción no escribe ningún source map y elimina los mapas que escribió tu bundler, incluidos los de CSS. Un mapa publicado revierte la ofuscación. - Los mismos artefactos. Un único
protectionMap.htmlcombinado (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.mapjunto a cada archivo cuando los mapas están activados..afterpack/lleva su propio.gitignore; el tuyo nunca se edita.build.backuptiene 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é.
- Un solo interruptor para omitir una ejecución.
build.autorun: falsemantiene 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 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.
Siguiente
- Inicio rápido: elige un stack y compila.
- Builds y CI: semillas, desarrollo frente a producción, promocionar los mismos bytes.
- Configuración: cada opción y dónde establecerla.