如何解决执行npm run build时出现的Parcel/optimizer-image报错

错误码含义 #

你遇到的是Parcel构建流程中@parcel/optimizer-image图片优化插件的执行失败错误，这类错误出现在资源优化的收尾阶段，本质是插件处理你项目内的图片资源时返回了非预期结果。Parcel的图片优化校验比其他工具更严格，所以会出现其他项目能正常构建、当前项目报错的情况。后续如果遇到Parcel抛出的同类型@parcel/optimizer-*前缀的错误，都可以按照「清缓存→排查对应类型资源是否异常→重装对应优化插件→禁用对应优化项」的逻辑自行排查。

修复方案 #

• 首先清除Parcel缓存重试，缓存异常是这类偶发错误的最常见原因，执行以下命令后重新构建即可：

  # macOS/Linux
  rm -rf .parcel-cache dist
  # Windows
  rd /s /q .parcel-cache dist
  

  之后重新执行npm run build测试是否能正常构建。
• 排查损坏的图片资源：逐个打开项目内的所有JPEG、PNG图片确认可正常预览，无法打开、或者打开后显示异常的图片就是故障根源，用图片编辑工具重新导出为标准的JPEG/PNG格式即可解决。
• 若排查后没有损坏图片，可以手动重装图片优化依赖补全环境缺失项：

  npm install @parcel/optimizer-image -D
  

• 如果你不需要Parcel自动优化图片，也可以直接在package.json中添加配置禁用图片优化，绕开报错：

  {
    "targets": {
      "default": {
        "optimize": {
          "image": false
        }
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者Maxieprodmoore