# एक Svelte app को obfuscate करें

@afterpack/svelte, Svelte projects के लिए @afterpack/vite को wrap करता है: vite.config.ts में plugin की एक line।

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

Svelte apps [Vite](https://www.afterpack.dev/hi/docs/frameworks/vite) के ज़रिए JavaScript में compile होते हैं, और AfterPack **[bundler](https://www.afterpack.dev/hi/docs/frameworks)** स्तर पर integrate होता है, इसलिए `@afterpack/svelte` एक पतला wrapper है: `afterpackSvelte(options)` *ही* [`afterpackVite(options)`](https://www.afterpack.dev/hi/docs/frameworks/vite) है, बस Svelte project में आसानी से मिल सके इसलिए यह नाम दिया गया है।

पूरा SvelteKit app build कर रहे हैं? [`@afterpack/sveltekit`](https://www.afterpack.dev/hi/docs/frameworks/sveltekit) इस्तेमाल करें। Rollup से Svelte component library build कर रहे हैं? [`@afterpack/rollup`](https://www.afterpack.dev/hi/docs/frameworks/rollup) इस्तेमाल करें।

## Install

```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()` के **बाद** रखें। Named export `afterpackSvelte` है; package `afterpackVite` और `AfterpackViteOptions` type को भी re-export करता है।

## Build

`vite build` अब obfuscated output emit करता है। `vite dev` अछूता रहता है, क्योंकि plugin केवल build के `generateBundle` पर चलता है, Vite के bundle लिखने से पहले।

## Verify

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

यह संयुक्त [Protection Map](https://www.afterpack.dev/hi/docs/protection-map) को gitignored `.afterpack/protectionMap.html` में लिखता है। Source map पर पड़ने वाला असर और उसे संभालने के नियम [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite#verify) वाले ही हैं।

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

## Options

हर [configuration key](https://www.afterpack.dev/hi/docs/config) यहाँ options object के रूप में दी जा सकती है, जो बिना बदलाव [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite#options) को आगे भेजा जाता है। Type alias `AfterpackSvelteOptions`, `AfterpackViteOptions` ही है।

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

## Directives

Directives एक [Pro](https://www.afterpack.dev/hi/docs/pro) feature हैं। [Free build](https://www.afterpack.dev/hi/docs/directives#free-builds) में protection बढ़ाने वाला directive build को `DIAG_PRO_DIRECTIVE_REQUIRES_KEY` के साथ रोक देता है।

`.svelte` फ़ाइल के अंदर का `/* @afterpack … */` marker capture नहीं होता। Directives को इसके बजाय एक सामान्य `.ts`/`.js` module में रखें जिसे component import करता है:

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

हर emitted chunk किसी भी हाल में obfuscate होता है; सामान्य module की ज़रूरत केवल directive को है।

## आगे

- [Frameworks](https://www.afterpack.dev/hi/docs/frameworks): पूरी matrix।
- [Vite](https://www.afterpack.dev/hi/docs/frameworks/vite): वह plugin जो असली काम करता है।
- [SvelteKit](https://www.afterpack.dev/hi/docs/frameworks/sveltekit): Kit का wrapper package।
- [Protection Map](https://www.afterpack.dev/hi/docs/protection-map): रिपोर्ट पढ़ना।
- [Builds और CI](https://www.afterpack.dev/hi/docs/builds): seeds, dev बनाम prod, वही bytes promote करना।