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

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

1. pnpm 的 build 脚本机制

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

常用命令示例：

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，安装依赖会提示如以下提示：

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

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

onlyBuiltDependencies:
  - '@parcel/watcher'
  - esbuild

2. 前端静态资源加载

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

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. 二者的间接关系

总结起来，流程如下：

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

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

4. 实践建议

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

pnpm run prepare
pnpm approve-builds

确保依赖资源被生成。

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

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

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

确保构建环境完整。

5. 总结

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