# Обфускація JavaScript для вашого фреймворку

Який пакет встановити для вашого стеку, куди він підключається і що записує.

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

AfterPack обфускує JavaScript, який видав ваш бандлер. Встановіть пакет для свого стеку, і ваша звичайна збірка видаватиме обфускований результат. Для всього іншого запустіть [`npx afterpack@latest`](https://www.afterpack.dev/uk/docs/cli) на результаті збірки.

## Таблиця фреймворків

| Фреймворк | Пакет | Як підключити | Де працює | Результат збірки |
|---|---|---|---|---|
| [Next.js](https://www.afterpack.dev/uk/docs/frameworks/nextjs) | `@afterpack/next` | `withAfterpack(config)` | `runAfterProductionCompile`, усередині `next build`, після того як Next запише чанки | `.next/static/chunks`, `out/` |
| [Vite](https://www.afterpack.dev/uk/docs/frameworks/vite) | `@afterpack/vite` | `afterpackVite()` у `plugins` | `generateBundle`, у конвеєрі | `build.outDir` |
| [Webpack](https://www.afterpack.dev/uk/docs/frameworks/webpack) | `@afterpack/webpack` | `new AfterpackWebpackPlugin()` | `compilation.hooks.processAssets`, у конвеєрі | `output.path` |
| [Rollup](https://www.afterpack.dev/uk/docs/frameworks/rollup) | `@afterpack/rollup` | `afterpackRollup()` у `plugins` | `generateBundle`, у конвеєрі | `output.dir` або `output.file` |
| [esbuild](https://www.afterpack.dev/uk/docs/frameworks/esbuild) | `@afterpack/esbuild` | `afterpackEsbuild()` у `plugins` | `onEnd`, після того як esbuild запише файли | `outdir` або `outfile` |
| [Astro](https://www.afterpack.dev/uk/docs/frameworks/astro) | `@afterpack/astro` | `afterpack()` в `integrations` | `@afterpack/vite` у конфігурації Vite від Astro | `dist/` |
| [Svelte](https://www.afterpack.dev/uk/docs/frameworks/svelte) | `@afterpack/svelte` | `afterpackSvelte()` у `plugins` | `@afterpack/vite` | `dist/` |
| [SvelteKit](https://www.afterpack.dev/uk/docs/frameworks/sveltekit) | `@afterpack/sveltekit` | `afterpackSveltekit()` після `sveltekit()` | `@afterpack/vite` | результат адаптера (`build/`) |
| [Vue 3](https://www.afterpack.dev/uk/docs/frameworks/vue) | `@afterpack/vue` | `afterpackVue()` після `vue()` | `@afterpack/vite` | `dist/` |
| [Nuxt 3](https://www.afterpack.dev/uk/docs/frameworks/nuxt) | `@afterpack/nuxt` | `modules: ["@afterpack/nuxt"]` | `@afterpack/vite` у конфігурації Vite від Nuxt | `.output/public/_nuxt/` |
| [Angular v17+](https://www.afterpack.dev/uk/docs/frameworks/angular) | `@afterpack/angular` | `afterpackAngular()` у postbuild-скрипті | окремий прохід після збірки, після того як `ng build` запише файли | `dist/<app>/browser` |
| [Electron](https://www.afterpack.dev/uk/docs/frameworks/electron) | `@afterpack/electron` | `withAfterpack(config)` навколо `electron-vite` | `@afterpack/vite` на всіх трьох частинах, один сід | `out/` кожної частини |
| [Parcel](https://www.afterpack.dev/uk/docs/frameworks/parcel) | `@afterpack/parcel-optimizer` | запис в `optimizers` у `.parcelrc` | Optimizer Parcel 2, для кожного бандла, у конвеєрі | `distDir` Parcel |

Astro, Svelte, SvelteKit, Vue, Nuxt і Angular встановлюють `@afterpack/vite` або запускають той самий спільний прохід, тож підключати його вручну не потрібно.

## Без плагіна

| Стек | Шлях |
|---|---|
| [Remix / React Router v7](https://www.afterpack.dev/uk/docs/frameworks/remix) | Збирається на Vite: використовуйте `@afterpack/vite` або CLI. |
| [Звичайний JS](https://www.afterpack.dev/uk/docs/frameworks/plain) | Немає бандлера, до якого можна підключитися: `npx afterpack@latest <dir>`. |

## Що робить кожна інтеграція

Поведінка за замовчуванням описана у [Швидкому старті](https://www.afterpack.dev/uk/docs/quickstart#what-a-build-does-by-default). Крім неї, кожен плагін і CLI мають спільну поведінку:

- **Кожна збірка є [продакшн-збіркою](https://www.afterpack.dev/uk/docs/config#build-mode), якщо вона не позначена як збірка для розробки.** Збірку для розробки дає `build.mode=development` або `NODE_ENV=development`, а Parcel дотримується власного режиму. Продакшн-збірка не записує [source map](https://www.afterpack.dev/uk/docs/config#sourceMap-enabled) і видаляє карти, які записав ваш бандлер, зокрема CSS-карти. Опублікована карта зводить обфускацію нанівець.
- **Ті самі [артефакти](https://www.afterpack.dev/uk/docs/cli#files).** Одна об'єднана [`protectionMap.html`](https://www.afterpack.dev/uk/docs/config#protectionMap-enabled) (на Parcel — по одній на бандл) у внесеному до gitignore `.afterpack/`, коли мапу увімкнено (за замовчуванням лише тоді, коли збірка видала source map і не працює в CI), і `.map` поруч із кожним файлом, коли карти увімкнено. `.afterpack/` має власний `.gitignore`; ваш ніколи не редагується. [`build.backup`](https://www.afterpack.dev/uk/docs/config#build-backup) має дві форми: CLI на кожному запуску віддзеркалює ваші оригінали в `.afterpack/backups/`, а плагін, який обфускує файли на диску (`@afterpack/next`, `@afterpack/esbuild`, `@afterpack/angular`), на ваш запит записує сусідній файл `.backup.<hash>` поруч із результатом. Плагіни, що працюють у конвеєрі, не мають записаного файлу, поруч із яким могла б лежати резервна копія, і попереджають, якщо ви її запитуєте.
- **Імена з хешем вмісту слідують за обфускованими байтами.** Кожен плагін називає обфускований файл за його вмістом, а також за сідом, версією рушія й вашими налаштуваннями, тож одне ім'я ніколи не відповідає двом різним файлам. CLI робить так само на збірках Next.js, Angular, Vite і webpack, а на будь-якому іншому результаті зберігає імена, які записав ваш бандлер. Див. [Імена файлів і кешування](https://www.afterpack.dev/uk/docs/builds#file-names-and-caching).
- **Один перемикач, щоб пропустити запуск.** [`build.autorun: false`](https://www.afterpack.dev/uk/docs/config#build-autorun) залишає плагін встановленим і пропускає рушій.
- **Директиви зчитуються плагіном із вашого вихідного коду** — у кожній інтеграції, яка має хук,
  звідки їх можна зчитати. [Angular](https://www.afterpack.dev/uk/docs/frameworks/angular) відхиляє цей ключ повністю: його збирач
  закритий, тож прохід бачить лише вже мініфікований результат. CLI відхиляє цей ключ з тієї самої причини. Директиви — це функція [Pro](https://www.afterpack.dev/uk/docs/pro).

## Далі

- [Швидкий старт](https://www.afterpack.dev/uk/docs/quickstart): оберіть стек і зберіть проєкт.
- [Збірки та CI](https://www.afterpack.dev/uk/docs/builds): сіди, dev проти продакшну, просування тих самих байтів.
- [Конфігурація](https://www.afterpack.dev/uk/docs/config): кожен параметр і де його задати.