位置: IT常识 - 正文

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

编辑:rootadmin
起因 一直以来,我都是直接在浏览器 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 插件开发构建 Tampermonkey 用户脚本(vite 插件开发)

兼容性注意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 等,减少打包体积,并且会自动

本文链接地址:https://www.jiuchutong.com/zhishi/309313.html 转载请保留说明!

上一篇:Python中三种模块类型的介绍(python中模块的概念)

下一篇:当月销售次月开票怎么做账(当月销售次月开票就按次月申报)

  • 如何正确使用论坛推广引流?(论如何正确地指导老中医使用表情包 百度云)

    如何正确使用论坛推广引流?(论如何正确地指导老中医使用表情包 百度云)

  • 小米手机时间在哪里设置24小时(小米手机时间在哪里)

    小米手机时间在哪里设置24小时(小米手机时间在哪里)

  • 联通机顶盒遥控器没了,用手机怎么遥控(联通机顶盒遥控器怎么配对)

    联通机顶盒遥控器没了,用手机怎么遥控(联通机顶盒遥控器怎么配对)

  • 荣耀v20指纹功能消失(荣耀v20指纹功能设置)

    荣耀v20指纹功能消失(荣耀v20指纹功能设置)

  • 共享单车失败的根本原因(共享单车失败的主要原因)

    共享单车失败的根本原因(共享单车失败的主要原因)

  • 荣耀畅玩9a怎么设置时间(荣耀畅玩9a怎么玩光遇)

    荣耀畅玩9a怎么设置时间(荣耀畅玩9a怎么玩光遇)

  • 苹果的勿扰模式打电话过去会怎样(苹果的勿扰模式的作用)

    苹果的勿扰模式打电话过去会怎样(苹果的勿扰模式的作用)

  • 蓝牙共享联系人是什么意思(蓝牙共享联系人全部详情是什么意思)

    蓝牙共享联系人是什么意思(蓝牙共享联系人全部详情是什么意思)

  • 一张cdrom光盘的储存容量是(一张cdrom光盘700的最多可以存储ct图像)

    一张cdrom光盘的储存容量是(一张cdrom光盘700的最多可以存储ct图像)

  • xr强制重启怎么按(xr 强制启动)

    xr强制重启怎么按(xr 强制启动)

  • 华为悬浮窗管理在哪里(华为悬浮窗权限打开后怎么使用)

    华为悬浮窗管理在哪里(华为悬浮窗权限打开后怎么使用)

  • word怎么让下划线一样长(word怎么让下划线长度一样)

    word怎么让下划线一样长(word怎么让下划线长度一样)

  • 通达信使用方法(通达信软件怎么用)

    通达信使用方法(通达信软件怎么用)

  • 腾讯视频突然不能投屏(腾讯视频突然不能投屏了)

    腾讯视频突然不能投屏(腾讯视频突然不能投屏了)

  • 快手闪退怎么解决(快手闪退怎么回事?)

    快手闪退怎么解决(快手闪退怎么回事?)

  • rx580配什么主板(rx580配什么主板和cpu发挥最大性能)

    rx580配什么主板(rx580配什么主板和cpu发挥最大性能)

  • 手机QQ的兴趣部落如何关闭提示(手机qq兴趣部落在哪里打开)

    手机QQ的兴趣部落如何关闭提示(手机qq兴趣部落在哪里打开)

  • 小米6如何连接电脑传文件(小米6如何连接苹果手机)

    小米6如何连接电脑传文件(小米6如何连接苹果手机)

  • ipada1432尺寸(ipada1474的尺寸)

    ipada1432尺寸(ipada1474的尺寸)

  • 微信面对面建群怎么弄(微信面对面建群无法进入聊天)

    微信面对面建群怎么弄(微信面对面建群无法进入聊天)

  • 王者荣耀怎么快速赚金币?(王者荣耀怎么快速获得金币)

    王者荣耀怎么快速赚金币?(王者荣耀怎么快速获得金币)

  • 苹果手机麦克风打开教程(苹果手机麦克风模式关闭了,怎样才能打开?)

    苹果手机麦克风打开教程(苹果手机麦克风模式关闭了,怎样才能打开?)

  • 老老实实的程序员该如何描述自己的缺点(老老实实的人)

    老老实实的程序员该如何描述自己的缺点(老老实实的人)

  • python基本颜色代码(python颜色代码有哪些)

    python基本颜色代码(python颜色代码有哪些)

  • 所得税汇算清缴报告在哪查
  • 2023增值税最新税率
  • 个人独资企业出资额是注册资本吗
  • 什么费用可以报销工会经费
  • 货代企业都需要交什么税
  • 借款利息收入所得税
  • 买一送一的营销好处
  • 销售货物尚未收到会计分录
  • 政府往来账
  • 分月计提利息会计分录
  • 工企业用地土地使用税怎么征收?
  • 个人取得投资收益是否缴纳个税
  • 电子发票打印出来没有税务局的章
  • 为什么收到的劳务费税点打星号?
  • 餐饮企业员工
  • 单位为员工缴纳社保分录
  • 总分机构类型怎么选
  • 车辆保险返点计算器
  • 主营业务成本净额计算公式
  • 上年超额广告费会计分录
  • 支付工伤赔偿款怎么做账
  • win10专业版如何关闭系统更新
  • nwtray.exe - nwtray是什么进程 作用是什么
  • php的数组函数
  • 汽车消费税有发票吗
  • 广告费发票内容是什么
  • 餐饮行业采购
  • 企业将自有房产怎么处理
  • antd-vue-pro
  • 库存商品损失怎么做账
  • vue实现下载文件夹
  • 基于vue的网上商城
  • laravel 实例
  • 往来款项清查账务处理
  • 甲供材料总额法和差额法
  • 什么是资产减值准备计提
  • 其他权益工具确认投资损失的账务处理
  • 企业年度汇算清缴申报表填写
  • 资金占用费怎么开票
  • mysql查询表里数据
  • 采用工作底稿法编制现金流量表是以工作底稿为
  • 小型微利企业的认定标准2023年
  • 商品进销差价是流动资产吗
  • 工程款增值税专用发票需要写工程名称吗
  • 营业外收入的账户有哪些
  • 季报业务活动表怎么做
  • 公司对公账户转给个人
  • 进项税转出如何结转
  • 税控技术服务费怎么做账
  • 进口ddp税款如何缴纳
  • 企业的专利收费是多少
  • 企业发展基金返还条件
  • 总公司委托分公司开票及收款
  • 一般纳税人在外地预缴税款,预缴多了需不需退税
  • 电子承兑被拒付(可拒付追索)
  • 银行记账本怎么填写
  • centos vim编辑器
  • unix系统复制命令
  • windows任务管理器怎么用
  • mac屏幕共享软件
  • linux文件系统inode
  • 禅道界面
  • 硬盘安装fedora
  • linux查内存信息
  • win7网页有错误如何修复?
  • Ubuntu14.04 GLUT的安装
  • python 500行
  • Unity3D游戏开发基础
  • div css页面布局
  • unity项目流程
  • android开发框架
  • python设计内容
  • 重庆税务电子税务
  • 重庆国家税务局发票查询
  • 自来水征税
  • 四川税务局网上办税
  • 全年一次性奖金怎么申报个税
  • 互城通怎么用微信充值
  • 税务总局在贯彻落实意见任务分工中
  • 平顶山属于河南还是河北
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设