npm私有仓库搭建
npm 是日常前端开发过程中离不开的包管理工具，可以帮助我们快速安装 npm 仓库中优秀的第三方代码包，它的出现极大地促进了 Node 及前端生态的发展繁荣。
那么问题来了，为什么要搭建私有 npm 仓库呢？
在日常工作中，大多数时候我们会使用 NPM 共有仓库中的优秀开源代码包，但还是会有一些不能够开源的代码封装和工具，或者对第三方的开源代码做定制化修改和扩展，这些代码包需要在组织内部进行管理和共享，不能够上传到 NPM 共有仓库中。因此我们需要搭建 NPM 私有仓库来满足上述需要。
搭建自己的私有仓库，同时还能够提升 NPM 包的安装下载速度和源的稳定性，比如大家常用的淘宝镜像源，本质上也是私有仓库。公司搭建自己的 NPM 仓库，就可以为自己的员工提供更快速稳定的工具包共享下载平台。
npm私有仓库搭建流程
1、全局安装verdaccio，verdaccio官网
注意：1、verdaccio是基于node开发，所以必须在node环境下；2、verdaccio默认只能本地访问，如需要对外开放端口需要在config.yaml添加监听端口，listen: 0.0.0.0:4873，对外开放4873端口
// 安装verdaccio
npm i verdaccio -g
// 启动verdaccio
verdaccio
// 打开verdaccio
http://localhost:4873
2、pm2守护verdaccio进程
利用第一种方法虽然可以正常启动和使用verdaccio，但不建议用这种方式启动verdaccio，可以用pm2来对verdaccio进程进行托管启动。
安装pm2并使用pm2启动verdaccio，使用pm2托管的进程可以保证进程永远是活着的，尝试通过kill -9去杀verdaccio的进程发现杀了之后又自动启起来。推荐使用此种方式启动verdaccio.
// 安装pm2
npm i pm2 -g
// 使用pm2启动verdaccio
pm2 start verdaccio
// 打开verdaccio
http://localhost:4873
3、确保在npm官网注册过账号，后续上传包需要用到。如未注册请先注册，npm官网
4、将用户名密码添加到verdaccio
// 添加用户
npm adduser --registry + 私库地址
// 依次输入在npm官网注册的用户、密码和邮箱即可。类似如下：
Username: lk
Password:
Email: (this IS public) lk@qq.com
5、开发具体组件，组件使用vue3 + vite + TypeScript开发，开发完成在src下新建index.js统一暴露组件
// src/index.js
import CcscitShardUpload from './components/CcscitShardUpload.vue';
// 导出组件
export default CcscitShardUpload;
const components = [CcscitShardUpload];
const install = function (App, options) {
components.forEach((component) => {
App.component(component.name, component);
});
};
// 批量的引入*
export default {
install
}
// vite.config.ts和package.json需添加如下配置：
// vite.config.ts
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.js'),
name: 'CcscitShardUpload'
// fileName: (format) => `ccscit-shard-upload.${format}.js`
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue'
}
}
}
}
// package.json
"private": false,
"files": [
"dist"
],
"main": "./dist/ccscit-shard-upload.umd.js",
"module": "./dist/ccscit-shard-upload.es.js",
"exports": {
".": {
"import": "./dist/ccscit-shard-upload.es.js",
"require": "./dist/ccscit-shard-upload.umd.js"
}
},
"publishConfig": {
"registry": "npm私库地址"
},
6、发布组件，发布成功刷新私库管理页即可看到组件。
// 发布组件
npm publish
// 删除组件
npm unpublish 私库地址 --force
(1)、由于每次发布都需在package.json修改组件版本号，建议：大版本更新修改版本号第一位数组，
小版本更新修改版本号第二位数字，日常优化及bug修复修改版本号第三位数字。
(2)、建议在组件里添加CHANGELOG.md文件，版本更新时可以在里面添加当前更新的具体内容。
项目中使用私库组件
1、首先查看当前npm源是否是npm私库源，如不是先切换npm源为私库源
// 查看npm源
npm config get registry
// 修改npm源
npm config set registry 私库地址
2、安装组件
npm install 组件名
