之前，我爱模板网已经介绍过几篇关于vue插件开发的文章：
vue-cli 3.x、vue-cli 4.x将项目改成插件并发布到npm
之前都是用vue-cli脚手架开发的，这次是基于vite4.4脚手架开发的，其实都一样，就是打包配置不一样。
1、初始化框架
npm create vite@latest
然后选择相关配置，这里是vue3+JavaScript，初始化好之后，根据提示安装依赖等。
2、修改vite.config.js，注释很详细，就不多讲了：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
// 配置路径别名
alias: {
'@': path.resolve(__dirname,'./src')
},
},
// 构建为库
build: {
lib: { // 构建为库。如果指定了 build.lib，build.cssCodeSplit 会默认为 false。
// __dirname的值是vite.config.js文件所在目录
entry: resolve(__dirname, './src/plugin/index.js'), // entry是必需的，因为库不能使用HTML作为入口。
name: 'HxzAudioPlayer', // 暴露的全局变量
fileName: 'hxz-audio-player' // 输出的包文件名，默认是package.json的name选项
},
rollupOptions: { // 自定义底层的Rollup打包配置
// https://rollupjs.org/configuration-options/
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue'],
output: {
// format: 'es', // 默认es，可选 'amd' 'cjs' 'es' 'iife' 'umd' 'system'
exports: 'named', // https://rollupjs.org/configuration-options/#output-exports
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 https://cn.rollupjs.org/configuration-options/#output-globals
globals: {
vue: 'Vue',
// 'vue-router': 'VueRouter', // 引入vue-router全局变量，否则router.push将无法使用
}
}
},
/** 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。
默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。
注意，在 lib 模式下使用 'es' 时，build.minify 选项不会缩减空格，因为会移除掉 pure 标注，导致破坏 tree-shaking。
当设置为 'terser' 时必须先安装 Terser。（yarn add terser -D）
*/
minify: 'terser', // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
terserOptions: { // 在打包代码时移除 console、debugger 和 注释
compress: {
/* (default: false) -- Pass true to discard calls to console.* functions.
If you wish to drop a specific function call such as console.info and/or
retain side effects from function arguments after dropping the function
call then use pure_funcs instead
*/
drop_console: true, // 生产环境时移除console
drop_debugger: true
},
format: {
comments: false // 删除注释comments
}
}
}
})注意下：build.lib.entry，这里指向的是插件，并非常规的main.js
3、在 src 目录下新建plugin文件夹用来放置待开发的插件
4、在 src/plugin 下新建 hxz-audio-player.vue，这是插件主体文件，内容随便写了：
<template>
<div>
HxzAudioPlayer，传递过来的url：{{params.url}}<br>
props传递过来的msg：{{msg}}
</div>
</template>
<script setup>
import { inject } from 'vue';
// 接受初始化传递过来的参数
const params = inject('params')
const props = defineProps({
msg: {
type: String,
default: ''
}
})
</script>
<script>
export default {
name: 'HxzAudioPlayer'
}
</script>
<style lang="scss" scoped>
div{
color: red;
}
</style>5、在 src/plugin 下新建 index.js，这是插件打包入口文件，代码如下：
import HxzAudioPlayerComponent from './hxz-audio-player.vue'
export const install = (app, options) => {
// 注册全局函数
app.config.globalProperties.$vue3Plugin = (str) => {
return '全局函数打印的内容：' + str
}
// 注册组件
app.component(HxzAudioPlayerComponent.name, HxzAudioPlayerComponent)
// 注册时，传递给插件的参数
app.provide('params', options)
}
// 导出组件对象，供局部导入使用
export const HxzAudioPlayer = HxzAudioPlayerComponent
// 导出一个包含组件和install方法，供全局导入使用
export default {
HxzAudioPlayer,
install
}6、此时运行
npm run build
会在dist下生成打包后的文件：
7、在main.js全局注册插件，用来测试（当然也可以局部使用，详见：编写一个vue3插件并发布它）：
import App from './App.vue'
import { createApp } from 'vue'
import HxzAudioPlayer from '../dist/hxz-audio-player'
import '../dist/style.css'
const app = createApp(App)
app.use(
HxzAudioPlayer,
// 初始化传递的参数
{url: 'http://www.5imoban.net'}
)
app.mount('#app')8、在App.vue引入刚才打包的插件，测试是否正常：
<template> <div> <HxzAudioPlayer :msg="msg"></HxzAudioPlayer> </div> </template> <script setup> const msg = '这是props传递的数据' </script>
9、运行
npm run dev
就可以测试查看效果了：
10、发布到npm就不多说了，文章开头的相关文章中都有详细介绍。