错的开始

最开始我的想法很简单，就想的本地开发一个npm包，然后在我本地项目的某个单文件下使用测试一下这个npm包，没问题就发布。

使用本地包报错

于是在写好npm包后，本地使用 yalc 调试，直接在本地项目中的 test.vue 中引入npm包使用，然后直接报错了：

No matching export in "browser-external:buffer" for import "Buffer"

我懵了，但是仔细看这个错误很发现是在打包文件中引用了第三方依赖，第三方依赖又引入了 这个 Buffer这个模块，然后报错了。

开始解决

于是我就死脑筋一条道走到黑的想的如何解决这个问题，先开始以为是使用的打包依赖的版本问题，于是切换不同版本测试无果。

然后在上篇文章踩坑了使用 yalc .vite 有缓存的问题。于是又在不停的删除yalc发布的版本、删除.vite目录，重启项目测试后发现还是报错。

最后查询资料得知这个错误是因为打包输出的.js文件中引入了 Buffer，但是浏览器环境中是不能直接使用 Buffer的，包括node的 path 等其他模块。

于是我想的是更换一个打包依赖jszip试试，果然更换后不报这个错了（因为这个依赖中没用到Buffer）

但又出现了 path 不能使用，于是又在踩坑解决，这个过程浪费了大把时间（这时候我脑子里还是一直想的如何先解决这个问题！）

直到我搜索到了网上类似打包为zip的npm包后，查看人家的源码后才恍然大悟😭😭😭

原来人家实现的包是以插件形式在项目打包结束后才使用此npm包！

这时候我才想到，我为什么为必须要在单文件使用呢？ 单文件里使用这个包好像不是我的目的啊！！！ 且单文件里执行编译后是需要在浏览器环境中运行。

我的需求好像也就是要把最终的 dist 目录打包为.zip

于是，我才转换思路，以插件的形式在config配置文件中使用我的npm包，此时发现我在这里使用那不就完全是node环境嘛，这个地方也不用在浏览器中环境中运行。既然不是浏览器环境那我不就可以随便用node模块了！！！

瞬间茅塞顿开的感觉... 😭😭😭

写在最后

在研发过程中，有时候一个方法、方式行不通的时候得要根据需求仔细的想一想到底是要什么？什么使用场景、使用方式？ 要转换一下思路，不能一条路走到黑！