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