EnvBoard v2.0.0 正式发布PWA 离线可用、中英双语、CLI 三连320 用例护航从 v1.0.0 到 v2.0.0EnvBoard 又走了 6 个版本。这一版没有继续堆解析格式而是把开发重心放在了**「让工具更可用」**上PWA 离线安装、全站中英双语、CLI 补齐 diff / sync / init以及一套从组件到 E2E 的测试体系本文记录 v2.0.0 的开发过程与设计取舍——包括「为什么 PWA 和 i18n 都选择零依赖手写」⭐ 项目信息GitHub 仓库yyyhhh0317/EnvBoard在线 Demohttps://yyyhhh0317.github.io/EnvBoard/v2.0.0 ReleaseRelease NotesStar ⭐觉得有用请点一下你的 Star 是持续更新的动力️ 版本演进回顾从 v1.0.0 到 v2.0.0EnvBoard 一共经历了 6 个版本版本核心功能主要定位v1.0.0搜索替换 测试基线 163 用例 关键 Bug 修复稳定发布v1.1.0撤销 / 重做 会话持久化 无障碍a11y编辑器体验v1.2.0密钥泄露检测 导出脱敏安全v1.3.0ini / properties / TOML 解析 任意文件对比 Schema 校验格式扩展v1.4.0依赖漏洞检查 依赖关系图 Monorepo 多包扫描依赖管理v2.0.0PWA 离线可安装 中英双语 CLI 增强 测试体系升级平台化2.0 的定位很明确把「能用」升级成「好用」——离线也能用、老外也能用、命令行也能用。✨ 新功能一PWA 离线可安装痛点EnvBoard 是部署在 GitHub Pages 上的纯前端工具。在线时一切正常但——出差路上网络不稳打开工具就是白屏想把它当本地工具用每次都要开浏览器敲网址浏览器收藏夹里几十个工具找不到它PWA 正好解决这两件事离线可用可安装到桌面独立窗口像原生应用一样启动。一个重要的设计决策手写 Service Worker当时第一反应是引入vite-plugin-pwa一步到位。但这个项目有个坚持了很久的原则——Web 端零运行时依赖除 React / Vite / Tailwind 框架本身。vite-plugin-pwa 本质上是帮你生成 Service Worker 模板对于 EnvBoard 这种单页应用手写一个也就 60 行。于是我选择了手写// public/sw.js节选constCACHEenvboard-v2.0.0constPRECACHE[/,/index.html,/manifest.webmanifest,...icons]self.addEventListener(install,(e){e.waitUntil(caches.open(CACHE).then((c)c.addAll(PRECACHE)))self.skipWaiting()})self.addEventListener(fetch,(e){const{request}econsturlnewURL(request.url)if(request.modenavigate){// HTML网络优先离线回退 index.htmlSPA 路由兜底e.respondWith(fetch(request).catch(()caches.match(/index.html)))}elseif(sameOrigin(url)){// 静态资源缓存优先e.respondWith(caches.match(request).then((hit)hit||fetchAndCache(request)))}})几个取舍设计点选择原因缓存策略HTML 网络优先、资源缓存优先、离线回退 index.html既保证更新及时又保证离线可用缓存键带版本号envboard-v2.0.0发版后旧缓存自动清理不残留脏数据注册时机仅生产环境注册开发时 HMR 不受 Service Worker 干扰图标scripts/gen_pwa_icons.pyPillow生成 192/512含 maskable一键生成不依赖在线图标工具安装后Chrome 地址栏会出现安装按钮点击即可像原生应用一样独立窗口启动。✨ 新功能二中英双语i18n痛点EnvBoard 一开始只有中文界面。中文没问题但GitHub 上的海外用户看不懂按钮演示 demo 给英文团队看时还得现场翻译开源项目的 README 是英文界面是中文割裂零依赖自研同样没有引入react-i18next之类的库而是自己写了一个极简方案src/i18n/核心就三件事扁平字典zh.ts/en.ts两个文件key 按组件分区命名header.title/table.searchPlaceholder插值t(key, params)支持{name}占位符替换回退链当前语言 → 中文 → key 本身缺翻译也不白屏// src/i18n/zh.ts节选exportdefault{header.switchLang:切换语言,table.searchPlaceholder:搜索变量名 / 值 / 注释…,secretScan.total:检测到 {count} 个疑似泄露的密钥,}// 使用const{t}useI18n()button title{t(header.switchLang)}{t(header.switchLang)}/button语言选择会持久化到localStorage并同步html lang属性利于读屏与 SEO首次访问时自动探测本地记忆 浏览器语言英文系统默认英文 中文。这一轮一共抽取了19 个组件 App 共约 300 个文案 key连「撤销历史描述」「环境预设标签」开发 / 测试 / 预发布 / 生产这种细节都做了双语映射。✨ 新功能三CLI 增补 diff / sync / initv0.4.0 给 CLI 打下了基础scan / status / install / uninstall / edit。这版补齐了日常最常做的三件事命令说明典型场景envboard diff对比 .env 与 .env.example输出一致 / 缺失 / 多余 / 空值统计与明细上线前检查环境变量有没有漏配envboard sync把 example 里缺失的 key 追加到 .env不覆盖已有值-n预演同事新增了配置项一键同步到本地envboard init从 example 生成 .env或从 .env 反推模板值清空、注释保留新成员 clone 项目后 30 秒初始化环境# 新同事初始化环境envboard init# .env.example → .env# 上线前检查配置是否齐全envboarddiff-e.env.example-t.env# 同步新增的配置项先预演再执行envboardsync-nenvboardsyncinit的「从 .env 反推模板」是这轮最实用的细节老项目通常只有.env没有.env.example反推时值清空、注释保留生成的模板既安全不会带出真实密钥又保留了每个变量的说明。✨ 新功能四测试体系升级组件测试 E2E之前 EnvBoard 只有纯函数层的单测320 个用例。这轮把测试向上补了两层组件层测试22 例用testing-library/react覆盖核心组件的交互逻辑组件覆盖点Header品牌展示、主题切换、语言切换EnvImport粘贴解析、文件导入EnvTable渲染、过滤、增删变量、敏感值显隐EnvEditor保存 / 取消 / 禁用态SecretScanPanel泄露检测、单条 / 全部清除E2E 冒烟Playwrightplaywright.config.tse2e/smoke.spec.ts用真实浏览器跑通「导入 → 编辑 → 语言切换」主流程test(导入 .env 并完成编辑,async({page}){awaitpage.goto(/)awaitpage.getByText(粘贴内容).click()// ... 粘贴、断言表格、编辑变量、切换语言})本地运行npmi-Dplaywright/test npx playwrightinstallchromium npx playwrighttest 这轮顺手修的 BugBug 1TemplatePicker 的 map 参数与 i18n 的t命名冲突i18n 引入后组件里到处是t(xxx)。TemplatePicker 里恰好有一个templates.map((t) ...)——t被模板元素遮蔽i18n 的t在回调里全部失效。修复很简单map 参数改名tpl但这类「命名空间污染」在接入 i18n 时很典型值得注意。Bug 2EnvEditor 用了错误的弹窗 hook之前的useModal重构遗留了一个问题EnvEditor 里调用了不存在的 hook 名useModal→ 应为useModalFocus(open, close)类型检查没拦住的隐性错误。修正后弹窗的焦点管理恢复正常。 最终交付数据指标数值测试用例数32032 个测试文件全部通过组件测试22 例5 个核心组件E2E 冒烟4 用例Playwright Chromiumi18n中英双语约 300 个文案 keyCLI 命令8 个scan / status / install / uninstall / edit / diff / sync / initPWA可安装 离线可用手写 Service Worker运行时依赖0除 React / Vite / Tailwind 框架本身 本地体验gitclone https://github.com/yyyhhh0317/EnvBoard.gitcdEnvBoardnpminstallnpmrun dev# http://localhost:5173npmruntest# 跑 320 个测试npmrun build# 构建生产版本含 PWA体验清单离线打开 在线 Demo → 按 F12 切到离线 → 刷新页面依然可用安装地址栏右侧点「安装」按钮独立窗口启动双语右上角 中/EN 一键切换刷新后保持CLIcd cli npm install然后npx tsx src/index.ts init -f .env.example️ 下一步v2.0.0 之后的方向初步考虑CLI 文档完善diff / sync / init 的 README 使用说明更多导出格式Docker env file、Kubernetes ConfigMap性能优化大文件1000 变量的虚拟滚动CI 集成 E2EPlaywright 接入 GitHub Actions具体优先级看 Issue 反馈。写在最后这版最想分享的体会是「零依赖」不是洁癖而是可控性。手写 Service Worker 和 i18n 方案确实比引库多花了一些调试时间但换来的是打包产物小整包 ~330 KB无翻译库、无 PWA 插件开销升级不慌不依赖第三方库的 breaking change每一行都能看懂出了问题能自己修如果你的工具也在 GitHub Pages 上建议试试 PWA——60 行 Service Worker换来的是「网络不好也能用」的体验ROI 极高。欢迎Star ⭐IssuePR三件套。如果你有想要的功能或遇到的 Bug直接发 Issue 就行每一条我都会回复。