- 項目中要有package.json文件
我是直接用命令行npm init vue@latest新建的項目 - 編寫插件代碼并測試
- 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")
},
}
}
})
- package.json 配置 type 屬性
// package.json
{
...
"type": "module"
}
- npm run build
- 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 疮胖。
- READEME.md文件編寫
- 控制臺登錄npm賬號
- package.json里的 private移除，執(zhí)行
npm publish - 如果要刪除已發(fā)布的npm包站辉，執(zhí)行
npm unpublish 包名 --force
發(fā)布好的npm包可以點擊這里查看： hl-alert npm發(fā)布的包
