什么是私有npm仓库
npm install vue
对于这个命令并不陌生,这个是发布在npmjs上的一个框架VUE,但是我们在技术沉淀中,在前端越来越工程化时,很多时候,不满足于公共仓库中的一些插件和框架,甚至UI库。
在企业级开发中,我们常常会遇到我们需要建立自己的技术沉淀,自己的UI框架,自己的一些公共方法,自己的一些解决方案
再回顾一下我们的npm install ,我们是从npmjs或者yarn的公共仓库中拉取的,但是我们想自己开发一个库,不想把代码泄漏在公共仓库中,保证了技术私有化,代码安全性,私有方案不会暴露。
前置条件
一台企业内部的服务器,用于安装verdaccio,进行npm内部源架设
(verdaccio不仅仅是一个私有npm仓库,他还能连接互联网进行npm插件缓存)
verdaccio安装教程
https://verdaccio.org/zh-CN/docs/docker
常规安装插件
npm install myui --registry http://192.168.1.1:4873/
这个命令可以安装myui库并指定我们的私有仓库,这样就可以从这台服务器安装下来我们之前上传的myui组件库;但是我们常规的node前端项目,一般是执行的npm install,此时你会发现他会把myui在npmjs仓库中寻找(lock文件删除的情况),如果没有此插件,会拉取报错404,这个问题是npm在拉取依赖的时候会在npmjs源中寻找,这个是最大优先级,那么如何才能让我们在把项目迁移到其他同事的电脑也能丝滑的拉取我们的内部依赖呢?
如何让npm i也能去丝滑的拉取我们内部依赖和外部依赖
条件1
我们从npm官方文档中可以查询一下scope文档
https://npm.nodejs.cn/cli/v10/using-npm/scope
什么是scope呢?有时候我们会发现安装一些插件的时候
npm install @vue/compiler-sfc
这儿为什么有一个@vue,我们查阅一下文档,就知道,这个本质上就是把我们的插件分组了,也就是我们有一个私有化组,这样我们的库名称就算和公共的组件冲突了也不影响我们的安装,这个scope组还有一个好处就是我们可以分流拉取依赖。
此时我们在封装npm库的时候,库的名字需要是@xpp/myui
这样我们的组件库就叫@xpp/myui了,上传到我们的verdaccio
条件2
那么我们的前端项目如何去同时从内部库和npmjs拉取依赖呢?
这儿需要了解一下.npmrc文件和.yarnrc文件
这两个文件本质的功能是一样的,就是覆盖我们的npm config和yarn config
我们在上一步已经上传了@xpp/myui库
这时我们在项目根目录添加.npmrc和.yarnrc文件
.npmrc
@xpp:registry=http://192.168.1.1:4873/
.yarnrc
xpp "http://192.168.1.1:4873/"
注意此处写法略有不同
这个功能是@xpp这个组的镜像源默认从我们的私有仓库去拉取
这时候再执行
npm install @xpp/myui
那么他就会自动从我们的私有化仓库中拉取依赖了
如果依赖里面有@xpp/myui再去执行
npm i / yarn
效果是一样的,我们公共资源的包会从npmjs中去拉取,那我们私有的库就会自动去私有库拉取