# Обфускація застосунку Remix

Пакета @afterpack/remix немає. Remix збирається через Vite, тож використовуйте @afterpack/vite або запустіть CLI на результаті збірки.

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

> **Окремого пакета для Remix немає**
>
> AfterPack не публікує `@afterpack/remix`. Remix v2 і React Router v7 збираються через Vite, тож [плагін для Vite](https://www.afterpack.dev/uk/docs/frameworks/vite) — природний спосіб підключення, а [CLI](https://www.afterpack.dev/uk/docs/cli) працює на результаті в будь-якому разі. Повну матрицю див. у [Фреймворках](https://www.afterpack.dev/uk/docs/frameworks).

## Встановлення

Власний плагін Remix працює всередині вашого `vite.config.ts`, тож `@afterpack/vite` додається в той самий масив `plugins`, після нього:

```bash
npm install -D @afterpack/vite
```

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { vitePlugin as remix } from "@remix-run/dev";
import { afterpackVite } from "@afterpack/vite";

export default defineConfig({
  plugins: [remix(), afterpackVite()],
});
```

Або обійдіться без пакета і запустіть [CLI](https://www.afterpack.dev/uk/docs/cli) на результаті збірки.

## Збірка

Плагін працює на `generateBundle` і обфускує кожен JavaScript-чанк у бандлі, перш ніж Vite його запише. Remix збирає клієнтську і серверну частини як окремі збірки Vite, тож плагін запускається один раз для кожної частини, лише на її бандлі. Закріпіть один [`seed`](https://www.afterpack.dev/uk/docs/config#seed) (`seed: "git"` — найпростіше), якщо обидві частини випускаються разом і ви хочете, щоб вони збиралися з одного сіду. [Збірки та CI](https://www.afterpack.dev/uk/docs/builds) описують цей компроміс.

Збірка з CLI працює так само: спочатку зберіть, потім вкажіть AfterPack на кожен каталог виводу. Збірка Remix через Vite зазвичай записує `build/client` і `build/server`:

```bash
npx afterpack@latest build/client --seed=git
```

Вкажіть каталог як [аргумент шляху](https://www.afterpack.dev/uk/docs/cli#usage): без нього CLI вибирає найновіший з `dist/`, `build/`, `out/`, `.output/` і `.next/`, а це не те, що вам потрібно, коли клієнтська й серверна збірки обфускуються окремо. Він приймає каталог для обходу або один файл `.js`/`.mjs`/`.cjs`. Запускайте його один раз для кожного каталогу, який хочете обфускувати, з однаковим [`--seed`](https://www.afterpack.dev/uk/docs/config#seed) для обох, якщо вони випускаються разом. Обидва шляхи викликають той самий спільний прохід, тож усе інше ([шкала пресетів](https://www.afterpack.dev/uk/docs/presets), [зупинка з помилкою (fail closed)](https://www.afterpack.dev/uk/docs/diagnostics#fail-closed-no-exceptions), [артефакти](https://www.afterpack.dev/uk/docs/cli#files)) однакове.

## Перевірка

[Protection Map](https://www.afterpack.dev/uk/docs/protection-map) за замовчуванням записується, коли Vite видає source map і збірка не працює в CI (`CI=true` або `CI=1`); [режим збірки](https://www.afterpack.dev/uk/docs/config#build-mode) її не вимикає. Vite не видає source map, якщо не задано `build.sourcemap`, тож увімкніть source map для збірки, яку хочете дослідити, а потім відкрийте `.afterpack/protectionMap.html`, внесений у gitignore. Він містить увесь ваш вихідний код. Ніколи не комітьте його і не роздавайте з сервера.

## Параметри

Будь-який [ключ конфігурації](https://www.afterpack.dev/uk/docs/config) працює через цей плагін так само, як на [сторінці Vite](https://www.afterpack.dev/uk/docs/frameworks/vite#options), включно зі збором директив; усі ключі див. у [Конфігурації](https://www.afterpack.dev/uk/docs/config).

## Директиви

Директиви зчитуються плагіном із вашого вихідного коду. CLI зчитує їх, коли його вхідні дані мають source map. Див. [Директиви](https://www.afterpack.dev/uk/docs/directives).

## Особливі випадки

- **Зупинка з помилкою (fail closed), без можливості перевизначення.** [Діагностика](https://www.afterpack.dev/uk/docs/diagnostics) рівня `error`/`critical`, порожній результат або файл, який рушій не зміг обфускувати, [завершують збірку помилкою](https://www.afterpack.dev/uk/docs/diagnostics#exit-codes).
- **Серверний результат — це просто JavaScript.** AfterPack обфускує будь-який `.js`, який знаходить у каталозі, на який ви його вказали.

## Далі

- [Фреймворки](https://www.afterpack.dev/uk/docs/frameworks): повна матриця.
- [Vite](https://www.afterpack.dev/uk/docs/frameworks/vite): плагін, який рекомендує ця сторінка.
- [Довідник CLI](https://www.afterpack.dev/uk/docs/cli#flags): повний список прапорців.
- [Конфігурація](https://www.afterpack.dev/uk/docs/config): кожен параметр і де його можна задати.
- [Пресети](https://www.afterpack.dev/uk/docs/presets): шкала, за якою визначається `preset`.
- [Збірки та CI](https://www.afterpack.dev/uk/docs/builds): сіди, dev проти prod, просування тих самих байтів.
- [Protection Map](https://www.afterpack.dev/uk/docs/protection-map): як читати звіт.