求助求助求助！！！

Sunhy

本人3年java开发，对前端开发一知半解，之前开发油猴脚本都是直接写的纯js，包括部署发布、开发调试基本都是动手在页面脚本上一点一点的改，感觉开发模式太过于原始。
初次接触前端开发框架就是vue，所以有点特殊的情感吧（而且感觉Vue相对于简单一点），所以想基于Vue+Vite+TypeScript工程化开发脚本，但苦于技术限制，万事开头难，包括学习路径也不是很清楚，有点无从下手。
看了论坛多位大牛的帖子，尝试了vite-plugin-monkey，后续开发还是有些无从下手，没有参考，根据我的需求也不知从哪里开始学习，所以想求助各位大牛有没有基于Vue+Vite+TypeScript开发工程化脚本的成品项目作为参考学习，或者指导一下学习路径。
万分感谢！！！！
已经抓耳挠腮好久了~~~~😭😭😭

王一之

vite-plugin-monkey是一个不错的脚手架，首先我觉得楼主要清楚要做什么东西，大部分脚本都不需要什么vue的去搞页面

学习油猴的话，可以从这里看看：https://learn.scriptcat.org/，脚本不大的，直接单文件撸就是，如果比较复杂才有必要工程化，用脚手架快速开始

Sunhy

王一之 发表于 2023-12-22 14:18
vite-plugin-monkey是一个不错的脚手架，首先我觉得楼主要清楚要做什么东西，大部分脚本都不需要什么vue的 ...

嗯嗯，这个我是清楚的，我们现在搭建的插件前期不是特别复杂，但是设计到的页面也是蛮多的，而且后期会不停做扩展，目前是有我们一个团队在用，js代码量大概在15000行左右，然后又接了其他团队的需求，其他团队的插件也要做重构，他们的代码量比较庞大，涉及到的前端页面也更多，上周粗略看了一下他们的js，单文件代码就到26000行了，其他vue的管理页面做成了单独的管理系统，没有在js中。
现在我对我们团队的插件做重构，在js中尽量的往模块化上边靠，可其实也就是前端js功能拆分+后端数据库配置功能模块的调用而已。
今天我也用vite-plugin-monkey做了一些demo，研究了一下，这个用着是真不错。
可同时我也遇到了新问题：由于我们使用插件的站点团队的要求，需要对GM_xmlhttpRequest做封装，增加token认证等配置，相当于插件操作要加入他们的前端链路中，同时接入我们公司内部的日志系统做分析。
这一块封装和配置我不知道在工程化里边应该怎么去配置或者是在哪里配置了555
前端菜鸡搞起来是真的难受~~

王一之

Sunhy 发表于 2023-12-22 15:26
嗯嗯，这个我是清楚的，我们现在搭建的插件前期不是特别复杂，但是设计到的页面也是蛮多的，而且后期会不 ...

这么大，那确实得用脚手架工程化了

对GM_xmlhttpRequest做封装，增加token认证等配置，这个可以使用axios再进行一次封装，可以参考：https://github.com/scriptscat/li ... gm/README.md#gmajax 不过倒也不用这么重，自己简单封装一下GM_xhr就行了，主要是一些公共参数（token认证），也推荐cxxjackie大佬的ajax库：https://scriptcat.org/zh-CN/script-show-page/532，设置一下默认配置

王一之

Sunhy 发表于 2023-12-22 15:26
嗯嗯，这个我是清楚的，我们现在搭建的插件前期不是特别复杂，但是设计到的页面也是蛮多的，而且后期会不 ...

哥哥如果是具体的一个问题的话，可以在问答板块提问：https://bbs.tampermonkey.net.cn/forum-77-1.html

Sunhy

王一之 发表于 2023-12-22 15:35
这么大，那确实得用脚手架工程化了

对GM_xmlhttpRequest做封装，增加token认证等配置，这个可以使用axios ...

好的好的，感谢哥哥指导，我现在就去看看~

shabby

如果你是要封装 GM_api 相关的库，也可以查看这个教程

https://github.com/lisonge/vite- ... -%E7%9A%84%E5%BA%93

Sunhy

shabby 发表于 2023-12-23 01:51

如果你是要封装 GM_api 相关的库，也可以查看这个教程

https://github.com/lisonge/vite-plugin-monkey/b ...

好的感谢大佬~
还有问题就是在你这个脚手架中我想要像js那样去过滤请求，这时候应该怎么办呢😰😰

//==/UserScript==
let filterChain;
(function(){
    "use strict"
    //filter chain
    filterChain = function filterChain(request){
        if(request && request.method === "GET" && request.url === "/v2/api/test"){
            // 处理数据
            process(request.response)
        }
    }
})

到这里就很手足无措，是否可以手动写一些初始化的js代码嵌入脚本的前边去执行，main.ts挂载的页面内容在后边去执行呢。

属实是很小白了，搞到这里很痛苦

shabby

Sunhy 发表于 2023-12-28 15:58
[md]好的感谢大佬~
还有问题就是在你这个脚手架中我想要像js那样去过滤请求，这时候应该怎么办呢😰😰
``` ...

没看懂你想实现什么呢，可否详细描述你说的使用场景呢

gjlljg

本人6年前端开发，对后端java开发一知半解，包括部署发布、开发调试基本都是动手在页面脚本上一点一点的改，感觉开发模式太过于原始。
初次接触后端开发框架就是spring，所以有点特殊的情感吧,但苦于技术限制，万事开头难，包括学习路径也不是很清楚，有点无从下手。
看了论坛多位大牛的帖子
已经抓耳挠腮好久了~~~~😭😭😭