一次接手外包公司前端代码运行踩坑过程

背景

外包项目结束后,代码交给我公司需要存起来,因为后期还会有迭代开发任务,以后的事情肯定是我们公司内部来维护了,那就需要把代码运行起来,这过程中运行前端项目遇到的几个问题和处理过程简单记录下。

主要问题是,外包公司建有自己UI组件库,所有里面很多包是他们npm私有仓库的托管,我们无法访问到他们的私服仓库,思路是从 node_modules中 把私有包迁移到我们公司自己内网仓库

代码

我拿到的两个项目代码,共有两个项目代码,下面这是web的代码,处理思路是一样的

第一步运行看是否正常

因为观察到项目中有 node_modules ,因为外包公司是把整个项目文件都拷贝过来了,里面还包括 .git 目录,如果能直接运行起来,那万事大吉。

显示看下图,是运行报错的,缺少包和相关命令,所以我们还是得自己来重新安装 node_modules ,但是问题是私有包如何解决?

第二次尝试重新安装包

我们尝试重新直接安装包,安装失败,因为访问不到私有仓库域名

正式迁移包

我们公司也是用verdaccio搭建过私有仓库的,所以要把外包项目的私有包上传到我们公司内部

  • package.json中找到私有包

  • 拷贝私有包成独立项目

  • 推送到我们公司内部verdaccio仓库(没有私有仓库就传到npm上也一样,但是外包公司自己的包还是别外传)

  • 项目中配置.npmrc锁定包来源

  • 锁定项目中版本号

package.json中找到私有包

通过判定看到下图的包在 www.npmjs.com/ 中查找不到,所以下面这些 @iios前缀的包是需要迁移到包

拷贝私有包成独立项目

我们从 node_modules 中拷贝出来这些文件夹

观察到所有包都是完整的,都有package.json文件

推送到我们公司内部verdaccio仓库

这里这么多包,如果简化可以使用lerna或者shell脚本来统一处理版本问题,但是我们简化就按个包执行推送命令即可

后续所有包同理操作即可

后面就不一一列举了,检查verdaccio是否推送成功

项目中配置.npmrc锁定包来源

现在私有包都上传完成了,所以需要回到主项目,安装包就行了,但是因为有私有包,于是需要执行 .npmrc 规定各种包的安装路径

锁定项目中版本号

这一步是我习惯,在package.json中,版本号固定写死,而不是 ^前缀开头自动更新此版本

而且更重要的是,外包项目已经在线上运行,万一以后要三方包变化导致一些莫名其妙问题就很麻烦,锁定版本号是非常有必要的,才能以后很久之后打开发布代码也是没有问题的

删除node_modules 和 yarn.lock ,重新安装包

重新运行

一切都搞完了,重新运行成功

相关推荐
IT_陈寒2 分钟前
Vite动态导入差点让我秃头,原来问题出在这
前端·人工智能·后端
白泽_hunter37 分钟前
项目里最常见的 5 个 this 指向坑:从规则到实战彻底讲透
前端
宿67442 分钟前
vue3-pinia
前端·vue.js
白泽_hunter1 小时前
搞懂 JS 数据类型:从 typeof 到手写完整类型判断,一张图理清
前端
日光倾1 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
自学it的攻城狮2 小时前
elpis-core ,koa实现的系统底座, 沉淀80% 的通用能力,剩下20% 用于定制化开发
前端
CappuccinoRose2 小时前
模块化体系
前端·import·export·es modules
AIDANHANG3 小时前
放开靠时间戳对日志前先核请求ID跨服务传播与采样关联
前端·人工智能
半生过往4 小时前
前端学 Java 课程笔记
java·前端·笔记
广州华水科技5 小时前
2026年单北斗GNSS变形监测系统推荐,破解水库安全监测难题
前端