vitest + vue3 踩坑记录
Vitest最大的坑点是有太多隐式规则导致与常规构建效果不一致于是无法达到常规构建一致的效果。1. 插件 transfrom 没效果。经过研究vitest默认不处理公共库如果有公共库要处理需要配置到test.server.deps.inline2. 模块被resolve到commonjs版本模块被resolve到commonjs版本看似无关紧要反正都能用commonjs反而更容易在node中跑起来。但是作为测试来说对真实环境的模拟就不像了。比如我在测试时想要证明我的代码能在开启__VUE_OPTIONS_API__: false的情况下也能用。因为Vue的commonjs预构建产物没有__VUE_OPTIONS_API__虽然代码能用但是不能证明是正确的。解法是通过插件提前按照browser的规则resolve出来我这里使用rollup/plugin-node-resolve这个插件。(function(){letpluginnodeResolve({browser:true});plugin.resolveId.orderundefined;// 调整钩子执行顺序plugin.enforcepre;// 确保在 Vite 内部插件之前执行returnplugin;})()3. tsx 配置失效typescript明明配置了但是产物和预期不符。经过研究发现是vitejs/plugin-vue-jsx这个插件导致的这个插件内置了一套基于babel的typescript编译配置这个配置方案是没有读取typescript配置的导致产物不符合配置。理想的方案是前面已经把tsx转成jsx了这个插件只处理jsx。配置修改如下(function(){letpluginvueJsx({tsTransform:built-in,include:/\.(j|t)sx$/});plugin.transform.orderundefined;plugin.enforcepre;// 确保提前拦截和处理returnplugin;})()