尝试无构建的 Web 应用程序 • AndreGarzia.com

几年前作者创建了一个名为Little Webby Press的电子书生成器,可将带有Markdown文件的文件夹转换为 EPUB3 非 DRM 电子书文件和包含书籍静态网站的压缩包。其亮点是所有工作流程都在客户端进行,无需后端、数据库或用户账户,只需拖放文件夹并按下按钮即可。过去曾用它制作一些小众技术书籍,但不知有多少人使用过。

旧版本的 Little Webby Press 利用以下技术栈构建:Svelte 3 用于 UI,BrowserFS 实现浏览器端文件系统以利用 NodeJS 文件处理例程,Handlebars 用于电子书和网站生成的模板,JsZip 用于创建 EPUB 和包含网站的压缩包,Rollup 和众多插件,Taildwind 和 Daisy 用于 CSS。

但作者不喜欢当前的 Svelte 版本和当前依赖转译、框架和依赖过多以及构建步骤繁琐的 Web 开发生态系统,所以决定用更适合自己的技术栈重写 Little Webby Press。新版本的主要目标是消除构建步骤,实现无需构建的系统,让编写的 JS 直接在浏览器中运行。保留了许多基于 NodeJS 的依赖,但使用importMapJsDelivr获取它们,从 Svelte 切换到Mithril,完全移除 BrowserFS 并创建自己的文件处理例程,移除所有 CSS 相关内容并替换为Pico CSS。代码变小,运行的就是浏览器运行的代码,没有 JSX、Svelte 模板和浏览器不理解的 JS 特性。存储库就是实际运行的应用,Github Pages 从存储库的根目录提供服务,任何更改都是新的部署,无需 Github 操作或运行脚本。

它的工作原理是一个简单的 Mithril 应用,带有app.js中的路由器和三个路由,分别用于书籍生成应用、文档和简单的关于页面。书籍生成需要一个源文件夹,可拖放或使用“加载手稿文件夹”按钮,然后通过多个循环处理文件并使用 Handlebars 生成 HTML 和其他文件,生成的文件树用 JsZip 打包下载。输出可通过TOML 控制文件配置,模板在应用加载时加载。由于没有构建系统,可在本地下载文件并使用喜欢的 Web 服务器运行,也可根据需要进行调整。

意外的收获是性能大幅提升,生成《白鲸》的 EPUB 旧版本需约 2.5 秒,新版本只需 125 毫秒,生成电子书和网站,旧版本需 4.7 秒,新版本不到半秒。作者认为未来将专注于无需构建的 Web 应用,因为这能让他享受工作过程。

阅读 10
0 条评论