前端自定义组件+自建npm缓存服务器

sleeper012024-08-04 14:08

自建 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