Verdaccio---配置属于自己的npm私有库&简单发布npm私有包的流程

最新推荐文章于 2024-09-27 15:38:14 发布

不知名It水手

最新推荐文章于 2024-09-27 15:38:14 发布

阅读量2.2k

点赞数

文章标签： npm 前端 node.js

本文链接：https://blog.csdn.net/ITyiy/article/details/132445854

版权

这里写自定义目录标题

安装

 1、npm install -g verdaccio  安装

效果图在这里插入图片描述

运行

 2、verdaccio    运行

在这里插入图片描述

启动后打开 http://localhost:4873/，其中4873是默认端口
在这里插入图片描述

命令行参数

   npm adduser --registry http://localhost:4873/  //创建用户
   npm login --registry http://localhost:4873/      //登录
   npm publish --registry http://localhost:4873/    //发布命令   
   npm unpublish [packageName] --registry http://localhost:4873 --force   //删除版本

搭建自己的npm包（vite+vue3+ts）

1、先使用 npm create vite@latest  然后创建属于自己的一个vue3项目

项目目录
在这里插入图片描述

1、创建了一个额外的packages文件夹用来存放ui组件库、目录随意只需要打包配置的时候对应上就好了
2、packages下主要需要两个文件： index.ts 用来导出组件；xxx则是对应的组件名称；(和vue3组件导出来、注册类似)；多了一个style是准备作为全局样式文件的；

1、index.ts文件内容

import uTitle from "./utitle/index.vue";
import "./style/index.scss";

import { App } from "vue";
const Components = {
  uTitle,
};
const registerComponents = (app: App<Element>) => {
  Object.keys(Components).forEach((key: any) => {
    app.component(key, (Components as any)[key]);
  });
};
export { uTitle };  //到时候提供局部引入
export default registerComponents;  //默认导出

2、utitle/index.vue内容（就是实现自定义标题样式的一个功能）

<template>
 <div class="u-title">
    <i class="icon"></i>
    <em>{{ title }}</em>
  </div>
</template>
<script lang="ts" setup>
interface PropsType {
  title?: string;
}
const props = withDefaults(defineProps<PropsType>(), {
  title: "默认标题",
});
console.log(props);
</script>
<style scoped lang="scss">
@import "../style/index.scss";
</style>

3、配置打包文件vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      external: ["vue"], //将vue作为外部项目引入
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
    //库发布构建
    lib: {
      entry: "./packages/index.ts", 
      name: "ums-ui",
    },
  },
});

4、执行打包命令 npm run build
在这里插入图片描述
5、配置package.json文件

{
  "name": "ums-ui",
  "private": false,
  "version": "0.0.8",
  "type": "module",
  "main": "./dist/ums-ui.js",//包的主要入口点
  "module": "./dist/ums-ui.umd.cjs",//定义 npm 包的 ESM 规范的入口文件，browser 环境和 node 环境均可使用
  "description": "这是第一次的测试搭建自己的依赖ui库",
  "author":"yefan",
  "exports": {
    ".": {
      "import": "./dist/ums-ui.js",
      "require": "./dist/ums-ui.umd.cjs"
    },
    "./*": "./*"
  },
  "files": [
    "dist/*"
  ],
  "style": "./dist/style.css",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.52.1",
    "sass-loader": "^13.0.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

6、发布啦~
在这里插入图片描述
7、刷新一下
8、新建一个项目安装我们刚刚上传的依赖包把！！
1、 npm i ums-ui@latest --registry http://localhost:4873 因为在本地所以verdaccio需要一直处于开启的状态(一些发布到服务器上的配置还没开始)
2、全局引入在这里插入图片描述