# pnpm approve-builds 与前端资源加载的关系

URL: https://caijiao.org/posts/8
Source: docs/posts/8.md
Description: 介绍 pnpm approve-builds 的作用及其对依赖构建脚本执行的影响，解释其如何间接影响 Vite/Webpack 等前端项目的静态资源加载与构建完整性。

在现代前端项目中，我们经常使用 **pnpm** 进行依赖管理，同时使用 **Vite** 或 **Webpack** 构建工具处理静态资源。在这个过程中，有几个细节容易被忽视，可能导致构建失败或资源缺失。本文将以 `approve-builds` 和图片路径加载为例，详细说明二者之间的关系。

## 1. pnpm 的 build 脚本机制

pnpm 7+ 引入了 **安全机制**，默认不会自动执行依赖包中的 `prepare` 或 `build` 脚本，以防止恶意行为。

常用命令示例：

```bash
pnpm config set ignore-scripts false
pnpm run prepare
pnpm approve-builds
```

* `ignore-scripts false`：允许执行依赖自带脚本。
* `pnpm run prepare`：执行项目自身的 `prepare` 脚本。
* `pnpm approve-builds`：准依赖包中含有 `build` 脚本的执行。

> ⚠️ 如果没有执行 `approve-builds`，依赖里的 build 脚本不会运行，可能导致依赖生成的资源缺失。`approve-builds`在 pnpm 10.1.0 添加，在安装期间批准依赖项运行脚本。

未执行`approve-builds`，安装依赖会提示如以下提示：

```bash
╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: @parcel/watcher, esbuild.                                         │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
```

如果运行并且选择了上面两个依赖，在项目`pnpm-workspace.yaml`会生成配置：

```yaml
onlyBuiltDependencies:
  - '@parcel/watcher'
  - esbuild
```

## 2. 前端静态资源加载

在 Vite 或 Webpack 项目中，静态资源通常通过 `import.meta.url` 或 `require` 加载：

```js
methods: {
  returnImgSrc(type, key) {
    return new URL(
      `../images/task-icos/${type.name.toLocaleLowerCase()}${key}.png`,
      import.meta.url
    ).href;
  }
}
```

* 这里的 `returnImgSrc` 方法根据类型动态生成图片路径。
* **前提条件**：`../images/task-icos/` 下的图片必须存在。
* 如果图片依赖某些 npm 包的 `prepare/build` 脚本生成，缺少执行 `approve-builds` 就会找不到文件。

## 3. 二者的间接关系

总结起来，流程如下：

```txt
pnpm approve-builds → 依赖 build 脚本执行 → 资源生成 → returnImgSrc 成功返回 URL
```

* **执行 approve-builds**：依赖中的 build/prepare 脚本会生成必要资源。
* **加载资源**：Vite/webpack 在构建时找到图片文件，生成正确的路径。
* **不执行 approve-builds**：资源缺失，`returnImgSrc` 会报错，构建失败。

## 4. 实践建议

1. **安装依赖后**，先执行：

```bash
pnpm run prepare
pnpm approve-builds
```

确保依赖资源被生成。

2. **构建前检查资源**，确认 `images/task-icos/` 下文件存在。

3. **CI/CD 流水线中**，例如 Jenkins Pipeline，可在安装依赖阶段加入：

```bash
pnpm config set ignore-scripts false
pnpm run prepare || true
pnpm approve-builds || true
pnpm install
```

确保构建环境完整。

## 5. 总结

* `pnpm approve-builds` 与静态资源加载没有直接代码关联。
* 它的作用是确保依赖里的 build 脚本执行，从而间接保证前端构建所需资源存在。
* 忽略这一步可能导致 Vite/Webpack 找不到图片或其他资源，从而报错。