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

背景

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

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

重新运行

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

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试