混淆一个 Svelte 应用

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

在构建一个完整的 SvelteKit 应用?使用 @afterpack/sveltekit。在用 Rollup 构建一个 Svelte 组件库?使用 @afterpack/rollup。

安装

$ npm install -D @afterpack/svelte

// 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 写入打包产物之前。

验证

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

把合并后的 Protection Map 写入已被 gitignore 的 .afterpack/protectionMap.html。source map 的副作用和处理规则与 @afterpack/vite 相同。

选项

每一个配置键都可以作为选项对象在这里传入,并会逐字转发给 @afterpack/vite。类型别名 AfterpackSvelteOptions 就是 AfterpackViteOptions。

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

指令

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

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

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

下一步

• 框架:完整对照表。
• Vite:实际执行工作的插件。
• SvelteKit:Kit 的包装包。
• Protection Map:如何阅读这份报告。
• 构建与 CI:种子、开发环境与生产环境的区别、提升同一份字节。