记录第一次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中全局注册测试一下没问题啦
相关推荐
知识分享小能手4 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
webYin10 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
Gazer_S11 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
小薛博客14 小时前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins
用户516816614584116 小时前
Uncaught ReferenceError: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not defined
前端·vue.js
熊猫片沃子16 小时前
Vue 条件与循环渲染:v-if/v-else 与 v-for 的语法简介
前端·vue.js
拜无忧16 小时前
【教程】vue+vite+ts创建一个最新的高性能后台项目架构
vue.js·typescript·vite
蝶开三月17 小时前
从卡顿到丝滑:3 个实战场景教你搞定代码性能优化
javascript·vue.js·性能优化
知否灬知否17 小时前
VUE3中换行的指示箭头组件(根据屏幕大小进行调节)
前端·javascript·vue.js
学习3人组17 小时前
Vue 与 React 全面功能对比
前端·vue.js·react.js