位置: IT常识 - 正文
推荐整理分享使用 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 等,减少打包体积,并且会自动
上一篇:Python中三种模块类型的介绍(python中模块的概念)
下一篇:当月销售次月开票怎么做账(当月销售次月开票就按次月申报)
友情链接: 武汉网站建设