使用 Vite 插件开发构建 Tampermonkey 用户脚本(vite 插件开发)

起因 一直以来，我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的： 对于一些简单的脚本，这没有什么问题，即改即看。但当代码多了以后问题就来了，自带编辑器开发体验确实不太舒服，没有格式化，没有代码补全，无法模块化编写代码等等，这时候我就想寻找一个打包方案，让我们可以在自己 ... 起因

推荐整理分享使用 Vite 插件开发构建 Tampermonkey 用户脚本(vite 插件开发)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vis插件,viz插件,vis插件,vite-plugin-legacy,vite 插件开发,vitagrafix插件怎么用,vu meter插件,vite 插件开发,内容如对您有帮助，希望把文章链接给更多的朋友！

一直以来，我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的：对于一些简单的脚本，这没有什么问题，即改即看。但当代码多了以后问题就来了，自带编辑器开发体验确实不太舒服，没有格式化，没有代码补全，无法模块化编写代码等等，这时候我就想寻找一个打包方案，让我们可以在自己的编辑器如 VSCode 里开发，这样就可以充分利用前端工程化的便利，提升开发体验。常见的打包工具比如 webpack、parcel、rollup 等，首先排除 webpack（笑），然后试了下 parcel，效果不太理想，之后试了 rollup 感觉还可以。转眼想到要用 vue 开发，那就直接上 vite 吧 ?，vite 也是用 rollup 来打包生产代码的。直接打开 npm，看看有没有人造轮子，然后发现下面几个包：

gorilla (rollup 插件）vite-plugin-tampermonkeyvite-plugin-monkey

这几个都符合基本需求，其中 gorilla 不能打包样式，另外两个插件都差不多，选了 vite-plugin-tampermonkey 进行改造。修改后的插件： Github | npm

插件特点通过单独的配置文件或者 package.json 中的 tmHeader 字段来配置 Tampermonkey 的 Userscript Header构建生产时支持自动分析代码用到的 grant开发模式时默认导入所有 grant，并且把所有的 grant 方法加入到 unsafeWindow可通过简单配置，把引入的外部包 require 化，自动引入 jsdelivr CDN ，详情见下面的插件配置开始之前

Vite 官方中文文档Tampermonkey 文档gorillavite-plugin-tampermonkeyvite-plugin-monkey

初始化项目

兼容性注意Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

按需选择框架推荐使用 TypeScript然后到项目目录开始安装依赖

插件使用安装yarn add vite-plugin-tm-userscript -D# ORnpm install vite-plugin-tm-userscript -D配置 vite.config.tsimport { defineConfig } from 'vite'import Userscript from 'vite-plugin-tm-userscript'// https://vitejs.dev/config/export default defineConfig({ plugins: [ Userscript({ externalGlobals: ['vue'] }) ]})配置 Userscript Header

有四种方式来配置 Userscript Header, 优先级如下所示

header.config.jsonheader.config.jsheader.config.txtpackage.json 中的 tmHeader 字段

其中 header.config.txt 使用 Tampermonkey 头部注释配置，不会经过处理，直接插入脚本头部作为 Header 使用其他三种格式按 json 格式配置，多个属性配置如 match 用数组表示，经过处理自动添加 grant 与 require示例配置见 example/header.config.js使用 js 文件来配置的好处是可以有自动补全：具体属性配置见 Tampermonkey 文档

插件配置export interface TMPluginOptions { entry?: string; autoGrant?: boolean; externalGlobals?: string[] | Record<string, string | string[]>;}externalGlobals

配置外部包，比如 vue，axios 等，减少打包体积，并且会自动