npm__0">自建 npm 缓存服务
- 安装 verdaccio
npm install -global verdaccio
- 启动 verdaccio
verdaccio
默认情况下,会在本地启动一个服务 http://localhost:4873/
开发公共组件
- 在你的工程目录下执行
npm init -y
,相关配置自己定义 - index.ts 中开发组件逻辑
class DateUtils{constructor(){}formatDate(){console.log(new Date());}
}
export default DateUtils;
- 配置 package.json 注意,每次有更新的时候,需要来这边该版本号
{"name": "cn.gbits.web.dateutils","version": "1.0.7","description": "日期工具类","main": "index.ts","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}
- 将组件发布到 npm 仓库中
npm publish --registry http://localhost:4873/
使用组件
- 【可选】初始化一个 vite 工程
npm create vite@latest my-vue-app -- --template vue
- 在工程下执行安装组件命令
npm i --registry=http://localhost:4873 cn.gbits.web.dateutils
- 使用组件,测试时可以直接在 App.vue中
import DateUtils from 'cn.gbits.web.dateutils';
let dateutils = new DateUtils();
dateutils.formatDate();
组件更新
- 更新完组件逻辑之后,在组件的 package.json 中调整版本号,然后发布
npm publish --registry http://localhost:4873/
- 在使用的工程中执行检查更新的命令
npm-check-updates --registry=http://localhost:4873 -u
注意,如果没有安装过 npm-check-updates ,需要先安装
npm install -g npm-check-updates
- 执行更新组件的命令
npm i --registry=http://localhost:4873