- 项目中要有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 会变为 .mjs 而 .cjs 会变为 .js 。
- READEME.md文件编写
- 控制台登录npm账号
- package.json里的 private移除，执行
npm publish - 如果要删除已发布的npm包，执行
npm unpublish 包名 --force
发布好的npm包可以点击这里查看： hl-alert npm发布的包
