以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤：
一、创建 Vue 3 插件项目
- 使用 Vite 创建一个 Vue 3 项目：
npm init vite-plugin-sdk -- --template vue
- 进入项目目录：
cd vite-plugin-sdk
二、开发插件
- 在
src目录下创建插件文件，例如myPlugin.js：
import { defineComponent } from 'vue'; export default { install(app, options) { // 在这里添加插件的逻辑，例如注册全局组件、提供全局方法等 app.config.globalProperties.$myPluginMethod = () => { console.log('This is a plugin method.'); }; }, };
- 在
main.js中引入并使用插件：
import { createApp } from 'vue'; import App from './App.vue'; import myPlugin from './myPlugin'; const app = createApp(App); app.use(myPlugin); app.mount('#app');
三、配置 Vite 打包
- 修改
vite.config.js文件：
import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], build: { lib: { entry: './src/myPlugin.js', name: 'myPluginSDK', fileName: (format) => `my-plugin-sdk.${format}.js`, }, rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue', }, }, }, }, });
四、打包
运行以下命令进行打包：
npm run build
打包完成后，会在dist目录下生成my-plugin-sdk.js文件，这就是你的 JS SDK，可以在其他项目中引入使用。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="/path/to/your/dist/my-plugin-sdk.js"></script> <script> const app = Vue.createApp({}); app.mount('#app'); console.log(app.config.globalProperties.$myPluginMethod()); </script> </body> </html>
