【开源自荐】A Box of Tools:35 个纯前端的文件工具,源码即浏览器运行的代码
Author: JosanshuoCreated Aug 26, 2026Updated Aug 26, 2026
项目地址:https://github.com/A-Box-of-Tools/website 在线体验:https://abox.tools/zh/
35 个浏览器端的小工具,一个工具只干一件事:图片压到指定大小、合并/压缩/涂黑 PDF、裁剪视频、剪辑音频、读二维码、格式化 JSON、文本对比、生成多尺寸 ico。
这个周刊讲的是前端精读,所以说几个实现上的取舍,可能比工具清单本身有意思:
- JavaScript 没有构建步骤。整站没有依赖、没有 lockfile,
tools/<slug>/src/里的 ES module 就是浏览器逐字节加载的文件。代价是不能用任何需要编译的东西, 好处是 View Source 和仓库里的代码永远一致,python build.py --check可以 把线上文件和仓库逐字节比对。 - 共享模块不能被单测覆盖的叶子模块 import。构建时把
shared/js/x.js拷进 各个工具的src/shared/x.js,这个路径在源码树里并不存在,所以./shared/的 import 只能写在main.js里,构建会检查这条规则。 - 用户能读到的句子一律不写在 JS 里。
src/会被逐字节拷进每种语言,字符串 写在 JS 里就等于只有英文是对的;文案放在body.html的#phrases里,用phrase()读回来。深到摸不到 DOM 的模块返回 key,由调用方去解析。 - 每个工具是独立的 service worker 注册,缓存名必须带自己的 scope 前缀——
同源共用一个 cache storage,
activate里删掉非自己前缀的缓存就会把邻居的 干掉,这个坑真踩过。
MIT 开源,15 种语言,简繁中文都是完整翻译。
Source: ascoders/weekly