AfterPack 混淆的是打包工具产出的 JavaScript。安装对应你技术栈的包,平时的构建就会输出已混淆的结果。其他情况下,对构建输出运行 npx afterpack@latest 即可。
框架矩阵
| 框架 | 包 | 接入方式 | 运行位置 | 构建输出 |
|---|---|---|---|---|
| Next.js | @afterpack/next | withAfterpack(config) | next build 内部的 runAfterProductionCompile,在 Next 写出 chunk 之后 | .next/static/chunks、out/ |
| Vite | @afterpack/vite | 在 plugins 中加入 afterpackVite() | generateBundle,在流水线内 | build.outDir |
| Webpack | @afterpack/webpack | new AfterpackWebpackPlugin() | compilation.hooks.processAssets,在流水线内 | output.path |
| Rollup | @afterpack/rollup | 在 plugins 中加入 afterpackRollup() | generateBundle,在流水线内 | output.dir 或 output.file |
| esbuild | @afterpack/esbuild | 在 plugins 中加入 afterpackEsbuild() | onEnd,在 esbuild 写出文件之后 | outdir 或 outfile |
| Astro | @afterpack/astro | 在 integrations 中加入 afterpack() | Astro 的 Vite 配置中的 @afterpack/vite | dist/ |
| Svelte | @afterpack/svelte | 在 plugins 中加入 afterpackSvelte() | @afterpack/vite | dist/ |
| SvelteKit | @afterpack/sveltekit | 在 sveltekit() 之后加入 afterpackSveltekit() | @afterpack/vite | 适配器输出(build/) |
| Vue 3 | @afterpack/vue | 在 vue() 之后加入 afterpackVue() | @afterpack/vite | dist/ |
| Nuxt 3 | @afterpack/nuxt | modules: ["@afterpack/nuxt"] | 挂在 Nuxt 的 Vite 配置上的 @afterpack/vite | .output/public/_nuxt/ |
| Angular v17+ | @afterpack/angular | 在 postbuild 脚本中调用 afterpackAngular() | 一次 postbuild 处理,在 ng build 写出文件之后 | dist/<app>/browser |
| Electron | @afterpack/electron | 用 withAfterpack(config) 包裹 electron-vite | 三个构建目标都运行 @afterpack/vite,共用一个种子 | 每个构建目标各自的 out/ |
| Parcel | @afterpack/parcel-optimizer | .parcelrc 的 optimizers 中的一项 | 一个 Parcel 2 Optimizer,逐 bundle 运行,在流水线内 | Parcel 的 distDir |
Astro、Svelte、SvelteKit、Vue、Nuxt 和 Angular 会自行安装 @afterpack/vite,或运行同一套共享的处理流程,因此你无需手动接入。
无插件的情况
| 技术栈 | 方案 |
|---|---|
| Remix / React Router v7 | 基于 Vite 构建:使用 @afterpack/vite,或使用 CLI。 |
| 纯 JS | 没有可接入的打包工具:运行 npx afterpack@latest <dir>。 |
每个集成都会做什么
默认行为见快速开始。除此之外,所有插件和 CLI 还共享以下行为:
- 自动检测构建模式。
NODE_ENV=production或CI=true会选择生产模式,并关闭 source map 输出。随产物一起发布的 map 会让混淆被还原。 - 相同的产物。 一份合并的
protectionMap.html写入已被 gitignore 的.afterpack/;开启 map 时,每个文件旁边还会有一个.map。.afterpack/自带一个.gitignore;你的.gitignore从不会被修改。build.backup有两种形态:CLI 在每次运行时把你的原始文件镜像到.afterpack/backup/;而直接混淆磁盘上文件的插件(@afterpack/next、@afterpack/esbuild、@afterpack/angular)在你要求时,会在输出旁写出一个.backup.<hash>文件。流水线内的插件没有已写出的文件可供备份放在旁边,你要求时它们会发出警告。 - 一个开关即可跳过运行。
build.autorun: false保留已安装的插件,但跳过引擎。 - 插件从你的源码中读取指令,凡是有可供读取的钩子的集成都如此。Angular 则直接拒绝该键:它的构建器是封闭的,处理流程只能看到已经压缩过的输出。CLI 出于同样的原因拒绝该键。