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

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