npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

us-build

v1.10.1

Published

Grease Monkey Script (UserScript) build tool based on esbuild

Downloads

63

Readme

usbuild

🚀 一个基于 esbuild油猴 脚本(UserScript)构建工具,让你的脚本开发像坐火箭一样快!

🪄 功能

  • 🧙‍♂️ 变戏法般的 UserScript 头部注释 - 你写代码,我变魔术!自动将你的配置变成闪亮的 UserScript 头部注释。忘记繁琐的格式吧,让这个魔法帮你搞定一切!

  • 🔍 侦探式的智能 GM_API 探测 - 我们的构建过程中有个侦探,它会悄悄检查你的代码,寻找那些GM_API的踪迹,并且像发现宝藏一样自动生成 grant 属性。配置再也不是什么难题,全部交给这个侦探吧!

  • 🚀 忍者般的热重载与开发服务器 - 开启 dev 模式,就像召唤了一位忍者,他不仅偷偷启动了开发服务器,还能在源文件一有风吹草动时,迅速做出反应,实现热重载。手动刷新?那是过去式!

  • 🌐 本地文件的秘密通道(可选功能) - 想绕过 CSP?没问题!启用 enableLocalFileRequireInDev,就像打开了一个秘密通道,让你在本地自由穿梭,不受束缚。但记住,这可是个双刃剑,虽然强大,但要小心使用,我们默认是关着的哦!

🛠️ 安装

🔮 在 01 世界里敲入这个神秘的咒语,神奇的工具就到手啦!

npm i -D usbuild

🚀 快速开始

想要成为 UserScript 的大师吗?来吧,跟着我一起开始这段奇妙之旅!

首先,创建一个神秘的文件,取名为 MyUserScript.mjs(当然,名字可以随你的心意变换哦)。

接着,用你那魔法般的双手在文件里施展这样的咒语:

import { build } from 'usbuild'
await build({
    match: ['https://*.bilibili.com/*']
})

const 超大声 = alert
超大声('番茄炒蛋拳!')

完成这一切后,只需轻轻一挥你的魔杖(直接使用 node 命令运行该文件),神奇的事情就会发生:脚本自动构建,并且浏览器会如同被施了魔法般自动打开安装!

🌟 参数详解

准备好深入探索 usbuild 的神秘力量了吗?让我们一起解锁这些魔法参数的秘密!

build 函数是你施法的核心,它有两个神秘的参数:一个是 UserScript 配置的魔法盒子,另一个是可选的魔法选项。

  • UserScript 配置

    一个对象,其中的🔑键名就像法术的名称,值则是充满魔力的字符串或字符串数组。

    • name

      🎩 name 字段可以选择性消失,如果消失,它会像魔术师一样从文件名中变出来。

    • ~~grant~~

      不需要书写该咒语。

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

      🚀 而在 dev 模式下,为了让开发更加方便快捷,我们直接授予所有权限,就像给开发者提供了一把万能钥匙!

    • ...

  • 构建选项

    一个对象。这些是定制你的构建过程的小小工具。

    • dev

      默认值 false

      🌆 这个模式就像是间谍黄昏,会偷偷监听源文件的变动,实现神奇的热重载。

    • outdir

      默认值 'dist'

      🏠 outdir 会在指定目录下藏起构建后的文件。

    • host

      默认值 '127.0.0.1'

      🏡 host 设定了我们的服务地址,就像定下了我们神秘小屋的地点,确保它既安全又容易找到。

    • port

      默认值 7100

      🚪 port 就像是我们小屋的门牌号,指定了访客应该敲哪扇门来找到我们的宝藏。

    • autoReload

      默认值 true

      🔄 控制是否开启自动刷新的魔法开关(也就是实时热重载)。当源文件变化时,它就像灵巧的小精灵,自动更新网页,让变化瞬间呈现,免去了手动刷新的麻烦。

    • autoReloadMode

      默认值 refresh

      🧶 控制自动重载的模式,可选值为 refreshreinstallrefresh 以刷新网页的方式自动重载,reinstall 以重新安装脚本的方式自动重载。

    • autoReloadDelay

      默认值 1000

      ⏱️ autoReloadDelay 是自动重载的等待时间(毫秒),像是小精灵准备魔法的时间。

    • enableLocalFileRequireInDev

      默认值 false

      📂 控制在开发模式下是否启用加载本地文件来绕过内容安全策略(CSP)。启用这个功能时,你需要在浏览器的油猴扩展中设置允许访问本地文件。这就像是给你的脚本赋予了额外的力量,让它在本地环境中自由翱翔,但别忘了,这需要在你的浏览器扩展中额外开启相应的权限。

💬 社区

作者的闲聊吹水(QQ)群: 733165997