💯你想知道的：如何在vite上开发vue插件并且发布到npm技术选型第一步使用vite搭建vue3，并且添加配置组

技术选型

vite3, vue3,2+, rollup，node14+,npm6+

第一步使用vite搭建vue3，并且添加配置组件

pnpm create vite官网查看
新建文件夹src/package,并且添加组件

3. 写好的组件不要忘记命名

<script>
export default { name: 'watermark' }
</script>

新建 src/package/index.js 插件封装

import watermark from './watermark/watermark.vue';
const comlist = [watermark]
export default {
    install: (app) => {
        comlist.forEach(com =>{
            app.component(com.name,com)
        })
    }
  }

当前项目测试

//main.js
import tool from './package/index.js'
const app = createApp(App)
app.use(tool)
app.mount('#app')

//APP.vue
<script setup>

</script>

<template>
  <watermark></watermark>
</template>

<style scoped>

</style>

成功，展示效果

第二步配置rollup

全局安装rollup：npm install --global rollup官网查看
根目录新建 rollup.config.js
项目安装相关rollup插件官方推荐和介绍

插件名称	作用
rollup-starter-lib	作为 Rollup 运用于库
rollup-starter-app	作为 Rollup 运用于应用程序
@rollup/plugin-node-resolve	插件可以让 Rollup 查找到外部模块
@rollup/plugin-babel	支持的最新 JavaScript 特性
@babel/core	把 js 代码分析成 ast，方便各个插件分析语法进行相应的处理
@babel/preset-env	根据指定的执行环境提供语法装换，也提供配置 polyfill
postcss	通过 js 插件来转换 css 的工具
rollup-plugin-postcss	需要postcss依赖
rollup-plugin-vue	来解析vue文件

进入rollup.config.js 配置

  //  rollup.config.js
  import vuePlugin from "rollup-plugin-vue";
  import postcss from "rollup-plugin-postcss";
  // 如果依赖模块中存在 es 模块，需要使用 @rollup/plugin-node-resolve 插件进行转换
  import nodeResolve from '@rollup/plugin-node-resolve'
  import babel from '@rollup/plugin-babel';

  export default {
    input: "./src/package/index.js",
    output: {
      file: "build/index.es.js",
      format: "es",
    },
    external: ['vue'], // 依赖模块
    plugins: [
      nodeResolve(),
      vuePlugin(),
      babel({  // 排除node_modules
          exclude: 'node_modules/**',
          babelHelpers:"bundled"
        }),
      postcss(),
    ],
  };

5.package.json 配置

{
  "name": "vite-plugin-vue-tool",
  "private": false,//是否为私有
  "version": "0.0.2-1",//版本配置
  "type": "module",//类型
  "main": "build/index.es.js",//入口文件
  "repository": {//存储库
    "type": "git",
    "url": "https://github.com/zhaozhenghao/vite-plugin-vue-watermark"
  },
  "bugs": {//bug指向
    "url": "https://github.com/zhaozhenghao/vite-plugin-vue-watermark/issues",
    "email": "zhaozhenghao856@gmail.com"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "br": "rollup -c"//启动命令 指向rollup.config.js
  },
  "keywords": [//配置关键词
    "vue",
    "vue3",
    "vite",
    "rollup"
  ],
}