油猴脚本本地调试
[ 本帖最后由 涛之雨 于 2023-1-6 23:20 编辑 ]\n\n[ 本帖最后由 涛之雨 于 2023-1-6 22:33 编辑 ]\n\n根据 (https://github.com/the1812/Bilibili-Evolved) 的[开发文档](https://github.com/the1812/Bilibili-Evolved/blob/master/CONTRIBUTING.md)，一共分三步1. 赋予油猴/脚本猫/whatever 本地文件读取权限
2. 配置油猴脚本
> 比如我的
```js
// ==UserScript==
// @name 看着填
// @version 123
// @AuThor 涛之雨
// @license MIT
// @match *://*.github.com/*
// @match *://github.com/*
// @run-at document-start
// @grant unsafeWindow
// @connect *
// @require https://unpkg.com/sweetalert2/dist/sweetalert2.min.js
// @Icon http://github.com/favicon.ico
// @require file://C:/Users/taozhiyu/Documents/GitHub/inject/bundle.js
// ^这是我的脚本文件位置
// ==/UserScript==
```
3. 开始撸码
然后就可以搞骚操作了，比如ts就可以run起来了（与vue啊vite啊react之类的框架不一样，我只搞了ts。。。）
打包我一开始是用的glup，后来感觉没必要。。。最终直接写成`bash`脚本丢到`package.json`里。。。
反正就是`browserify`打包，
`browserify-shim`排除cdn导入的依赖，
`tsify`组件解析`typescript`语法
最后`uglify-js`去压缩（可能没必要？反正greasyfork不允许来着）
所以，最终我的`package.json`中修改为：
```json
{
...
"scripts": {
"watch": "watchify main.ts -t [ browserify-shim ] -p [ tsify --noImplicitAny ] -o bundle.js --debug --verbose",
"build": "browserify main.ts -t [ browserify-shim ] -p [ tsify --noImplicitAny ] > bundle.js",
"dest": "browserify main.ts -t [ browserify-shim ] -p [ tsify --noImplicitAny ] | uglifyjs -cm > bundle.min.js"
},
"browserify-shim": {
"sweetalert2": "global:Swal"<-我用的是sweetalert2，映射到window.Swal
}
}
```
可以参考[这里](https://stackoverflow.com/questions/23125338/how-do-i-use-browserify-with-external-dependencies)，每个依赖的github都写的比较清楚。。。
使用`watch`脚本开发，文件保存之后自动打包生成`bundle.js`文件，刷新页面即可运行（当然要想继续折腾，可以添加热更新。。。但是感觉没必要=_=）
最终效果（部分）：
（没错，因为有sourcemap，所以可以方便调试。。。）
写了这么多，其实很简单。。。
刀不锋利马太瘦，没有实力，你别跟我涛斗 wushengli 发表于 2023-1-7 10:41
表示不懂，要有个成品就好了。
鸡都给你了，蛋还要我下吗？ 刀不锋利马太瘦，没有实力，你别跟我涛斗 刀不锋利马太瘦，没有实力，你别跟我涛斗 +1
刀不锋利马太瘦，没有实力，你别跟我涛斗 这个开发难度大嘛？
其实很简单，是因为你会啊，多谢分享，我试一下增加下记忆 看看怎么样 这个可以，比直接在油猴内置编辑器里编辑方便 学习了谢谢分享