HTML5 Boilerplate：基于十余年迭代开发的前端模板

html5-boilerplate：一个模板背后的十余年迭代开发

HTML5 Boilerplate 是一个专业的前端模板，用于构建快速、健壮、可适配的 Web 应用或网站，其主页位于 html5boilerplate.com。README 称它是超过 10 年迭代开发和社区知识的产物，功能列表进一步说明，这些年的积累来自 200 多位贡献者的分析、研究和实验。项目并不强加某种特定的开发理念或框架，因此你可以按照自己想要的方式组织代码，而不必遵循某一种固定的架构模式。仓库元数据列出 57,572 颗星和 12,276 个 fork，当前有 21 个未关闭的问题，项目并未归档，默认分支为 main。

html5-boilerplate：仓库负责编写项目，/dist/ 才是交付物

这个仓库是 HTML5 Boilerplate 的编写场所，仓库里的某些工具、文件和流程只服务于该项目的生产，并不是项目本身的一部分。例如 gulpfile.mjs 脚本用于构建项目，它本身不属于交付物。发布出来的项目由 /dist/ 目录的内容代表，仓库中其余一切内容都是为了制作该项目而存在的。README 打了一个直接的比方：就像你不会为了创建一个 Vue.js 应用而去克隆 vuejs/core 一样，你也不需要克隆这个仓库来基于 HTML5 Boilerplate 启动一个新站点或应用。如果你想帮助改进 HTML5 Boilerplate，可以查看仓库里的贡献文档，其中包含克隆本仓库以进行开发设置的步骤。

html5-boilerplate：四种快速开始方式

README 列出了四种开始使用的方式。第一种是使用 create-html5-boilerplate 脚本，通过 npx、npm init 或 yarn create 立即获取 npm 上发布的最新包（或 npm 上任意可用版本），且无需预先安装任何依赖。文档给出的命令是 npx create-html5-boilerplate new-site，该命令会把最新版本安装到一个名为 new-site 的文件夹中，然后依次执行 cd new-site、npm install 和 npm run start。第二种是使用模板仓库，基于 HTML5 Boilerplate 主分支的最新代码创建一个新的 GitHub 仓库。第三种是直接安装：npm install html5-boilerplate 或 yarn add html5-boilerplate，安装后 node_modules/html5-boilerplate/dist 目录就是面向最终用户的最新版本，取决于你想使用什么以及如何使用，你可能需要把该目录的内容复制粘贴到自己的项目目录中。第四种是下载最新稳定版的 zip 文件，该文件是 dist 目录的快照；在 Windows、Mac 以及 Linux 的文件管理器里解压会得到一个类似 html5-boilerplate_v9.0.0 的文件夹，而在命令行里需要先创建文件夹，再用 mkdir html5-boilerplate 和 unzip html5-boilerplate*.zip -d html5-boilerplate 把内容解压进去。

html5-boilerplate：模板里包含哪些内容

功能列表把项目描述为一个精心调校的起始模板，并以渐进增强为设计原则。包含的内容有：预留的 Open Graph 元素和属性；一个示例 package.json 文件，内置了 WebPack 命令，用于快速启动应用开发；预留的 CSS 媒体查询；实用的 CSS 辅助类；默认打印样式，且已针对性能优化；以及一种被 README 称为 delete-key friendly 的结构，意思是你不需要的部分很容易删除。项目还捆绑了详尽的文档，方便你查阅。

html5-boilerplate：浏览器支持以 Browserslist 默认配置为准

项目支持所有主流浏览器的最新稳定版本。关于具体覆盖哪些浏览器和版本，README 指向 Browserslist 的 default 配置，并建议查看该配置以了解更多细节。README 本身没有逐一列出浏览器名单，因此任何具体的浏览器版本覆盖范围都需要对照 Browserslist 默认配置来核实。

html5-boilerplate：文档与贡献

文档目录位于 docs/TOC.md，并且随项目一起打包，因此可以离线阅读，也为你撰写自己项目的文档提供了一个有用的起点。数百名开发者参与过 HTML5 Boilerplate 的开发，贡献指南位于 .github/CONTRIBUTING.md，分别涵盖 bug 报告、功能请求和拉取请求，每种都有对应的链接。任何人都欢迎参与贡献，不过在参与之前建议先阅读指南。

html5-boilerplate：许可证

README 声明代码以 MIT 许可证提供，仓库元数据中的 SPDX 标识也写的是 MIT。许可证文本本身没有在 README 中复现，因此除了 MIT 这个名称之外的具体条款，例如免责声明或 MIT 名称之外的任何条件，都无法从手头资料中确认，需要查看 LICENSE.txt 来核实。

使用 HTML5 Boilerplate 时，真正需要复制的是 dist，而不是把作者仓库当成应用依赖。可以先用 npx create-html5-boilerplate new-site 建立目录，再进入 new-site 执行 npm install 和 npm run start，观察生成目录与启动脚本是否符合项目结构。若采用 npm install html5-boilerplate，则检查 node_modules/html5-boilerplate/dist 的文件，再决定复制范围。浏览器覆盖应按 Browserslist 的 default 配置逐项核对，Open Graph、媒体查询和打印样式都属于可删改的起点，不能把示例内容直接当成业务方案。docs/TOC.md 适合离线查阅，贡献者则应先阅读 .github/CONTRIBUTING.md 中关于问题、功能请求和拉取请求的规则。MIT 名称已由 README 明确给出，具体许可条款仍应以 LICENSE.txt 为准。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。 html5-boilerplate 的 README 将“html5-boilerplate：许可证”作为项目说明的一部分，实际采用时应把这一项与对应版本的文件和命令逐一对照。

编辑结论

README 始终强调一个关键点：/dist/ 是发布出来的项目，仓库中其余内容都是制作该项目所用的工具。无论你通过 npx、模板仓库、npm 还是 zip 快照开始，所有四种方式最终都指向那个 dist 目录。 适合谁、不适合谁以及先核对什么，必须结合本项目的启动入口、实际输出和许可证边界作出判断。

官方来源

1. Official documentation
2. Official README
3. Project repository
4. Release notes