记录一次被包管理器坑害的经历

[licoded]

事情经过

使用vite开发vue2，想写jsx。报错提示安装@vitejs/plugin-vue，于是我就安装了。安装后发现不行，去网上搜说这个包是给vue3用的，vue2对应的包是vite-plugin-vue2，报错的原因是需要在vue文件的script标签中添加lang="jsx"属性。我去自己的项目里看了下确实已经引用了vite-plugin-vue2这个包，并且配置了jsx语法。为了防止git污染，我把@vitejs/plugin-vue这个包卸载掉了。因为我还看到网上说@vitejs/plugin-vue这个包是vite内置依赖的，我怕手动卸载之后会出错误，就执行了yarn命令重新安装了一遍所有npm依赖。

然后，苦难就开始了，网页白屏了，回不去了。我清空了浏览器缓存，重启了电脑，换了端口，都没有解决问题。我开始慌了，于是重新从git拉取了代码，用yarn安装npm依赖，启动vite服务器，还是一样的白屏。我人傻了，开始静下来去看network的请求结果。

寻找原因

我发现这里的js入口文件路径不太对劲，于是就去追踪控制这个entry(入口文件的配置)

然后我在vite-plugin-html-template包的源码中找到了对entry的转化处理，并且确认了这里的isMPA的值是true(MPA显然是多页面应用的意思)

我觉得非常不解，并继续寻找isMPA的值是如何获取的，发现了下面这段代码，打印出config.build.rollupOptions的值是{ input: '/Users/lic/testGitLab/mapAnalysis/index.html' }

接着往下找就分析出来应该是vite版本的变动，导致这里的判断结果错误，并最终锁定是[email protected]升级到[email protected]时对packages/vite/src/node/build.ts文件的变更导致了这个问题。

相关链接

• 版本比对：vitejs/vite@v2.6.14...v2.7.0
• v2.6.14版本：https://github.com/vitejs/vite/blob/v2.6.14/packages/vite/src/node/build.ts
• v2.7.0版本：https://github.com/vitejs/vite/blob/v2.7.0/packages/vite/src/node/build.ts