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

@afterpack/svelte обгортає @afterpack/vite для проєктів Svelte: один рядок плагіна у vite.config.ts.

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

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

Збираєте повноцінний застосунок SvelteKit? Використовуйте [`@afterpack/sveltekit`](https://www.afterpack.dev/uk/docs/frameworks/sveltekit). Збираєте бібліотеку компонентів Svelte через Rollup? Використовуйте [`@afterpack/rollup`](https://www.afterpack.dev/uk/docs/frameworks/rollup).

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

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

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { afterpackSvelte } from "@afterpack/svelte";

export default defineConfig({
  plugins: [svelte(), afterpackSvelte()],
});
```

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

## Збірка

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

## Перевірка

```ts
afterpackSvelte({ 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)*

## Параметри

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

```ts
afterpackSvelte({ 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`, який імпортує компонент:

```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): плагін, який виконує всю роботу.
- [SvelteKit](https://www.afterpack.dev/uk/docs/frameworks/sveltekit): пакет-обгортка для Kit.
- [Protection Map](https://www.afterpack.dev/uk/docs/protection-map): як читати звіт.
- [Збірки та CI](https://www.afterpack.dev/uk/docs/builds): сіди, dev проти продакшну, просування тих самих байтів.