HTML5 Boilerplate 默认 JavaScript 架构解析：app.js 业务入口与 vendor 第三方库的组织方式

HTML5 Boilerplate 默认 JavaScript 架构解析app.js 业务入口与 vendor 第三方库的组织方式【免费下载链接】html5-boilerplateA professional front-end template for building fast, robust, and adaptable web apps or sites.项目地址: https://gitcode.com/gh_mirrors/ht/html5-boilerplate本篇技术指南以 HTML5 Boilerplate 官方文档 docs/js.md 为核心骨架系统讲解该前端模板默认 JavaScript 的组织方式app.js作为站点/应用业务代码的挂载点以及vendor目录承载第三方库的分工与边界。读完本文你将理解默认脚本在 src/index.html 中的加载链路、webpack 构建流程对js/目录的处理规则并掌握在自己项目中替换、扩展这套 JS 骨架的实战方法。默认 JavaScript 的两个核心角色HTML5 Boilerplate 项目默认自带的 JavaScript 极其克制仅包含两块内容文档 docs/js.md 对此给出了明确分工app.js用于包含contain或引用reference你的站点/应用 JavaScript 代码vendor目录用于统一存放所有第三方third-party库代码。这两者构成了 H5BP 的 JS 组织哲学自己的业务代码放app.js别人的库代码放vendor/互不混淆。在仓库中的实际目录结构为 src/js/app.js 与src/js/vendor/由 test/file_existence.mjs 的期望清单确认构建产物中对应存在js/vendor/.gitkeep占位文件。app.js你的业务代码入口一个刻意留白的文件在当前的仓库中src/js/app.js 是一个空文件。这是 H5BP 的刻意设计它不预置任何 jQuery 封装、不强行绑定任何框架把决定权完全交给开发者。官方文档的表述值得细读This file can be used to contain or reference your site/app JavaScript code. If youre working on something more advanced you might replace this file entirely. Thats cool.翻译过来即app.js既可以直接内联编写你的业务逻辑也可以作为入口去引用/加载其他模块如果你的项目足够复杂例如引入了 React、Vue 或大型模块化工程完全可以整体替换掉这个文件——这是被官方明确认可的做法。在 HTML 中的加载方式app.js通过 src/index.html 底部的标准script标签引入body !-- Add your site or application content here -- pHello world! This is HTML5 Boilerplate./p script srcjs/app.js/script /body注意两点约定脚本放在/body之前保证 DOM 解析完成后再执行脚本避免阻塞首屏渲染路径写为js/app.js与 src/webpack.common.js 中的入口/产物路径一一对应。作为 webpack 构建入口在 v9 及之后版本中H5BP 内置了一套基于 webpack 的开发/构建管线。 src/webpack.common.js 明确将app.js指定为唯一入口const path require(path); module.exports { entry: { app: ./js/app.js, }, output: { path: path.resolve(__dirname, dist), clean: true, filename: ./js/app.js, }, };这意味着src/js/app.js是编译起点所有import/require进来的模块都会被打包进产物产物仍输出为dist/js/app.js与 HTML 中的引用路径保持一致无需改任何 HTML 代码clean: true会在每次构建前清空dist/保证产物目录干净。开发与生产的两种运行模式配套的 webpack 配置为app.js提供了完整的两套运行环境均由 src/package.json 的 scripts 驱动开发模式src/webpack.config.dev.jsconst { merge } require(webpack-merge); const common require(./webpack.common.js); module.exports merge(common, { mode: development, devtool: inline-source-map, devServer: { liveReload: true, hot: true, open: true, static: [./], }, });使用npm start即可启动 webpack-dev-serverhot: true开启模块热替换HMR修改app.js后浏览器无需整页刷新即可看到效果inline-source-map让报错直接定位到源文件而非打包产物。生产模式src/webpack.config.prod.jsmodule.exports merge(common, { mode: production, plugins: [ new HtmlWebpackPlugin({ template: ./index.html, }), new CopyPlugin({ patterns: [ // ... 其他静态资源 { from: js/vendor, to: js/vendor }, ], }), ], });mode: production会自动启用代码压缩与 tree-shakingHtmlWebpackPlugin会基于index.html模板生成最终的 HTML 并自动注入打包后的脚本引用而CopyPlugin负责把js/vendor/目录原样复制到产物中。vendor 目录第三方库的统一归宿文档对vendor的定位是一句话但含义清晰This directory can be used to contain all third-party library code.即凡是外部引入的库jQuery、Lodash、某个 UI 插件等都应集中放在js/vendor/下而不是散落在业务代码中。这一约定带来的好处包括职责清晰一眼即可区分「业务代码」与「第三方依赖」便于升级替换库版本时只需改动vendor/内文件不影响app.js构建可预期CopyPlugin对vendor采用原样拷贝策略{ from: js/vendor, to: js/vendor }第三方库文件不打乱、不参与打包混淆而app.js中的业务代码则会被 webpack 处理——两条路径互不干扰。仓库当前通过 src/js/app.js 同级目录中的.gitkeep占位文件保留vendor目录结构该要求被 test/file_existence.mjs 明确列为构建产物的期望项表明这是一个「预留好、待填充」的目录。测试如何守护这套 JS 结构仓库的测试直接印证了上述目录约定。 test/file_existence.mjs 定义了dist/目录必须包含的期望文件清单其中与 JavaScript 相关的条目为js/, js/app.js, js/vendor/, js/vendor/.gitkeep,该测试通过globSync递归扫描构建产物逐一断言这些文件/目录必须存在同时反向检查清单之外的文件不得出现见 test/file_existence.mjs。这意味着任何一次构建只要js/app.js或js/vendor/缺失npm test就会失败——app.js与vendor的骨架约定是被自动化测试锁定的项目事实。实战如何在你的项目中落地这套组织方式基于以上分析推荐的做法如下保持骨架填充业务直接在 src/js/app.js 中编写或import你的业务逻辑使用npm start开发热更新使用npm run build产出dist/。第三方库进 vendor将下载或拷贝的库文件放入src/js/vendor/通过CopyPlugin原样带入产物。若库支持 npm 安装更现代的做法是npm install后在app.js中import交由 webpack 打包源码级 tree-shaking 更优。重度工程化时可整体替换如果项目演进为组件化应用可以完全重写app.js的入口内容甚至更换入口文件——只需同步修改 src/webpack.common.js 的entry与 HTML 中的script引用即可。保持测试绿色任何结构调整都请以 test/file_existence.mjs 为校验基准避免破坏js/、js/app.js、js/vendor/的产物约定。小结HTML5 Boilerplate 对 JavaScript 的态度是「最小可用、边界清晰」app.js是业务代码的容器与 webpack 构建入口vendor是第三方库的专属目录二者通过 src/index.html 的脚本标签与 src/webpack.common.js 的构建配置串联成一条完整链路。理解这套骨架你既能开箱即用地快速起步也能在项目复杂化时从容地替换与扩展这正是 H5BP 作为「专业前端模板」的核心理念之一。【免费下载链接】html5-boilerplateA professional front-end template for building fast, robust, and adaptable web apps or sites.项目地址: https://gitcode.com/gh_mirrors/ht/html5-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考