记录第一次npm发包!!!

给大家讲讲如何将自己写的组件打包发布到npm

注册一个自己npm账号

登录npm官网注册 地址:npm官网

有账号的直接登录,没有账号就Create Account 跟着步骤一直下一步就好了!!

为什么要发布到npm呢,主要是为了满足公司的场景业务去封装一些经常出现的组件比如表单组件,表格组件,我们在开发的时候直接从项目npm i安装下来就行,不仅能提升代码复用率,还能提升我们开发人员的效率

开始搭建

这里从搭建项目开始,我用的是vite来搭建的vue3项目

npm create vite@latest

跟着官网来好吧-> Vite 官方中文文档

搭建好之后我们在src目录下去创建一个packages文件夹,这个文件夹是用来存放你写的组件的

package目录下需要有一个index文件,这里模拟了一个简单的例子用来导出写好的组件

install方法是内置的,当调用app.use(xxxUI)时,会调用install方法进行全局注册

配置vite.config配置文件

主要是配置一下打包的入口文件

执行打包

dist目录下文件

配置package.json

ruby 复制代码
{
  "name": "c-teamui", // 你的包名,不要和已有的组件库有类似或者重复的名字避免发布失败
  "private": false, // 这里默认为true要设置为false
  "version": "1.0.0", // 管理你的版本号
  "description": "component", // 你的描述
  // main和module都需要配置,用来做兼容环境umd模式,和esm,dist目录打包出来的位置
  "main": "dist/teamui.umd.js",
  "module": "dist/teamui.es.js",
  "types": "dist/index.d.ts",
  "files": [ // 发布包的时候用到的文件目录
    "dist",
    "src"
  ],
  "keywords": [ // 关键词描述
    "vue3",
    "element-plus",
    "component",
    "ui",
    "teamui"
  ],
  "author": "chen",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "你的组件库代码地址"
  },
  "bugs": {
    "url": "你的组件库代码地址"
  },
  "homepage": "你的组件库代码地址",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "c-teamui": "^1.0.0",
    "element-plus": "^2.10.3",
    "vue": ">=3.0.0"
  },
  "devDependencies": {
    "@types/node": "^24.0.10",
    "@vitejs/plugin-vue": "^4.6.2",
    "@vue/tsconfig": "^0.7.0",
    "sass": "^1.89.2",
    "sass-loader": "^16.0.5",
    "typescript": "~5.8.3",
    "vite": "^5.1.4",
    "vite-plugin-dts": "^4.5.4",
    "vue-tsc": "^2.2.10"
  },
  // 这里是你的组件库需要用到的依赖
  "peerDependencies": {
    "element-plus": "^2.10.3",
    "vue": ">=3.0.0"
  }
}

发布npm

  • 要把镜像源改成官网的 npm config set registry registry.npmjs.org/
  • 命令行输入npm login,按照提示给的步骤输入npm的账号密码,然后会发送验证码到你的邮箱输入然后就可以了
  • 最终执行npm publish
  • 完成发布,可以到npm自己个人主页看看
  • 可以到自己项目中执行npm i 包名,然后到main.js中全局注册测试一下没问题啦
相关推荐
武昌库里写JAVA5 分钟前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
lalalalalalalala1 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy1 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
久爱@勿忘2 小时前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen02112 小时前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依2 小时前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
行云&流水2 小时前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
弗锐土豆3 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
1undefined23 小时前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
wangpq3 小时前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js