npm 发布自己写的vue3的组件

1. 项目中要有package.json文件
   我是直接用命令行npm init vue@latest新建的项目
2. 编写插件代码并测试
3. vite.cofig文件添加build配置库模式lib,以确保将不想打包进库的依赖进行外部化处理，例如vue

import { fileURLToPath, URL } from 'node:url'
import { resolve } from "path"

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

// https://vitejs.dev/config/
export default defineConfig({
  ...
  build: {
    target: "modules",
    // 压缩
    minify: true,
    lib: {
      // 组件的入口文件
      entry: "./src/components/hl-alert/index.js",
      name: "hlAlert",
      fileName: 'hl-alert'
    },
    rollupOptions: {
      // 确保外部化处理不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
        dir: resolve(__dirname, "./dist/lib")
      },
    }
  }
})

4. package.json 配置 type 属性

// package.json
{
  ...
  "type": "module"
}

5. npm run build
6. package.json 入口文件指向打包后路径

// package.json
{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  ...
}

如果 package.json 不包含 "type": "module"，Vite 会生成不同的文件后缀名以兼容 Node.js。.js 会变为 .mjs 而 .cjs 会变为 .js 。

6. READEME.md文件编写
7. 控制台登录npm账号
8. package.json里的 private移除，执行npm publish
9. 如果要删除已发布的npm包，执行

npm unpublish 包名 --force

发布好的npm包可以点击这里查看： hl-alert npm发布的包