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

背景

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

主要问题是,外包公司建有自己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 ,重新安装包

重新运行

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

相关推荐
奔跑的web.5 小时前
TypeScript 装饰器入门核心用法
前端·javascript·vue.js·typescript
集成显卡5 小时前
Lucide Icons:一套现代、轻量且可定制的 SVG 图标库
前端·ui·图标库·lucide
pas1366 小时前
37-mini-vue 解析插值
前端·javascript·vue.js
十里-7 小时前
vue.js 2前端开发的项目通过electron打包成exe
前端·vue.js·electron
雨季6667 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart
小北方城市网8 小时前
Redis 分布式锁高可用实现:从原理到生产级落地
java·前端·javascript·spring boot·redis·分布式·wpf
console.log('npc')8 小时前
vue2 使用高德接口查询天气
前端·vue.js
2401_892000528 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加支出实现
前端·javascript·flutter
天马37988 小时前
Canvas 倾斜矩形绘制波浪效果
开发语言·前端·javascript
天天向上10248 小时前
vue3 实现el-table 部分行不让勾选
前端·javascript·vue.js