揭秘！用 VSCode 本地开发油猴脚本的神秘技巧，砖家都惊呆了！

LinLin00 · 发表于 2023-12-1 11:54:44

本帖最后由 LinLin00 于 2023-12-6 19:45 编辑

🌟 哎呀呀，开发油猴脚本的小伙伴们，是不是都对那个自带的油猴编辑器爱恨交加呢？手动复制粘贴，真是让人头大到不行！

🔥 别担心，今天小编要给大家安利一个超级棒的小玩意儿，绝对是开发油猴脚本的神兵利器！

🌈 这个神器能自动为你的 UserScript 生成那些头疼的头部注释，简直是懒人救星！再也不用手忙脚乱地打那些注释了。

🚀 这个工具支持本地开发，还有一个超级贴心的 dev 模式。文件一改动，浏览器将会自动刷新，热重载脚本，妈妈再也不用担心我安装脚本安到手软了。

🕵️‍♂️ 而在非 dev 模式下，grant 属性会像智能侦探一样自动进行检测并生成，免去了手动配置的繁琐。

💡 怎么用呢？小菜一碟！只需在你亲爱的 npm 上轻轻一敲：

npm i -D @linlin00/usbuild

📚 用法

// 🎬 嘿，伙计们！在你的油猴神作之前，别忘了放上这段小小的预备代码哦！
// ⚒️ 脚本一写完，跑一下这个文件，咱们的构建就大功告成了！

import { build } from '@linlin00/usbuild'

// 🚦 别忘了 await 关键词，它就像个红绿灯，让程序乖乖等待，防止冲到浏览器专属函数（比如 alert）那边去，引发一阵混乱。
await build(
    {
        // 🎭 第一个参数是你的 UserScript 配置，就像给你的脚本穿上华丽的戏服。详情可瞄一眼 https://www.tampermonkey.net/documentation.php
        // 🔑 配置的键名是字段名，值可以是潇洒的字符串，或者是风趣的字符串数组。
        name: '圣嘉然警告', // 🎩 name 字段可以选择性消失，如果消失，它会像魔术师一样从文件名中变出来。
        match: ['https://*.bilibili.com/*'],

        // 🕵️‍♂️ 在非 dev 模式下，grant 属性会像智能侦探一样自动进行检测并生成，免去了手动配置的繁琐。
        // 🚀 而在 dev 模式下，为了让开发更加方便快捷，我们直接授予所有权限，就像给开发者提供了一把万能钥匙！
        // grant: ['unsafeWindow', 'GM_setClipboard'],
    },
    {
        // ⚙️ 第二个参数也是个对象，它是构建的小小附加选项。整个对象都可以省略，以下列出的都是默认值。
        dev: false, // 🌆 dev 模式就像是间谍黄昏，会偷偷监听源文件的变动，实现神奇的热重载。
        outdir: 'dist', // 🏠 outdir 会在你的当前目录下的 'dist' 目录里藏起构建后的文件。
        host: '127.0.0.1', // 🏡 host 设定了我们的服务地址，就像定下了我们神秘小屋的地点，确保它既安全又容易找到。
        port: 7100, // 🚪 port 就像是我们小屋的门牌号，指定了访客应该敲哪扇门来找到我们的宝藏。
        autoReload: true, // 🔄 控制是否开启自动刷新的魔法开关（也就是实时热重载）。当源文件变化时，它就像灵巧的小精灵，自动更新网页，让变化瞬间呈现，免去了手动刷新的麻烦！
    }
)

// 🌟 大功告成，这里是你的脚本大显身手的地方！
const 超大声 = alert
超大声('番茄炒蛋拳!')

🌟 看看，简单得就像吃蛋糕一样轻松吧？这就是小编今天带来的小秘籍，希望能在你的编程旅程中添上一抹神奇的色彩！

🔗 项目地址在此：LinLin00000000/usbuild: 一个基于 esbuild 的油猴脚本(UserScript)构建工具 (github.com)。赶快前往探索，发现这个构建工具的无限可能吧！