# Astro site को obfuscate करें

@afterpack/astro एक पतला integration है जो @afterpack/vite को Astro की अपनी Vite pipeline में wire करता है।

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

Astro हर island और client bundle को अपनी Vite pipeline से compile करता है, और AfterPack **bundler** स्तर पर integrate होता है। `@afterpack/astro` इसलिए है ताकि आपको `vite: { plugins: [...] }` ख़ुद हाथ से wire न करना पड़े।

सब कुछ [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite) के `generateBundle` में, Astro की अपनी Vite pipeline के अंदर होता है।

## Install

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

```js
// astro.config.mjs
import { defineConfig } from "astro/config";
import afterpack from "@afterpack/astro";

export default defineConfig({
  integrations: [afterpack()],
});
```

Default export और named `afterpackAstro` export एक ही function हैं।

## Build

अब `astro build` obfuscated output देता है। `astro dev` अछूता रहता है, क्योंकि plugin केवल build के `generateBundle` पर चलता है, वही hook जिसे [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite) हमेशा इस्तेमाल करता है। Astro obfuscated chunks लिखता है; मूल फ़ाइलें कभी `dist/` तक नहीं पहुँचतीं।

Obfuscate होने वाला हिस्सा वह JavaScript है जो Astro emit करता है: island bundles और client scripts, आमतौर पर `dist/_astro/` के अंतर्गत। Server-rendered `.astro` template logic जो कभी client JS नहीं बनता, इसके दायरे से बाहर है।

## Verify

[Protection Map](https://www.afterpack.dev/hi/docs/protection-map) डिफ़ॉल्ट रूप से सिर्फ़ तब लिखा जाता है जब Vite source map emit करे (`vite.build.sourcemap`) और build CI में न चल रहा हो (`CI=true` या `CI=1`); [production build mode](https://www.afterpack.dev/hi/docs/config#build-mode) इसे बंद नहीं करता। जब आप इसे देखना चाहें, तो स्पष्ट रूप से माँगें:

```js
integrations: [afterpack({ protectionMap: { enabled: true } })],
```

यह 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) को आगे भेज दिया जाता है, उदाहरण के लिए `afterpack({ preset: "hard", complexity: 40 })`। Type alias `AfterpackAstroOptions`, `AfterpackViteOptions` ही है:

```js
integrations: [afterpack({ 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` के साथ रोक देता है।

Directives को plugin minification से पहले आपके source से पढ़ता है। [केवल block comments](https://www.afterpack.dev/hi/docs/directives#writing-one):

`.astro` component फ़ाइलों के अंदर लिखे directives capture नहीं होते। Directive को island की `.jsx`/`.tsx` फ़ाइल में रखें:

```jsx
/* @afterpack preset=hard */
export function LicenseGate({ token }) {
  // ...
}
/* @afterpack end */
```

## आगे

- [Frameworks](https://www.afterpack.dev/hi/docs/frameworks): पूरी तालिका।
- [Vite](https://www.afterpack.dev/hi/docs/frameworks/vite): वह plugin जो असली काम करता है।
- [Protection Map](https://www.afterpack.dev/hi/docs/protection-map): report पढ़ना।
- [Directives](https://www.afterpack.dev/hi/docs/directives): marker grammar पूरी तरह।
- [Builds & CI](https://www.afterpack.dev/hi/docs/builds): seeds, dev बनाम prod, वही bytes promote करना।