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

@afterpack/sveltekit: один рядок плагіна після sveltekit() у vite.config.ts.

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

SvelteKit збирається через [Vite](https://www.afterpack.dev/uk/docs/frameworks/vite), а AfterPack інтегрується на рівні **[бандлера](https://www.afterpack.dev/uk/docs/frameworks)**, тож `@afterpack/sveltekit` є тонкою обгорткою: `afterpackSveltekit(options)` — *це і є* [`afterpackVite(options)`](https://www.afterpack.dev/uk/docs/frameworks/vite), лише з назвою, яку легко знайти в проєкті Kit.

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

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

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { afterpackSveltekit } from "@afterpack/sveltekit";

export default defineConfig({
  plugins: [sveltekit(), afterpackSveltekit()],
});
```

Розмістіть його **після** `sveltekit()`. Іменований експорт — `afterpackSveltekit`; пакет також реекспортує `afterpackVite` і тип `AfterpackViteOptions`.

## Збірка

Тепер `vite build` видає обфускований результат. `vite dev` не зачіпається, бо плагін працює лише на етапі `generateBundle` збірки, до того як Vite запише бандл.

Обфускується весь JavaScript, який видає ваш адаптер. Kit запускає Vite один раз для клієнта й один раз для сервера, а плагін обфускує кожен бандл у момент його створення, тож покрито і пререндерений клієнтський бандл `adapter-static`, і серверний бандл для Node чи serverless. З `adapter-static` та `adapter-node` адаптер пише в `build/`; інші адаптери пишуть в інші місця.

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

## Перевірка

```ts
afterpackSveltekit({ protectionMap: { enabled: true } });
```

Записує об'єднану [Protection Map](https://www.afterpack.dev/uk/docs/protection-map) у внесений до gitignore `.afterpack/protectionMap.html`. Побічний ефект для source map і правила поводження з ним ті самі, що й у [`@afterpack/vite`](https://www.afterpack.dev/uk/docs/frameworks/vite#verify).

*(live Protection Map demo embed — see https://www.afterpack.dev/protection-map-demo)*

Щоб перевірити розгортання з `adapter-static` або `adapter-node`, запустіть `npx afterpack@latest verify build` перед завантаженням. Адаптер копіює захищений клієнтський результат із `.svelte-kit/output/client` у `build/`, а [`verify`](https://www.afterpack.dev/uk/docs/cli#afterpack-verify-dir) перевіряє копію за квитанцією захисту цього результату і називає кожен змінений файл.

## Параметри

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

```ts
afterpackSveltekit({ seed: "git", preset: "medium" });
```

## Директиви

Директиви — це можливість тарифу [Pro](https://www.afterpack.dev/uk/docs/pro). У [збірці Free](https://www.afterpack.dev/uk/docs/directives#free-builds) директива, яка посилює захист, зупиняє збірку з помилкою `DIAG_PRO_DIRECTIVE_REQUIRES_KEY`.

Маркер `/* @afterpack … */` усередині файлу `.svelte` не зчитується. Натомість розмістіть директиву у звичайному модулі `.ts`/`.js`, який імпортує маршрут. Природне місце для нього — `src/lib/`:

```ts
// src/lib/license.ts
/* @afterpack preset=hard */
export function verify(token: string) {
  // ...
}
/* @afterpack end */
```

Кожен виданий чанк обфускується в будь-якому разі; звичайний модуль потрібен лише для директиви.

## Далі

- [Фреймворки](https://www.afterpack.dev/uk/docs/frameworks): повна таблиця.
- [Vite](https://www.afterpack.dev/uk/docs/frameworks/vite): плагін, який виконує всю роботу.
- [Svelte](https://www.afterpack.dev/uk/docs/frameworks/svelte): звичайні застосунки Svelte (без Kit).
- [Protection Map](https://www.afterpack.dev/uk/docs/protection-map): як читати звіт.
- [Збірки та CI](https://www.afterpack.dev/uk/docs/builds): сіди, dev проти продакшну, просування тих самих байтів.