去无构建

主要观点:2005 年用盗版 mp3 和喝香草可乐更新网站,曾有不用构建工具的简单更新方式,如今虽不想再这样做但仍觉得所见即所得的无构建工作流令人满意,探讨在 HTML、CSS、Javascript 中实现无构建工作流的方法及面临的性能等问题。
关键信息:

  • HTML:原生导入是未解决问题,可用多种方式实现 HTML 片段导入,如使用 iframe、web 组件等,还可通过 Cloudflare Workers 实现服务器端增强。
  • CSS:已有原生变量和嵌套支持,大部分前缀在现代浏览器中已无需,可通过主样式表链接小文件,利用设计令牌如 Open Props 无需构建步骤获取设计标记。
  • Javascript:构建工具通常做很多工作,无构建工作流不能替代所有,如现代浏览器无需转译,ES 模块自带组合系统可动态懒加载模块,Import Maps 可定义依赖映射。
    重要细节:
  • HTML 中通过不同方式实现 HTML 片段导入的代码示例,如使用 iframe 和 onload 事件、web 组件 html-include-element 及自定义服务器端处理程序等。
  • CSS 中关于性能瀑布的讨论及不同结构样式表的测试结果,主样式表链接小文件并分配层的方式。
  • Javascript 中各种特性的介绍及相关代码示例,如动态导入模块、Import Maps 的使用等。

结论:生产级开发还未完全实现无构建,对于小网站或副业可尝试无构建路线,构建工具常宣传的开发者体验不如直接将代码发送到浏览器。
链接:提供了相关演示代码的仓库及其他关于无构建工作流的资源链接。

阅读 14
0 条评论