使用npm link关联组件库后修改代码浏览器不生效如何解决

核心原因 #

IDE直接读取文件系统的软链指向的最新文件，而项目的构建工具默认会缓存第三方依赖的构建产物，即使软链对应的文件更新，构建工具如果没有触发重新读取，就会继续使用旧缓存的代码运行。

逐一排查修复步骤 #

• 确认组件库构建流程生效
  修改代码后必须执行组件库的构建命令（例如npm run build），且构建产物正确输出到package.json中main/module/exports字段声明的目录，不要只改源码不执行构建。
• 关闭构建工具对该组件库的缓存
  根据你使用的构建工具对应调整：
  • Vite场景：在vite.config.js中添加如下配置，跳过对该组件库的预构建缓存：

    export default {
      optimizeDeps: {
        exclude: ['design-system']
      }
    }
    

    重启开发服务时添加--force参数强制刷新所有依赖缓存：npx vite --force
  • Webpack场景：修改webpack配置，将软链的组件库排除出缓存管理范围，或者重启服务前删除node_modules/.cache目录清除webpack缓存。
  • Next.js场景：如果使用了turbo，先执行npx turbo clean清除turbo缓存；普通启动直接删除.next目录后重启服务。
• 校验组件库导出配置
  检查组件库package.json的导出字段优先级，browser字段优先级高于main/module，如果配置了错误的browser路径会导致构建工具拉取旧产物。
• 排查重复依赖
  在目标项目执行npm ls design-system，检查是否存在多个版本的组件库被嵌套安装，如果有重复依赖，删除目标项目的node_modules和package-lock.json，重新执行npm link design-system后再执行npm install。

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