前言
上周跟大家分享了如何使用vue的自定义指令实现自定义浏览器右键菜单，大家都觉得挺有意思的，这次我把它做成了插件，上传到了npm仓库。
在做这个插件的过程中，踩了蛮多坑，本文就跟大家分享下我的实现思路以及过程，欢迎各位感兴趣的开发者阅本文。
环境搭建
一开始我是直接用的typescript的tsc命令进行打包的，但是我的插件里用到了vue、scss，发现要把这些文件打包进去需要自己去配webpack。
我记得好久之前，我用Vue CLI 2.x创建项目时，可以选择当前要创建的项目是插件还是web项目，现在用的是Vue ClI 4.x了，在创建项目时没看到有这个选项。
于是，我带着侥幸的心理，去Vue CLI 官网找了一波，还真就被我找到了，它的build指令有个target选项，可以选择将其打包成一个插件，它的具体使用方法：vue-cli-service build。
既然Vue CLI提供了现成的解决方案，那就用它提供的吧。
创建项目
- 在终端进入你的项目目录，使用
create命令创建一个名为vue-right-click-menu-next的项目
vue create vue-right-click-menu-next
- 在接下来的步骤中，选择自定义配置，选vue3, node-sass, eslint+prettier, typescript这些选项
配置依赖项
项目创建好后，我们删掉CLI初始化时创建的东西，然后修改package.json中的内容。
在package.json中，CLI默认是把vue和core-js放在dependencies下的，我们开发的插件是要给其他开发者引用的，如果我们打包的产物中包含Vue包的话可能会引发各种问题，比如用户可能会在引入我们的包之后会在runtime时创建两个不用的Vue实例，所以vue插件的package.json里一定不能将其放在dependencies中，而是要放在peerDependencies中，表明会从引用者的其他的包中引入相对应的包，而不会在这个包里直接引入。
- 在package.json中添加下述代码，移除原来dependencies下的依赖。
"peerDependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" }
- 在devDependencies中添加git提交规范相关依赖
{ "@commitlint/cli": "^11.0.0", "@commitlint/config-angular": "^11.0.0", "commitizen": "^4.2.2", "cz-conventional-changelog": "^3.3.0", "husky": "^4.3.0", }
- 添加config和husky配置changelog生成地址和强制编辑器提交代码走我们定义的规范
{ "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } }, "husky": { "hooks": { "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" } } }
- 最后，在script中添加提交命令与生成changelog的命令
{ "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", "commit": "git-cz" }
配置打包命令
由文档可知，可以通过vue-cli-service build --target lib --name myLib [entry]命令，将一个单独的入口构建为一个库。
那么，我们就可以在package.json的script标签里添加build命令用以执行插件的打包，代码如下。
- vueRightMenuPlugin 打包后的文件名
- src/main.ts 插件的入口文件
{ "build": "vue-cli-service build --target lib --name vueRightMenuPlugin src/main.ts", }
由于我们的插件启用了typescript，使用它的默认打包，不会帮我们生成ts声明文件，使用我们插件的开发者项目可能会启用typescript，在引用插件时就会报错声明文件不存在，因此我们需要额外做下述操作：
- 在
tsconfig.jsonz中添加下述代码，打包时在项目的指定位置自动生成配置文件。
{ "declaration": true,// 是否生成声明文件 "declarationDir": "dist/lib",// 声明文件打包的位置 }
- 创建
vue.config.js文件，关闭并行打包的一些相关配置。
module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === "production") { config.module.rule("ts").uses.delete("cache-loader"); config.module .rule("ts") .use("ts-loader") .loader("ts-loader") .tap(opts => { opts.transpileOnly = false; opts.happyPackMode = false; return opts; }); } }, parallel: false };
做完上述操作后，我们运行打包命令时就能自动生成声明文件了。
强制css内联
当我把插件开发完，测试时发现我引用的组件样式丢了，找了好久问题，最后在CLI的文档中找到了问题所在，他有个css.extract属性，它使用来配置打包时是否将css样式提取到独立的文件中，Default: 生产环境下是 true，开发环境下是 false，我们打包时他默认是true，用户需要单独引入这个样式文件文件。
我们可以通过手动将其设置为false，让其在打包时使用内联样式，这样就能解决样式失效的问题了，我们在vue.config.js中加入下述代码。
module.exports = { // 强制css内联 css: { extract: false } }
添加库描述
做完上述操作，我们跟打包有关的相关的配置就弄好了，接下来我们在package.json中添加库的相关描述，让npm可以正确识别我们的插件。
- name 插件名称
- version 版本号
- description 插件简述
- private 是否私有
- main 库的入口文件位置(打包后的入口文件)
- types 库的声明文件位置
- publisher 库发布者
- repository 仓库信息
- keywords 关键词，在npm找包时所匹配的关键词
- author 库作者
- license 库遵守的开源协议
- bugs bug反馈地址
- homepage 库主页
{ "name": "vue-right-click-menu-next", "version": "1.0.0", "description": "支持vue3的右键菜单插件", "private": false, "main": "dist/vueRightMenuPlugin.common.js", "types": "dist/lib/main.d.ts", "publisher": "magicalprogrammer@qq.com", "repository": { "type": "git", "url": "git+https://github.com/likaia/vue-right-click-menu-next.git" }, "keywords": [ "vuejs", "vue3", "vue", "rightMenu", "右键菜单", "vueRightMenu" ], "author": "likaia", "license": "MIT", "bugs": { "url": "https://github.com/likaia/vue-right-click-menu-next/issues" }, "homepage": "https://github.com/likaia/vue-right-click-menu-next#readme", }
完整的配置文件请移步：package.json
实现思路
上篇文章我们的实现思路是需要vuex来做全局状态管理，控制右键菜单的显隐，这次我们要把它做成插件，再使用vuex的话，使用我们插件的人就需要必须引入vuex才行，那就有点不合适了。
展示组件
经过一番思考后，我有了下述思路：
- 将右键菜单做成组件，通过
props向组件传值。 - 使用
createApp来加载组件，向组件内部传值，创建一个组件容器 - 创建一个div元素，将刚才的组件容器挂载到这个div元素上
销毁组件
完成上述操作后，我们就实现了让右键菜单显示到指定位置，但是要怎么隐藏它呢，经过一番思考后，我又想到了下述思路：
- 将上述加载组件的实现封装成一个函数，将创建的div元素作为返回值。
- 在插件全局声明一个变量
menuVM，默认声明为null - 指令内部触发右键事件时，调用我们封装的函数，用
menuVM去接收其返回值 - 此时我们创建一个全局点击事件的监听，如果
menuVM不为null，我们就把这个元素移除 - 触发右键事件时，如果
menuVM不为null，表示它上次点开的右键菜单没关，这样就会出问题，因此我们也需要将其从body中移除
实现过程
分析出实现思路后，接下来我们就着手将其实现吧。
创建右键菜单组件
在项目的src下创建components文件夹，在文件夹下创建right-menu.vue文件，样式和组件内容此处我们就不贴了，这里贴一下组件需要传的参数，完整代码请移步：
right-menu.vue)
<script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ name: "right-menu", props: { rightMenuStatus: String, rightMenuTop: String, rightMenuLeft: String, rightMenuList: Array } }); </script>
封装挂载组件函数
我们可以通过vue3的createApp方法来加载一个组件，并给他传值，然后挂载到某个dom节点上，代码如下：
/** * 将组件挂在到节点上 * @param comp 需要挂载的组件 * @param prop 向组件传的参数 */ const creatComp = function(comp: Component, prop: rightMenuAttribute) { // 创建组件 const app = createApp(comp, { ...prop }); // 创建一个div元素 const divEle = document.createElement("div"); // 将创建的div元素挂载追加至body里 document.body.appendChild(divEle); // 将组件挂载至刚才创建的div中 app.mount(divEle); // 返回挂载的元素，便于操作 return divEle; };
在install中注册指令并显示菜单
接下来，我们在插件的install方法中，注册一个vue指令rightClick，拦截它的右键事件，获取组件传过来来的参数，挂载组件，渲染右键菜单。代码如下：
install(app: App): void { // 创建指令 app.directive("rightClick", (el, binding): boolean | void => { // 指令绑定元素元素是否存在判断 if (el == null) { throw "右键指令错误：元素未绑定"; } el.oncontextmenu = function(e: MouseEvent) { if (menuVM != null) { // 销毁上次触发的右键菜单DOM document.body.removeChild(menuVM); menuVM = null; } const textArray = binding.value.text; const handlerObj = binding.value.handler; // 菜单选项与事件处理函数是否存在 if (textArray == null || handlerObj == null) { throw "右键菜单内容与事件处理函数为必传项"; } // 事件处理数组 const handlerArray = []; // 处理好的右键菜单 const menuList = []; // 将事件处理函数放入数组中 for (const key in handlerObj) { handlerArray.push(handlerObj[key]); } if (textArray.length !== handlerArray.length) { // 文本数量与事件处理不对等 throw "右键菜单的每个选项，都必须有它的事件处理函数"; } // 追加右键菜单数据 for (let i = 0; i < textArray.length; i++) { // 右键菜单对象, 添加名称 const menuObj: rightMenuObjType = { text: textArray[i], handler: handlerArray[i], id: i + 1 }; menuList.push(menuObj); } // 鼠标点的坐标 const oX = e.clientX; const oY = e.clientY; // 动态挂载组件，显示右键菜单 menuVM = creatComp(rightMenu, { rightMenuStatus: "block", rightMenuTop: oY + "px", rightMenuLeft: oX + "px", rightMenuList: menuList }); return false; }; }); }
创建监听销毁组件
当用户点击完右键菜单后，我们需要对组件进行销毁，让其隐藏，因此我们在插件的install创建一个对body的点击监听，然后移除我们挂载的组件，代码如下：
install(app: App): void { // 监听全局点击，销毁右键菜单dom document.body.addEventListener("click", () => { if (menuVM != null) { // 销毁右键菜单DOM document.body.removeChild(menuVM); menuVM = null; } }); }
完整代码请移步：main.ts)
发布插件
做完上述操作后，我们的插件就开发完成了，可以打包然后发布到npm仓库了。
终端执行下述命令：
npm publish --access public
插件发布成功：vue-right-click-menu-next
兼容Vue2.x
插件是不兼容Vue2.x的，因为creatApp时Vue3新增的语法，一开始我本来想用Vue2.x的extend来实现组件挂载的，发现Vue3把这个语法舍弃了。
这就造成了我需要写两套插件，维护两个插件。
插件的逻辑层面没有啥区别，只有挂载组件写法的不同，Vue2.x中需要使用下述写法：
/** * 将组件挂在到节点上 * @param comp 需要挂载的组件 * @param prop 向组件传的参数 */ const creatComp = function(comp, prop) { // 创建组件 const app = Vue.extend(comp); // 创建一个div元素 const divEle = document.createElement("div"); // 将创建的div元素挂载追加至body里 document.body.appendChild(divEle); // 将组件挂载至刚才创建的div中, 使用propsData进行传参 new app({ propsData: { ...prop } }).$mount(divEle); // 返回挂载的元素，便于操作 return divEle; };
插件地址：vue-right-click-menu
项目地址
本文中开发的插件代码地址：vue-right-click-menu | vue-right-click-menu-next
在线体验地址：chat-system
写在最后
- 公众号无法外链，如果文中有链接，可点击下方阅读原文查看😊
