油猴插件油猴插件泛指Tampermonkey、Violentmonkey、Greasemonkey等向页面注入js的浏览器插件。通过在浏览器扩展加载网页的时候注入特定的js，可以改变页面布局效果等等js能做的所有事情。插件还提供了一些网页上没有的API，让注入的js可以突破网页默认的限制，实现其他功能。这纯手写。只能写原生js。没有代码提示，没有模块概念。它只能通过@require使用npmjs.com库。由于没有工程概念，也没有模块热替换，当代码有变动时，必须刷新宿主页面才能看到效果，而且代码只能在单个文件中。功能少点还好，但是如果功能和项目稍微大一点，就完全不适合编辑了。这是一种完全落后的方法，效率低，开发经验少。它的webpack/rollup/uglify-js/esbuild等底层开发方式相比前者有了很大的提升。有了模块化和打包的理念，开发方式也从单纯的编辑器变成了vscode、codehints、typescript。这不是一个问题。开发者提前在扩展编辑器中编写桥接代码，比如在userscript的@require中写path/dist/js，或者在userscript下动态添加scriptsrc=path/dist/js。但是rollup/uglify-js/esbuild不支持模块热替换（hmr），只有webpack支持试想一下，如果没有模块热替换，每次你的代码在vscode中发生变化，你都得手动刷新host页面，并手动点击恢复刚才的页面状态，这比开发vue/react时的体验差的不是一点点，但是webpack的模块热替换在这种注入代码的方式下也有问题，因为代码的来源和操作代码的环境不是同源的，和webpackdevserver设计的时候只考虑同源，webpackdevserver是插件，不是核心功能。比如我想以中间件的形式拦截来自任意路径的请求，我做不到。现有的基于webpack的oilmonkey脚本插件的开发体验一言难尽。vite的优势与webpack相比，vite最大的提升就是速度和开箱即用。我相信我用过vite每个人都可以体验到它的优势。vite优于webpack的地方有两点，一是明确区分开发模式和构建模式，二是将本地开发服务器的API暴露出来供外部使用。插件可以注册一个中间件来生成中间件桥接代码，不需要每次都生成文件或者手动填写代码。还有一点就是vite的hmrserver在/@vite/client模块中。在开发模式下，vite在index.html中注入插件可以修改这段代码，使vite兼容两台主机。使用插件开发接下来我们使用插件vite-plugin-monkey开发油猴脚本提供的额外功能优势脚手架一键初始化各种模板vue/react/vanilla/svelte/preact支持Tampermonkey,Violentmonkey,和Greasemonkey脚本辅助开发打包自动注入脚本配置头注解首次启动或脚本配置注解改变时默认自动浏览打开脚本安装使用@require配置库cdn的友好解决方案，大大减少构建脚本的大小完整的Typescript和Vite开发经验，如模块热替换，二次启动基本配置如下，详见文档https://github.com/lisonge/vi...exportinterfaceMonkeyOption{/***脚本文件的入口路径*/entry:string;用户脚本：MonkeyUserScript；格式？：格式；server?:{/***首次启动时或脚本配置注释更改时自动在默认浏览器中打开脚本*@defaulttrue*/open?:boolean;/***开发阶段脚本名称的前缀用于在脚本安装列表中区分已构建的脚本*@default'dev:'*/prefix?:string|（（名称：字符串）=>字符串）；};build?:{/***打包脚本文件的名称应以'.user.js'*@default(package.json.name||'monkey')+'.user结尾。js'*/fileName?:string;/***@example*{*vue:'Vue',*//需要额外设置脚本配置userscript.require=['https://unpkg.com/vue@3.0.0/dist/vue.global.js']*vuex:['Vuex','https://unpkg.com/vuex@4.0.0/dist/vuex.global.js'],*//插件会自动注入cdn链接到userscript.require*vuex:['Vuex',(version)=>`https://unpkg.com/vuex@${version}/dist/vuex.global.js`],*//与上一版本相比,添加了版本号。当依赖升级时，cdn链接会自动改变*vuex:['Vuex',(version,name)=>`https://unpkg.com/${name}@${version}/dist/vuex.global.js`],*//也可以添加依赖名，但是每个依赖的cdnbasename不一致，可能没用*}**/externalGlobals?:Record
