Pnpm结合Vite进行本地包调试问题

发表于 更新于 阅读次数： 本文字数： 2.1k 阅读时长 ≈ 4 分钟

Pnpm+Vite进行项目开发时，当进行本地包调试开发，Vite下加载的还是老版包。这里分析并解决下该问题

本地包调试步骤

因为包管理器是pnpm，所以对应的调试包挂载步骤就是这样

  1. 本地包执行pnpm link --global
  2. 具体项目下执行pnpm link pkgname --global

执行上述步骤浏览器访问Web即复现现包版本不对的问题。

这里先分析下在vite/pnpm

.vite

vite构建项目时会在node_modules下创建.vite文件夹

https://static.1991421.cn/2024/2024-03-03-233708.jpeg

.vite更是需要满足以下任意一点的变动

  • Package manager lockfile content, e.g. package-lock.json, yarn.lock, pnpm-lock.yaml or bun.lockb.
  • Patches folder modification time.
  • Relevant fields in your vite.config.js, if present.
  • NODE_ENV value.

同时vite下如果想强制刷新需要--force或者删除.vite，相关介绍见官方

当执行pnpm link时会发现lock是没变动的，因此.vite缓存也就不会更新。

.pnpm

node_modules下的包都会软链接到.pnpm文件夹。当执行pnpm link

  1. lock文件不会有变动
  2. node_modules下对应的pkg软链接到全局link的包下

问题分析

综上，问题原因是pnpm link后lock文件并不会更新，虽然依赖的包链接改了即内容改了，但vite是无感知的。因此vite缓存需要手动刷新。手动删除vite，重新执行vite，会发现加载内容正确。

相关问题

SourceMap

sourcemap是为了方便以源码方式进行调试，比如在chrome network中可以搜到源码文件。之所以能够检索到是因为，浏览器在打开network的情况下，会尝试根据代码文件中备注的sourcemap地址加载对应的map文件，而map文件中记录了源码文件的位置，紧接着就会加载源代码文件。如果chrome下检索不到源代码文件，可以排查下map文件和源码文件是否按照正确路径加载成功。

Vite下调试Webpack包，SourceMap不work

原因是webpack打包的sourcemap中对于源文件走的是webpack协议，而Vite不兼容。其中一个解决办法是改为Vite构建

![image-20240305231617186](/Users/alanhe/Library/Mobile Documents/comappleCloudDocs/Typora/image-20240305231617186.png)

1
{"version":3,"file":"index.js","mappings":"AAAA","sources":["webpack://laputarenderer/webpack/universalModuleDefinition"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"laputarenderer\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"laputarenderer\"] = factory(root[\"React\"]);\n})(self, (__WEBPACK_EXTERNAL_MODULE__12__) => {\nreturn "],"names":[],"sourceRoot":""}

相关文档