我正在参加「掘金·启航计划」

前言

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

为什么选择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.项目内