AfterPack आपके bundler द्वारा बनाए गए JavaScript को obfuscate करता है। अपने stack के लिए package install करें और आपका सामान्य build obfuscated output देना शुरू कर देता है। बाकी हर स्थिति के लिए, build output पर npx afterpack@latest चलाएँ।
Framework तालिका
| Framework | Package | कैसे wire करें | कहाँ चलता है | Build output |
|---|---|---|---|---|
| Next.js | @afterpack/next | withAfterpack(config) | runAfterProductionCompile, next build के अंदर, Next के chunks लिखने के बाद | .next/static/chunks, out/ |
| Vite | @afterpack/vite | plugins में afterpackVite() | generateBundle, pipeline में | build.outDir |
| Webpack | @afterpack/webpack | new AfterpackWebpackPlugin() | compilation.hooks.processAssets, pipeline में | output.path |
| Rollup | @afterpack/rollup | plugins में afterpackRollup() | generateBundle, pipeline में | output.dir या output.file |
| esbuild | @afterpack/esbuild | plugins में afterpackEsbuild() | onEnd, esbuild के लिखने के बाद | outdir या outfile |
| Astro | @afterpack/astro | integrations में afterpack() | Astro की Vite config के अंदर @afterpack/vite | dist/ |
| Svelte | @afterpack/svelte | plugins में afterpackSvelte() | @afterpack/vite | dist/ |
| SvelteKit | @afterpack/sveltekit | sveltekit() के बाद afterpackSveltekit() | @afterpack/vite | adapter का output (build/) |
| Vue 3 | @afterpack/vue | vue() के बाद afterpackVue() | @afterpack/vite | dist/ |
| Nuxt 3 | @afterpack/nuxt | modules: ["@afterpack/nuxt"] | Nuxt की Vite config पर @afterpack/vite | .output/public/_nuxt/ |
| Angular v17+ | @afterpack/angular | postbuild script में afterpackAngular() | एक postbuild pass, ng build के लिखने के बाद | dist/<app>/browser |
| Electron | @afterpack/electron | electron-vite के चारों ओर withAfterpack(config) | तीनों legs पर @afterpack/vite, एक seed | हर leg का out/ |
| Parcel | @afterpack/parcel-optimizer | .parcelrc की optimizers में एक entry | एक Parcel 2 Optimizer, हर bundle पर, pipeline में | Parcel का distDir |
Astro, Svelte, SvelteKit, Vue, Nuxt और Angular @afterpack/vite install करते हैं, या वही shared pass चलाते हैं, इसलिए आपको इसे हाथ से wire नहीं करना पड़ता।
बिना plugin
| Stack | रास्ता |
|---|---|
| Remix / React Router v7 | Vite पर बना है: @afterpack/vite या CLI इस्तेमाल करें। |
| सादा JS | hook करने के लिए कोई bundler नहीं: npx afterpack@latest <dir>। |
हर integration क्या करता है
Defaults Quickstart पर दिए हैं। उनके अलावा, हर plugin और CLI का यह व्यवहार साझा है:
- हर build production है, जब तक वह ख़ुद को development न बताए।
build.mode=developmentयाNODE_ENV=developmentdevelopment build बनाता है, और Parcel अपने ख़ुद के mode पर चलता है। Production build कोई source map नहीं लिखता और आपके bundler के लिखे maps हटा देता है, CSS maps समेत। Ship किया गया map obfuscation को उलट देता है। - वही artifacts। map चालू होने पर (डिफ़ॉल्ट रूप से केवल तब, जब build ने source map बनाया हो और वह CI में न चल रही हो) gitignored
.afterpack/में एक संयुक्तprotectionMap.html(Parcel पर हर bundle के लिए एक), और maps चालू होने पर हर फ़ाइल के बगल में एक.map।.afterpack/की अपनी.gitignoreहोती है; आपकी.gitignoreमें कभी बदलाव नहीं किया जाता।build.backupके दो रूप हैं: CLI हर run पर आपकी मूल फ़ाइलों की प्रतिलिपि.afterpack/backups/में रखता है, और जो plugin disk पर फ़ाइलें obfuscate करता है (@afterpack/next,@afterpack/esbuild,@afterpack/angular) वह आपके माँगने पर output के बगल में एक.backup.<hash>फ़ाइल लिखता है। In-pipeline plugins के पास कोई emitted फ़ाइल नहीं होती जिसके बगल में backup रखा जा सके, और माँगने पर वे चेतावनी देते हैं। - Content-hashed नाम obfuscated bytes के साथ चलते हैं। हर plugin obfuscated फ़ाइल का नाम उसके content के साथ seed, engine version और आपकी settings से बनाता है, इसलिए एक नाम कभी दो अलग फ़ाइलें serve नहीं करता। CLI भी Next.js, Angular, Vite और webpack builds पर ऐसा ही करता है, और बाकी किसी भी output पर वही नाम रखता है जो आपके bundler ने लिखे। देखें File names और caching।
- Run छोड़ने के लिए एक switch।
build.autorun: falseplugin को install रखता है और engine को छोड़ देता है। - Directives आपके source से plugin पढ़ता है, हर उस integration पर जिसके पास उन्हें पढ़ने का hook है। Angular इस key को सीधे अस्वीकार कर देता है: उसका builder sealed है, इसलिए pass को केवल पहले से minified output ही दिखता है। CLI भी इसी वजह से इसे अस्वीकार करता है। Directives एक Pro feature हैं।
आगे
- Quickstart: एक stack चुनें और build करें।
- Builds और CI: seeds, dev बनाम production, वही bytes promote करना।
- Configuration: हर option और उसे कहाँ सेट करें।