# 混淆一个 Svelte 应用

@afterpack/svelte 为 Svelte 项目包装了 @afterpack/vite：在 vite.config.ts 中加一行插件。

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

Svelte 应用通过 [Vite](https://www.afterpack.dev/zh/docs/frameworks/vite) 编译成 JavaScript,而 AfterPack 是在**[打包工具](https://www.afterpack.dev/zh/docs/frameworks)**这一层做集成的,因此 `@afterpack/svelte` 是一个很薄的包装器:`afterpackSvelte(options)` *就是* [`afterpackVite(options)`](https://www.afterpack.dev/zh/docs/frameworks/vite),只是为了在 Svelte 项目里更容易被发现而单独命名。

在构建一个完整的 SvelteKit 应用?使用 [`@afterpack/sveltekit`](https://www.afterpack.dev/zh/docs/frameworks/sveltekit)。在用 Rollup 构建一个 Svelte 组件库?使用 [`@afterpack/rollup`](https://www.afterpack.dev/zh/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/zh/docs/protection-map) 写入已被 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)。类型别名 `AfterpackSvelteOptions` 就是 `AfterpackViteOptions`。

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

`.svelte` 文件内部的 `/* @afterpack … */` 标记不会被捕获。请把指令放在组件所导入的普通 `.ts`/`.js` 模块里:

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

无论如何,每一个生成的 chunk 都会被混淆;只有指令需要放在普通模块里。

## 下一步

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