前言

最近公司需要根据现有的公用组件搭建一套私有组件库，方便其他项目使用，然后经过一系列尝试和走了许多坑，终于搭建成功了，这里记录下搭建步骤，希望对你有些帮助。

为什么选择verdaccio

由于公司组件库越来越多，导致每次去基础库里面cv组件特别麻烦，特别是还有这些组件有一些其他的依赖方法等，所以搭建组件库通过以包引入的方式是必然的。

• npm 是我们项目中常用的包管理，但是他是开源的，而公司项目不能放在开源的上面(要么就土豪玩家，付费)，所以这里pass掉；
• git+ssh 引入GitHub地址，但是这种的问题是：github服务不稳定，不利于调试等问题，所以也pass掉；
• sinopia 这个也是一个比较好的私有化组件库管理工具，但是他的上次维护时间是2015年。。。所以这里也pass掉
• verdaccio 这个是我们推荐使用的工具，据说是由于sinopia不更新了，其他开发者fork出来然后维护的。

搭建步骤

1.安装node(如已安装则跳过)

去nodejs.org/en/上安装，一直下一步就完事了，然后查看node是否安装成功，出现版本号就是安装成功

2.安装verdaccio（此步在服务器上）

安装输入命令：

npm i -g verdaccio 

安装成功后输入命令：

verdaccio 

出现下列信息即安装成功，第一行是verdaccio配置目录，最后一行是verdaccio访问地址。 具体配置项可以看verdaccio,感觉自己需要去配置。

访问后出现下面样子，组件库就搭建起来了：

然后就是配置forever等，这里省略掉，有兴趣可以在服务器上试试。

部署组件库步骤

npm配置

安装nrm: nrm是npm源的管理工具，通过这个可以快速的切换npm的源，安装输入命令：

npm i -g nrm 

常用命令：

• 查看所有源：

• 新增源：

nrm add registry http://registry.npm.frp.trmap.cn

registry:源的名字
http://registry.npm.frp.trmap.cn：源的地址

例如：
nrm add local http://localhost:4837 

• 删除源：

nrm del <registry> 
registry：源的名字
例如：
nrm del local 

• 切换源：

nrm use <registry> 
registry：源的名字
例如：
nrm use local 

配置npm用户

1.切换npm源

nrm use local 

2.登录

npm adduser
//输入：
>userName:admin
>password:123456
>email:按自己的填 

3.添加用户

验证是否登录成功

npm who i am

出现admin即登录成功 

部署组件库

打开组件库：

1.更新version

输入命令，根据自己的需要，输入其中一种更新版本号

npm version patch // 迭代patch版本

npm version minor // 迭代minor版本 

2.打包

npm run build 

3.发布

npm publish 

4.验证

打开verdaccio启动的服务器地址，查看组件库及版本号一致，一致则发布成功。

使用组件库

1.切换npm源

nrm use local 

2.安装组件

npm i -S <common>
common：组件库名字 

这样即可正常使用组件库。

调试组件库

1.准备工作

切换源，登录，具体看前面

2.使用yarn

这里使用yarn,因为可以使用yarn link去链接到组件库，实现本地开发调试,使用命令：

npm i -g yarn 

3.组件库内

使用命令：

yarn build 
or
npm run build

yarn link

如果组件库有修改，那就重新build下

调试完成
yarn unlink 关闭链接即可 

4.项目内

使用命令：

yarn link <register>
正常启动即可 

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享