适用于你的框架的 JavaScript 混淆

针对你的技术栈应安装哪个包、它在何处接入,以及它会写出哪些文件。

AfterPack 混淆的是打包工具产出的 JavaScript。安装对应你技术栈的包,平时的构建就会输出已混淆的结果。其他情况下,对构建输出运行 npx afterpack@latest 即可。

框架矩阵

框架包接入方式运行位置构建输出
Next.js@afterpack/nextwithAfterpack(config)next build 内部的 runAfterProductionCompile,在 Next 写出 chunk 之后.next/static/chunks、out/
Vite@afterpack/vite在 plugins 中加入 afterpackVite()generateBundle,在流水线内build.outDir
Webpack@afterpack/webpacknew 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/vitedist/
Svelte@afterpack/svelte在 plugins 中加入 afterpackSvelte()@afterpack/vitedist/
SvelteKit@afterpack/sveltekit在 sveltekit() 之后加入 afterpackSveltekit()@afterpack/vite适配器输出(build/)
Vue 3@afterpack/vue在 vue() 之后加入 afterpackVue()@afterpack/vitedist/
Nuxt 3@afterpack/nuxtmodules: ["@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 出于同样的原因拒绝该键。

下一步

  • 快速开始:选择技术栈并构建。
  • 构建与 CI:种子、开发环境与生产环境的区别、原样提升同一份字节。
  • 配置:每个选项以及在何处设置。