【油猴脚本 0】油猴脚本工程化开发 vue3 element-plus

刚开始很多油猴脚本都是手写的，简单代码是能满足需求，但是项目大了、模块多了，手工写很是费劲，这里介绍一款简单好用的油猴脚本工程化开发的脚手架工具，支持多种框架，同时介绍下油猴脚本如何使用 vue3 element-plus 开发。

vite-plugin-monkey

创建项目

pnpm add -D vite-plugin-monkeypnpm create monkey选择 vue
选择 jspnpm i

调试项目

vscode 资源管理器 勾选上 npm 脚本

在 dev 右侧点击运行即可，自动打开浏览器页面，如果安装了油猴插件，便可点击安装脚本，没有安装油猴插件则有问题

调试时，直接网络加载本地代码运行，使用本地安装的依赖包

构建项目、预览项目

首先需要在 vite.config.js 文件配置 cdn 替代调试环境的本地依赖包

运行 build 会打包成一个标准的油猴脚本，dist 目录下，

运行 preview 后，由于 element-plus 依赖于 vue3，会报如下错误

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'defineComponent')

开发框架官方给了如下的解决方式

import { defineConfig } from 'vite';
import monkey, { cdn, util } from 'vite-plugin-monkey';export default defineConfig(async ({ command, mode }) => ({plugins: [monkey({// ...build: {externalGlobals: {vue: cdn.jsdelivr('Vue', 'dist/vue.global.prod.js').concat(util.dataUrl(';window.Vue=Vue;')),'element-plus': cdn.jsdelivr('ElementPlus', 'dist/index.full.min.js'),},},}),],
}));

发布项目

https://greasyfork.org/zh-CN

选择导入脚本，配置源代码和说明信息，点击立即同步便能更新。

设置 webhook

上面设置方式，每次推送代码后，不会自动更新，只能定时更新，如果想实现自动更新，可以设置 github 的 webhook