前端项目本地依赖一致性检查.md

# predev 前端项目本地依赖一致性检查 > `package.json` 中声明的依赖没有安装，项目启动后出现异常报错 由于多次遇到此问题，且每次排查都要耗费不少时间，在此做一个记录，并对后续开发进行规避 ## 问题现象 `git pull` 拉取最新代码后，项目可以正常启动，部分页面也能正常访问，但进入某个新页面时出现错误 ```text Failed to fetch dynamically imported module ``` 1. F12 打开后，Network 中对应 ` XXX组件.vue` `Status Code` 为 `500` 2. Vite 终端显示 ```text Failed to resolve import "@XXX依赖" from "src/views/XXX组件.vue" ``` 原因是新代码引用了新的依赖，但本地只拉取了代码，没有同步 `node_modules` 执行下面的命令后问题解决 ```bash npm install ``` 团队项目在锁文件 `package-lock.json` 可靠的情况下，也可以使用 ```bash npm ci ``` `npm ci` 负责修复和重建： ``` 让 node_modules 严格恢复到 package-lock.json 描述的状态 ``` ## 为什么项目仍然可以启动 依赖缺失，但项目仍可以启动，是由于项目使用了路由懒加载，新依赖只在特定页面中使用 ```js { path: '/big-screen', component: () => import('@/views/bigScreen/index.vue') } ``` Vite 启动时不会立即加载所有懒加载页面，只有进入组件对应页面页面后才会解析 `XXX组件.vue`，此时才发现依赖缺失 ```text 项目启动成功 → 访问普通页面正常 → 进入XXX页面 → 加载 XXX组件.vue → 新依赖无法解析 → 页面加载失败 ``` 因此，项目能够启动不代表本地依赖完整 ## 添加 predev 检查 可以在 `package.json` 中添加 `predev` ```json { "scripts": { "predev": "npm ls --depth=0", "dev": "vite" } } ``` 执行 ```bash npm run dev ``` npm 会先自动执行 ```bash npm run predev ``` 如果 `package.json` 中声明的依赖没有安装，`npm ls --depth=0` 会报错并阻止项目继续启动 潜在问题： > 如果项目引用了新依赖，但没有把该依赖写入 `package.json`，`npm ls` 无法通过依赖声明发现它