企业CNPM私有仓库、组件库实现方案

一、为什么要使用组件抽离,外部安装的方法,多处调用的方法?

     方便快捷,面向未来式开发,提高效率,避免冗余,提升项目质量,多项目可以同时使用,不用多次重复开发。在团队内部搭建私有仓库,方便团队内部成员代码的共用,不写重复而有无意义的代码。

二、组件库的生态圈需要哪些?

(1)vue-cli 3.x
(2)vue + webpack
(3)npm 包管理工具
(4)vue组件库、vue组件库文档
 
通过配置webpack,npm publish 发布

三、npm包管理工具选择,开源或者私有?

(1)  开源:
1-1.直接使用官方npm仓库,免费托管在官方的服务器上
1-2.把项目发布到npm社区的仓库,开源交流

(2)  私有:
2-1. 私有包托管在内部服务器或者单独的服务器上;
2-2. 可以同步整个官方仓库,也可以只同步需要的;
2-3. 下载的时候,可以让公共包走公共仓库,私有包走私有仓库;
2-4. 可以缓存下载过的包,对于下载,发布,有对应的权限管理。

四、为什么要实现私有化?

npm 是 Node 的模块管理器, 功能非常强大. npm 安装公有模块非常简单, 直接一个命令 npm install 模块名字 可以了, 之所以可以这样安装, 是因为模块直接发布在 npm 的公有仓库里的 ( npm publish ) , npm 直接从仓库通过网络获取到就好. 但是, 有时候我们不希望把代码直接发布到公有仓库中, 对于企业来说, 内部的非开源模块肯定是不需要发布到公有仓库中的. 所以我们就要寻找一种可以让 npm 安装私有模块的办法。

五、实现是私有库的方法:

(1)购买付费私有仓库(最简单快捷,每月7美元)
(2)搭建npm仓库(独立服务器,需要构成成本,和额外的服务器机器)
(3)利用npm的安装机制和git仓库( npm instal 支持 npm install <git remote url> 方式,注意:必须确保安装这个私有模块的机器有访问这个私有模块的 git 仓库的权限)
(4)gitlab 私有模块方案( 经测试多次安装报错,某些不同的代码会影响安装 )
发布私有模块只需直接把代码 push 到 gitlab 仓库, 而安装私有模块的命令git+ssh://[email protected]:Username/Repository#{branch|tag} . 可以通过#后面的branch 和 tag 来进行版本控制.


六、如何分离打包组件库更新到npm包管理仓库?

1. 单独组件库模式开发下,选择webpack配置组件打包环境
参考源码:https://github.com/frankxjkuang/custom-ui 
优点:配置简单、开发快捷、可扩展性高、可单独分离组件库到git仓库
缺点:不能在同项目下同时开发组件和文档、需要分离项目开发

2. 基于VUE-CLI3开发
参考源码:https://github.com/VV-UI/VV-UI
优点:配置完善、多人协作开发、扩展性高、可同时开发和发布文档和组件库
缺点:发布npm包管理配置难度较大、更新组件库不好分离组件库和npm包到git仓库

3.开发流程:(与项目开发流程基本一致)
构建,开发,测试,打包压缩、上线、更新


七、局域网如何实现公司内部NPM包管理库服务器搭建?

1.采用CNPM淘宝镜像搭建科盾内部私有仓库服务器(推荐)

(1)环境搭建参考文档:https://blog.csdn.net/zjwengyidong/article/details/73274864
(2)需要环境:node 、npm、PM2进程管理器、mysql(推荐)、稍大存储空间的服务器
(3)已部署测试可以通过:


2.通过verdaccio搭建( 轻量级的私有npm代理注册工具,Sinopia已经淘汰,故选择verdaccio )
(1)环境搭建参考文档:https://www.cnblogs.com/tugenhua0707/p/9163167.html
(2)环境部署:node、npm 、verdaccio、pm2
(3)已部署测试可通过:

  

3.Git仓库当作内部私有的NPM库(还未测试,需要用公司gitlib测试)


八、组件库文档DEMO展示

(1)前端组件库文档DEMO演示:
   https://riverscoder.github.io/npm-sources/dist/index.html

(2)前端组件库源码CODE:
    https://github.com/RiversCoder/npm-sources/tree/gh-pages

(3)前端npm组件包:
    https://www.npmjs.com/package/kedun-ui


十、参考资料:

1.https://sevody.github.io/2016/12/02/implement-private-npm-module-through-gitlab/
2.https://www.jianshu.com/p/3724b081e8e8
3.https://github.com/VV-UI/VV-UI
4.https://juejin.im/post/5a386b0d6fb9a0450f220c59
5.https://www.jianshu.com/p/93d43911f91e
6.https://juejin.im/entry/59264bf7a0bb9f0057c2298d
7.https://github.com/frankxjkuang/custom-ui
8.https://my.oschina.net/qiangdada/blog/1637920
9.https://www.jianshu.com/p/43f02ca12657
10.https://github.com/iview/iview
11.https://github.com/ElemeFE/element
12.https://github.com/jaywcjlove/handbook/blob/master/CentOS/在5分钟内搭建企业内部私有npm仓库.md#安装

猜你喜欢

转载自blog.csdn.net/WU5229485/article/details/82860123