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 會變?yōu)?.mjs 而 .cjs 會變?yōu)?.js 。

6. READEME.md文件編寫
7. 控制臺登錄npm賬號
8. package.json里的 private移除，執(zhí)行npm publish
9. 如果要刪除已發(fā)布的npm包，執(zhí)行

npm unpublish 包名 --force

發(fā)布好的npm包可以點擊這里查看： hl-alert npm發(fā)布的包