公司级前端组件共享协作方式 - NPM私有源-verdaccio搭建

为什么要共享组件? 都2019年了...还ctrl+c > ctrl+v,多处维护吗?
为什么要搭私有源? 公司代码扔到github/npm官方源上不好吧...有的小伙伴cnpm,有的小伙伴npm ,安装有的能安装上有的安装不上吧...打包机/docker 每次npm install 慢不慢?

怎么才能优雅的开发、使用、共享 前端组件、前端代码

场景: A-git仓库里面有个 日历组件,可以给B-git仓库使用
git子仓库 : 没有版本,更新麻烦,要加配置
github + npm公有源: 公司代码扔到外网去,有暴露敏感信息的风险,且npm一旦发布就只能通过 邮件方式撤销
gitlab+ npm私有源:gitlab是内网自己的,还有个能发布的私有源,对于持续集成方面,还有更棒的优势,对比一下,就立判高下了

为什么要用私有源

  1. 加速公有npm包安装速度
  2. 避免本地 npm install 指向源 还要翻墙处理,避免cnpm等其他源拉取npm包不及时的问题
  3. 私有源会把已经使用的npm包缓存下来,提升个人本地/打包环境npm包的安装速度
  4. 会先从官方源 获取再缓存在私有源服务器上,私有源始终走私有源储存
  5. 私有源包含一些 自主开发的公共包,可以在多个 git仓库 项目中 通过npm的方式使用
  6. 把公共代码上传到 私有源,而不是上传到github,避免公司代码及敏感信息的暴露,如果有开源需求,再走开源流程
  7. A仓库 封装了一个 video组件,想给B仓库使用。那就可以制作一个 video组件仓库,然后发布到 私有源上。A和B仓库使用的时候就 npm install 组件库,let api = require('组件库') 啦~ 这个步骤和 发公有npm包是一模一样的,只是发的位置不一样而已。

准备工作

  1. https://verdaccio.org/docs/zh-CN/authentification按照这个一步一步来就行
  2. 如果是本地电脑 不需要改 verdaccio的 config.yaml配置文件,如果是服务器部署,那你需要改 config.yaml的配置
  3. 我们这里按服务器部署为例子
  4. 你需要先安装上 node npm pm2
  5. npm install -g verdaccio
  6. 创建一个 非root的账户
  7. 在此账户下 执行verdaccio,且找到 config.yaml文件,
  8. vim 修改 config.yaml,新增一行,保存
listen:
  0.0.0.0:4873              # listen on all addresses (INADDR_ANY)
  1. verdaccio 跑一下,显示一下内容就正常了
齐活~

日常使用 -- 切换npm源

  1. 打开命令行工具
  2. 安装npm切换源的快捷工具 npm/nrm: npm install -g nrm
  3. 输入命令: nrm ls
  4. 输入命令: nrm add 源名字 源地址
  5. 输入命令: nrm use 源名字
  6. 输入命令: nrm ls
  7. 当时源指向哪里,前面就有个小星星
nrm切换私有源

日常使用 -- 添加私有源用户

  1. 确保你的npm源指向为 你的私有源

  2. 输入命令: npm adduser

  3. 输入username: 邮箱前缀

  4. 输入password: 自定义密码

  5. 输入Email:邮箱

  6. 添加私有源用户
  7. 注册好账号,才能上传 npm包

  8. 对于开发者,除了注册账号是根据 私有源创建的,和官方源账号不同,其余操作都是相同的比如:在你项目的根目录,输入 npm publish ,提示发布成功/失败等

  9. 对于使用者,使用的时候,npm源 指向 私有源 npm install 包名 即可 ,和正常使用无任何差异

结束

至此 就都搞定啦。
无论团队的开发者/使用者来说,只要把 nrm的源指向为 自己的私有源就OK了。
verdaccio通过代理的形式,把你的私有包 和 官方包 切分开。


verdaccio的代理模式

如果有发布了包到私有源,你的私有源web页 就是这样的~


私有源web页

私有源详情页
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,099评论 18 139
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,358评论 6 343
  • 近来自己的懒癌又发作了,最明显的表现就是越来越疏于对战友作业的点评。今天反思自己,发现自己不仅不点评,而且还没了内...
    俞燕文阅读 179评论 0 1
  • J2SE篇幅 1.Java里头的多态是什么意思? 首先必须要有继承或者实现,其次是要有方法的重写,最后一个是父类引...
    tgcity阅读 754评论 0 0
  • 文/归海无期 浮世三千百态生, 春风化雨润华荣。 闲话花边无捆绑, 多想, 何来众口铄金声。 颠倒是非强辩解, 成...
    归海无期阅读 176评论 0 0