记录第一次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

{
  "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中全局注册测试一下没问题啦