主要观点: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 的使用等。
结论:生产级开发还未完全实现无构建,对于小网站或副业可尝试无构建路线,构建工具常宣传的开发者体验不如直接将代码发送到浏览器。
链接:提供了相关演示代码的仓库及其他关于无构建工作流的资源链接。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。