# 混淆普通 JavaScript

把 npx afterpack@latest 指向任意一个已生成 JavaScript 的目录。不需要打包工具,不需要插件,也不需要配置文件。

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

没有插件、没有框架、没有打包工具钩子。给 CLI 一个目录,它就会原地混淆其中每一个 `.js`、`.mjs` 和 `.cjs` 文件。适用于手工搭建的 CDN 打包产物、`tsc` 输出目录、原生 ESM、require.js/AMD 应用,或者任何没有 AfterPack 包可用的工具产出的 `dist/`。

## 安装

没有什么需要安装的:直接对你的输出目录运行 CLI 即可。

```bash
npx afterpack@latest
```

## 构建

[路径是可选的](https://www.afterpack.dev/zh/docs/cli#usage)。不指定时,CLI 会在工作目录中选取 `dist/`、`build/`、`out/`、`.output/` 和 `.next/` 中最新的一个,并打印它选中了哪一个;如果你的输出在别处,以及在 CI 中,请指定目录。它接受一个要遍历的目录,或一个单独的 `.js`/`.mjs`/`.cjs` 文件。如果目录不存在,或其中没有 `.js`/`.mjs`/`.cjs`,CLI 会说明这一点并[以 `1` 退出](https://www.afterpack.dev/zh/docs/diagnostics#exit-codes)。

如果它在你的 `package.json` 中发现了 [`next`](https://www.afterpack.dev/zh/docs/frameworks/nextjs)、[`vite`](https://www.afterpack.dev/zh/docs/frameworks/vite)、[`webpack`](https://www.afterpack.dev/zh/docs/frameworks/webpack)、[`rollup`](https://www.afterpack.dev/zh/docs/frameworks/rollup) 或 [`esbuild`](https://www.afterpack.dev/zh/docs/frameworks/esbuild),它会在运行**之后**打印一行提示,指向对应的插件。

每个键的完整说明见[配置](https://www.afterpack.dev/zh/docs/config)。在这条路径上,你可以在项目根目录的 `afterpack.json`、CLI 标志或环境变量中设置它。以 `complexity` 为例,任选一种:

```bash
npx afterpack@latest dist/ --complexity=40
```

```bash
AFTERPACK_complexity=40 npx afterpack@latest dist/
```

```json
{ "complexity": 40 }
```

带值的标志用 `=`(`--preset=hard`、`--seed=git`);布尔标志裸写表示开启,加 `=false` 表示关闭(`--build.backup`、`--directives.enabled=false`)。`-h`/`--help` 和 `-v`/`--version` 打印用法说明。完整命令形态见 [CLI 参考](https://www.afterpack.dev/zh/docs/cli);每个键见[配置](https://www.afterpack.dev/zh/docs/config)。成功时退出码为 `0`,任何失败为 `1`。没有其他退出码可供 CI 分支判断。

这次运行会写入:

- **[`.afterpack/protectionMap.html`](https://www.afterpack.dev/zh/docs/protection-map)**:本次运行的一份合并地图,在能找到 [source map](https://www.afterpack.dev/zh/docs/config#sourceMap-enabled) 且构建不是在 CI 中(`CI=true` 或 `CI=1`)运行时写入。[生产](https://www.afterpack.dev/zh/docs/config#build-mode)模式不会关闭它。它内嵌了你的原始源码,因此始终落在已被 gitignore 的 `.afterpack/` 里,绝不会写进你混淆的那个目录。
- **`foo.js.map`**:开启 map 时,会生成一个同名的 `.map` 兄弟文件。
- **`.afterpack/backups/`**:每次运行都会把你的原始文件连同一份清单一起镜像到项目根目录下。[`--build.backup=false`](https://www.afterpack.dev/zh/docs/config#build-backup) 可以关闭它;`npx afterpack@latest restore` 会用它撤销这次运行。

`.afterpack/` 自带一个 `.gitignore`,因此 git 会忽略它;AfterPack 从不修改你的 `.gitignore`。

## 验证

为你想查看的这次构建开启 [source map](https://www.afterpack.dev/zh/docs/config#sourceMap-enabled)(`tsc --sourceMap`,或一个打包工具的标志),然后打开已被 gitignore 的 [`.afterpack/protectionMap.html`](https://www.afterpack.dev/zh/docs/protection-map)。它包含你的完整源码。绝不要提交它或对外提供服务。

## 选项

每一个[配置键](https://www.afterpack.dev/zh/docs/config)在这条路径上同样有效;每个键以及每个可以设置它的位置见[配置](https://www.afterpack.dev/zh/docs/config)。

## 指令

CLI 不读取指令:它运行在已构建的输出上,那里的注释已经不存在,并且它会拒绝 [`directives.enabled`](https://www.afterpack.dev/zh/docs/config#directives-enabled)。要应用指令,请使用[框架插件](https://www.afterpack.dev/zh/docs/frameworks)。参见[指令](https://www.afterpack.dev/zh/docs/directives)。

## 边界情况

- **没有 source map,能看到的就更少。** 如果找不到 map,Protection Map 就没有原始源码可以渲染,这次运行的报告也会很单薄。如果你的构建能生成 map(`tsc --sourceMap`,或一个打包工具的标志),就为你想查看的这次构建开启它,然后确保它不出现在你的发布产物中。
- **完全不感知框架。** AfterPack 看到的只是文件。

## 下一步

- [框架](https://www.afterpack.dev/zh/docs/frameworks):完整对照表。
- [CLI 参考](https://www.afterpack.dev/zh/docs/cli):上文标志的完整说明。
- [构建与 CI](https://www.afterpack.dev/zh/docs/builds):种子、开发环境与生产环境的区别、提升同一份字节。
- [Protection Map](https://www.afterpack.dev/zh/docs/protection-map):如何阅读这份报告。
- [配置](https://www.afterpack.dev/zh/docs/config):每一个选项,以及哪个入口能设置它。
- [预设](https://www.afterpack.dev/zh/docs/presets):五级阶梯。