ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

IwaraDownloadTool构建系统揭秘:自研esbuild插件与一键发布流程如何实现

IwaraDownloadTool构建系统揭秘:自研esbuild插件与一键发布流程如何实现 IwaraDownloadTool构建系统揭秘自研esbuild插件与一键发布流程如何实现【免费下载链接】IwaraDownloadToolIwara 下载工具 | Iwara Downloader项目地址: https://gitcode.com/gh_mirrors/iw/IwaraDownloadToolIwaraDownloadTool 是一款功能强大的 Iwara 下载工具油猴脚本支持批量下载视频、Aria2 加速下载与自动更新。除了下载功能本身它背后还有一套轻量而精巧的构建系统仅需 esbuild 作为打包核心配合 3 个自研 esbuild 插件与一键发布脚本就能把 TypeScript 源码变成可自动更新的油猴脚本并通过 CI 自动完成预览版 → 正式版的完整发布流程 先了解IwaraDownloadTool 是什么简单来说它是一个运行在 Tampermonkey 等脚本管理器中的 UserScript批量嗅探并下载 Iwara 视频支持 Aria2 下载器、任务自动追踪脚本内嵌元数据头实现在线自动更新正因为它最终产物是一个单个 .user.js 文件 元数据头构建系统的核心任务就变成了三件事压缩打包、内联样式、注入更新地址。这也决定了它不需要 Webpack、Vite 这类重型工具esbuild 几个小插件就够了。构建全流程npm run build 到底做了什么构建入口是 build/build.ts运行npm run build后依次执行 6 个步骤步骤做什么关键逻辑1️⃣ TypeScript 类型检查tsc --noEmit类型错误直接终止构建2️⃣ 清空并重建 dist 目录保证产物干净—3️⃣ 解析元数据模板读取 src/mata/userjs.mata提取// UserScript块4️⃣ 注入版本与更新地址替换%#version#%、%#release_tag#%等占位符开发版自动追加 UUID 后缀5️⃣ esbuild 压缩打包输出.min.user.js全量 minify IIFE 格式6️⃣ esbuild 非压缩打包输出.user.js人类可读版配合自研插件见下文其中第 4 步有个巧妙设计解析 src/mata/userjs.mata 中的元数据后用serializeMetadata函数按最长键名对齐缩进重新生成整齐的元数据块再拼接到 JS 产物头部build/build.ts。这样脚本管理器如 Tampermonkey才能正确识别updateURL和downloadURL实现一键在线更新。 版本规则正式发布版本直接取自 package.json 的version字段开发版dev标签会在版本号后追加-dev.随机UUID方便区分灰度产物。三个自研 esbuild 插件详解esbuild 本身是快但油猴脚本有两个特殊需求它满足不了多语言 JSON 要动态汇总、CSS 要内联成字符串。这两个问题都由build/目录下的小插件解决。插件一i18nPlugin —— 翻译文件自动汇总源码build/generate-i18n.ts项目内置了简体中文、英文、日文三套语言包src/i18n/zh_cn.json、src/i18n/en.json、src/i18n/ja.json。i18nPlugin挂在 esbuild 的onStart钩子上每次构建开始瞬间自动扫描src/i18n/目录生成 src/i18n.ts 入口文件统一 import 所有语言 JSON 并导出i18nList字典。好处很明显以后想加韩语包只要往src/i18n/里丢一个ko.json文件即可入口代码零改动。它还附带了 watch 模式npm run dev:i18n新增/删除语言文件时自动重新生成本地开发体验拉满。插件二inlineCSS —— 把样式表变成字符串源码build/inlineCSS.ts油猴脚本无法像 Web 应用那样用link引入外部 CSS。inlineCSS插件拦截所有.css导入src/css/ 下有 8 个样式文件内部再调一次嵌套的 esbuild 构建write: falseminify: true把压缩后的 CSS 变成一个 JS 字符串模块导出export default body{margin:0;...};运行时只需把字符串塞进style标签即可生效。用 esbuild 套 esbuild 来压 CSS省去了再引入一套 CSS 处理链。插件三minifyModules —— 只压第三方保留自家代码可读源码build/minifyModules.ts这是构建流程第 6 步非压缩版的独门插件它只匹配node_modules/路径下的文件本项目即 dayjs 等两个运行时依赖逐个调用esbuild.transform压缩而项目自身的源码则保持原样可读。为什么要费劲做一个半压缩版答案很朴素方便用户排查问题。出问题时把.user.js发给作者自家代码一眼能看懂第三方库也不至于撑大文件体积。一键发布npm run release 的七步流水线build/release.ts 把发版这件容易出错的重复劳动变成了一条命令1. 检查工作区干净git status 2. 运行全部测试npm test 3. 执行构建编译npm run build 4. npm version 升级 patch / minor / major 5. 提交 package.json 变更 6. 创建带注释的 Git 标签 vX.Y.Z 7. 推送代码与标签使用方式非常直接npm run release—— 默认升 patch3.3.118 → 3.3.119npm run release -- minor—— 升小版本npm run release -- major—— 升大版本它还有一个贴心的自动回滚设计build/release.ts发布前记录当前提交与标签任何一步失败都会git reset --hard回到起点并删除已打的标签避免留下半成品版本。底层 git 操作统一封装在 build/git.ts 中日志则通过 build/log.ts 按build / release / i18n / git分类输出终端观感整齐划一。CI 自动化预览版与正式版双轨发布发布流水线定义在 .github/workflows/ 中采用双分支双轨制 预览轨Preview.yml触发条件向dev分支推送且改动涉及src/、build/、package.json等关键路径执行npm run build preview把产物挂到一个可反复删除重建的previewrelease 上适合先给社区尝鲜的灰度场景 正式版轨Release.yml触发条件向master分支推送执行npm run build latest后依次创建vX.Y.Z版本存档 → 更新指向它的latest正式版 →删除旧 dev 分支并基于 master 重建这套master 发布、dev 重建的循环让分支模型始终保持简单dev 永远是最新正式版的开发起点预览版随时可试正式版稳定可装。相关文件速查文件职责build/build.ts构建主流程类型检查 元数据注入 双产物打包build/generate-i18n.tsi18nPlugin 插件 watch 模式build/inlineCSS.tsCSS 内联插件build/minifyModules.ts第三方依赖选择性压缩插件build/release.ts一键发布 失败回滚build/git.tsgit 命令封装.github/workflows/Release.yml正式版发布工作流.github/workflows/Preview.yml预览版发布工作流小结IwaraDownloadTool 的构建系统给同类油猴项目提供了一个很好的参考范式用 esbuild 解决 90% 的打包问题用几个百行内的小插件解决剩下 10% 的个性化需求再配合一条带自动回滚的发布脚本和双轨 CI 流水线就能实现从提交代码到用户点一下自动更新的完整闭环。对于想让自己的 UserScript 也拥有自动更新、多语言、CSS 内联能力的开发者这套自研插件 一键发布的方案几乎可以直接照搬 【免费下载链接】IwaraDownloadToolIwara 下载工具 | Iwara Downloader项目地址: https://gitcode.com/gh_mirrors/iw/IwaraDownloadTool创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进