# आपके framework के लिए JavaScript obfuscation

आपके stack के लिए कौन-सा package install करें, वह कहाँ hook होता है, और क्या लिखता है।

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

AfterPack आपके bundler द्वारा बनाए गए JavaScript को obfuscate करता है। अपने stack के लिए package install करें और आपका सामान्य build obfuscated output देना शुरू कर देता है। बाकी हर स्थिति के लिए, build output पर [`npx afterpack@latest`](https://www.afterpack.dev/hi/docs/cli) चलाएँ।

## Framework तालिका

| Framework | Package | कैसे wire करें | कहाँ चलता है | Build output |
|---|---|---|---|---|
| [Next.js](https://www.afterpack.dev/hi/docs/frameworks/nextjs) | `@afterpack/next` | `withAfterpack(config)` | `runAfterProductionCompile`, `next build` के अंदर, Next के chunks लिखने के बाद | `.next/static/chunks`, `out/` |
| [Vite](https://www.afterpack.dev/hi/docs/frameworks/vite) | `@afterpack/vite` | `plugins` में `afterpackVite()` | `generateBundle`, pipeline में | `build.outDir` |
| [Webpack](https://www.afterpack.dev/hi/docs/frameworks/webpack) | `@afterpack/webpack` | `new AfterpackWebpackPlugin()` | `compilation.hooks.processAssets`, pipeline में | `output.path` |
| [Rollup](https://www.afterpack.dev/hi/docs/frameworks/rollup) | `@afterpack/rollup` | `plugins` में `afterpackRollup()` | `generateBundle`, pipeline में | `output.dir` या `output.file` |
| [esbuild](https://www.afterpack.dev/hi/docs/frameworks/esbuild) | `@afterpack/esbuild` | `plugins` में `afterpackEsbuild()` | `onEnd`, esbuild के लिखने के बाद | `outdir` या `outfile` |
| [Astro](https://www.afterpack.dev/hi/docs/frameworks/astro) | `@afterpack/astro` | `integrations` में `afterpack()` | Astro की Vite config के अंदर `@afterpack/vite` | `dist/` |
| [Svelte](https://www.afterpack.dev/hi/docs/frameworks/svelte) | `@afterpack/svelte` | `plugins` में `afterpackSvelte()` | `@afterpack/vite` | `dist/` |
| [SvelteKit](https://www.afterpack.dev/hi/docs/frameworks/sveltekit) | `@afterpack/sveltekit` | `sveltekit()` के बाद `afterpackSveltekit()` | `@afterpack/vite` | adapter का output (`build/`) |
| [Vue 3](https://www.afterpack.dev/hi/docs/frameworks/vue) | `@afterpack/vue` | `vue()` के बाद `afterpackVue()` | `@afterpack/vite` | `dist/` |
| [Nuxt 3](https://www.afterpack.dev/hi/docs/frameworks/nuxt) | `@afterpack/nuxt` | `modules: ["@afterpack/nuxt"]` | Nuxt की Vite config पर `@afterpack/vite` | `.output/public/_nuxt/` |
| [Angular v17+](https://www.afterpack.dev/hi/docs/frameworks/angular) | `@afterpack/angular` | postbuild script में `afterpackAngular()` | एक postbuild pass, `ng build` के लिखने के बाद | `dist/<app>/browser` |
| [Electron](https://www.afterpack.dev/hi/docs/frameworks/electron) | `@afterpack/electron` | `electron-vite` के चारों ओर `withAfterpack(config)` | तीनों legs पर `@afterpack/vite`, एक seed | हर leg का `out/` |
| [Parcel](https://www.afterpack.dev/hi/docs/frameworks/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](https://www.afterpack.dev/hi/docs/frameworks/remix) | Vite पर बना है: `@afterpack/vite` या CLI इस्तेमाल करें। |
| [सादा JS](https://www.afterpack.dev/hi/docs/frameworks/plain) | hook करने के लिए कोई bundler नहीं: `npx afterpack@latest <dir>`। |

## हर integration क्या करता है

Defaults [Quickstart](https://www.afterpack.dev/hi/docs/quickstart#what-a-build-does-by-default) पर दिए हैं। उनके अलावा, हर plugin और CLI का यह व्यवहार साझा है:

- **हर build [production](https://www.afterpack.dev/hi/docs/config#build-mode) है, जब तक वह ख़ुद को development न बताए।** `build.mode=development` या `NODE_ENV=development` development build बनाता है, और Parcel अपने ख़ुद के mode पर चलता है। Production build कोई [source map](https://www.afterpack.dev/hi/docs/config#sourceMap-enabled) नहीं लिखता और आपके bundler के लिखे maps हटा देता है, CSS maps समेत। Ship किया गया map obfuscation को उलट देता है।
- **वही [artifacts](https://www.afterpack.dev/hi/docs/cli#files)।** map चालू होने पर (डिफ़ॉल्ट रूप से केवल तब, जब build ने source map बनाया हो और वह CI में न चल रही हो) gitignored `.afterpack/` में एक संयुक्त [`protectionMap.html`](https://www.afterpack.dev/hi/docs/config#protectionMap-enabled) (Parcel पर हर bundle के लिए एक), और maps चालू होने पर हर फ़ाइल के बगल में एक `.map`। `.afterpack/` की अपनी `.gitignore` होती है; आपकी `.gitignore` में कभी बदलाव नहीं किया जाता। [`build.backup`](https://www.afterpack.dev/hi/docs/config#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](https://www.afterpack.dev/hi/docs/builds#file-names-and-caching)।
- **Run छोड़ने के लिए एक switch।** [`build.autorun: false`](https://www.afterpack.dev/hi/docs/config#build-autorun) plugin को install रखता है और engine को छोड़ देता है।
- **Directives आपके source से plugin पढ़ता है**, हर उस integration पर जिसके पास उन्हें पढ़ने का hook है। [Angular](https://www.afterpack.dev/hi/docs/frameworks/angular) इस key को सीधे अस्वीकार कर देता है: उसका builder sealed है, इसलिए pass को केवल पहले से minified output ही दिखता है। CLI भी इसी वजह से इसे अस्वीकार करता है। Directives एक [Pro](https://www.afterpack.dev/hi/docs/pro) feature हैं।

## आगे

- [Quickstart](https://www.afterpack.dev/hi/docs/quickstart): एक stack चुनें और build करें।
- [Builds और CI](https://www.afterpack.dev/hi/docs/builds): seeds, dev बनाम production, वही bytes promote करना।
- [Configuration](https://www.afterpack.dev/hi/docs/config): हर option और उसे कहाँ सेट करें।