背景

由于目前自己接触到的公司大部分项目还没有集成自动化部署那一套东西。再加上有时候还是内网环境、前端人员也没有服务器相关密码权限，所以，目前前端上线发版流程就是这样：

前端本地打包dist
把dist压缩为.zip包
微信把包发给后端

看上去好像也不是很麻烦，但是我有个人的习惯是每次打包完的dist我会重命名一下。比如：2023-1-1-pc端、xxx移动端

重命名是为了发给后端时更清晰的知道这个包是什么，但是有时候也会很懒直接一个dist包发过去、或者没时间备注。

后端看到有时候可能也会觉得乱七八糟吧！或者你得说明一下发到这个包是啥或者他得问一嘴。

于是乎我就有了想法，能不能把这一步自动化，我执行一个命令就可以打包为zip包，并可以自定义重命名。这样的话，每次打包直接就生成了zip压缩包也重命名好了。发给后端时也就简洁明了。

后端部署后如果需要版本回退，也能清晰的知道备份的包分别是什么。

本文主要是记录自己的学习过程，大佬勿喷。先贴个地址： plugin-zip-pack - npm (npmjs.com)

如果文章对你有帮助，你的点赞、评论、收藏是我最大的动力😀😀😀
点击链接学习交流群(前端微信群) 加vx拉你进 前端学习交流群 让我们一起 ~~好好学习~~（🐟🐟🐟）吧😎😎😎

初始化项目

初始化： npm init

根据实际情况依次填写：

项目名称
项目版本
项目描述
搜索关键字
作者
开源协议

如果有写错或者遗漏的也没关系，后续可以直接在package.json中修改。

源码编写

这里没什么好说的，就是写了...

因为源码中使用了node相关api较多，所以采用 commonJS 语法编写。

但是我在初次实现的时候，差点劝退！详情请移步：我在我的npm包调试时一根筋😭 - 掘金 (juejin.cn)

项目中测试

编写完代码后先在编辑器node环境中测试一下：

node "xxx\zip-pack\index.js"

解压打包文件对比，发现打包后的结果与我们的期望一样：

自定义打包文件名称，例如这里我加上了时间：

rollup打包报错问题

TypeError: Unknown file extension ".json" for "xxx"

这个报错网上大多数解决方案都是安装@rollup/plugin-json插件，但我尝试后无效。

最终尝试降低到 2.45.1 版本后可行：

打包完成后根目录生成了打包后的文件：

npm包本地调试踩坑

在发布npm包之前我们最好在本地接对npm包进行调试一下，但是本地调试遇到了问题。

npm、yarn link报错

npm link

npm link不报错，使用时直接报错：

log文件也没有价值的信息，我猜测可能是node环境原因。
yarn link

使用时报错：
import { dirToZipFun } from 'D:/web_si/my_webDemo/my-projectFrame/zip-pack/lib/index.js'

最终使用 yalc 调试

全局安装: yarn global add yalc

发布一个本地npm包
在本地要发布为npm包的项目下执行：yalc publish
使用本地npm包
在本地需要使用的项目中执行： yalc add xxx
移除使用的本地npm包
在使用的项目中根目录下执行：yalc remove xxx
本地npm包更新

修改本地npm包后执行需要执行 yalc push 更新

本地项目使用本地npm包报错

文件500错误

在项目中引入刚 yalc发布的npm包后

先开始我以为是没导出num的错误，但是此时页面控制台报错如下

查看.vite下对应的 zip-pack文件发现确实有问题，于是删除 nodemoduls 下的 .vite 缓存文件，重新启动后解决。

但是发现此时的 ts 类型错误还是报错。

ts类型提示错误

直接打印 num，控制台成功输出：

开始我在纠结为什么一直标红这个提示，后来通过查询资料学习得知，如果是ts的npm包需要打包出类型文件： .d.ts，并且在 package中配置："types": "types/index.d.ts"

我这里先忽略，直接使用js，后续在用ts实践。

更新npm包后内容找不到

提示：请求的模块'/nod_modules/.vite/deps/zip-pack.js？v=714337c7'不提供名为“dirToZipFun”的导出

但是在此之前我修改了npm包是有导出 dirToZipFun这个方法的！

于是查看 nod_modules 下对应的文件发现也是最新代码！

尝试删除 .vite文件，重新执行 pnpm dev
发现还是报错！！！为什么？？？

此时，我想全部导出看看:
import * as zip from 'zip-pack'
输出发现只有 num、test，确实没有 dirToZipFun方法！

此时我懵了...

解决

经过踩坑后发现 yalc push 后项目中依赖包是更新了，但是项目中使用包不会更新！不知道为什么。

每次更新的时候，需要在引用的项目里先 remove 当前npm包，再 add 才可以！

如果有缓存，还需要删除 nodemoduls 下的 .vite 缓存文件，重新启动后就解决了。

解决方案2（待测试）有网友说一边修改代码后 yalc publish ，另一边 yalc update 直接更新（不指定包，而直接更新所有）

报错3

vue-router.mjs:3472 Error: Module "events" has been externalized for browser compatibility and cannot be accessed in client code. at Object.get 踩坑过程中突然出现这个报错，最后发现清除浏览器缓存、清除.vite缓存解决。