发布组件到NPM

1. 配置打包文件

{
  "name": "vxx-ui",
  "version": "1.0.4",
  "main": "index.ts",
  "scripts": {
    "build": "vite build",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },
  "files": [
    "es",
    "lib"
  ],
  "repository": {
    "type": "git",
    
  },
  "keywords": [
    "vxx-ui",
    "vue3组件库"
  ],
  "publishConfig": {
    
  },
  "author": "xuhl",
  "license": "MIT",
  "description": "",
  "typings": "lib/index.d.ts",
  "dependencies": {
    
  }
}

这里我们选择打包cjs(CommonJS)和esm(ESModule)两种形式,cjs模式主要用于服务端引用(ssr),而esm就是我们现在经常使用的方式，它本身自带treeShaking而不需要额外配置按需引入(前提是你将模块分别导出)，非常好用~

pkg.module
我们组件库默认入口文件是传统的CommonJS模块，但是如果你的环境支持ESModule的话，构建工具会优先使用我们的module入口
pkg.files
files是指我们需要发布到npm上的目录，因为不可能components下的所有目录都被发布上去

开始发布

1. 执行pnpm publish --access public

pnpm publish --access public

2. 输入NPM 用户名密码 npm adduser

提示

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : your-package

进入绑定邮箱，查看验证码

3. 提示有代码未提交， 暂存或提交继续执行 pnpm publish --access public

4. 每次更改代码 让版本号增加

首先要将我们代码提交到git仓库，不然pnpm发布无法通过，后面每次发版记得在对应包下执行 pnpm version patch你就会发现这个包的版本号patch(版本号第三个数) +1 了，同样的 pnpm version major major和 pnpm version minor 分别对应版本号的第一和第二位增加。

 pnpm version patch

5. 确保代码没有变更了， 执行发布

pnpm publish --access public