# 混淆一个 Astro 站点

@afterpack/astro 是一个很薄的集成，把 @afterpack/vite 接入 Astro 自己的 Vite 流水线。

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

Astro 会通过它自己的 Vite 流水线编译每一个 island 和客户端打包产物,而 AfterPack 是在**打包工具**这一层做集成的。有了 `@afterpack/astro`,你就不必自己手动接入 `vite: { plugins: [...] }`。

一切都发生在 [`@afterpack/vite`](https://www.afterpack.dev/zh/docs/frameworks/vite) 的 `generateBundle` 中,处于 Astro 自己的 Vite 流水线内部。

## 安装

```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()],
});
```

默认导出和具名的 `afterpackAstro` 导出是同一个函数。

## 构建

`astro build` 现在会生成混淆后的输出。`astro dev` 不受影响,因为插件只运行在构建的 `generateBundle` 上,这正是 [`@afterpack/vite`](https://www.afterpack.dev/zh/docs/frameworks/vite) 一直使用的钩子。Astro 写入的是混淆后的 chunk;原始内容永远不会进入 `dist/`。

被混淆的范围是 Astro 生成的 JavaScript:island 打包产物和客户端脚本,通常位于 `dist/_astro/` 下。永远不会变成客户端 JS 的、服务端渲染的 `.astro` 模板逻辑不在此范围内。

## 验证

只有当 Vite 输出 source map（`vite.build.sourcemap`）且构建不在 CI 中运行（`CI=true` 或 `CI=1`）时，[Protection Map](https://www.afterpack.dev/zh/docs/protection-map) 才会默认写入；[生产构建模式](https://www.afterpack.dev/zh/docs/config#build-mode)不会关闭它。想查看时，请显式请求它:

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

它会写入已被 gitignore 的 `.afterpack/protectionMap.html`。source map 的副作用和处理规则与 [`@afterpack/vite`](https://www.afterpack.dev/zh/docs/frameworks/vite#verify) 相同。

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

## 选项

每一个[配置键](https://www.afterpack.dev/zh/docs/config)都可以作为选项对象在这里传入,并会逐字转发给 [`@afterpack/vite`](https://www.afterpack.dev/zh/docs/frameworks/vite#options),例如 `afterpack({ preset: "hard", complexity: 40 })`。类型别名 `AfterpackAstroOptions` 就是 `AfterpackViteOptions`:

```js
integrations: [afterpack({ seed: "git", preset: "medium" })],
```

## 指令

指令是 [Pro](https://www.afterpack.dev/zh/docs/pro) 功能。在 [Free 构建](https://www.afterpack.dev/zh/docs/directives#free-builds)中，会提高保护强度的指令会让构建停止，并报错 `DIAG_PRO_DIRECTIVE_REQUIRES_KEY`。

插件会在压缩之前从你的源代码中读取指令。[只支持块注释](https://www.afterpack.dev/zh/docs/directives#writing-one):

`.astro` 组件文件本身内部的指令不会被捕获。请把指令放在该 island 的 `.jsx`/`.tsx` 文件里:

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

## 下一步

- [框架](https://www.afterpack.dev/zh/docs/frameworks):完整对照表。
- [Vite](https://www.afterpack.dev/zh/docs/frameworks/vite):实际执行工作的插件。
- [Protection Map](https://www.afterpack.dev/zh/docs/protection-map):如何阅读这份报告。
- [指令](https://www.afterpack.dev/zh/docs/directives):完整的标记语法。
- [构建与 CI](https://www.afterpack.dev/zh/docs/builds):种子、开发环境与生产环境的区别、提升同一份字节。