第85课：Git Hooks 与 Husky——提交前检查、commitlint、规范提交信息版本控制是现代软件工程的基石，而 Git Hooks 是嵌入在 Git 工作流中的自动化脚本机制。利用 Git Hooks，团队可以在代码提交、推送、合并等关键节点自动执行检查——如运行 linter、执行测试、校验提交信息格式。然而，原生 Git Hooks 配置繁琐（需手动编写 shell 脚本并放入 .git/hooks 目录），且无法纳入版本控制与团队共享。Husky 解决了这一问题：它将 Git Hooks 的管理抽象为简单的 npm 配置，使 hooks 可以随项目代码一起提交、安装...
第84课：代码规范：ESLint + Prettier——配置、规则、与编辑器集成、lint-staged + Husky高质量的代码不仅在功能上正确，还应该在风格一致、低错误风险和可维护性上达到团队标准。手动审查代码风格既低效又不可靠，因此前端工程化体系引入了两类自动化工具：ESLint 负责代码质量检查与潜在错误发现（逻辑错误、未使用的变量、不安全写法），Prettier 负责代码格式化（缩进、引号、分号等风格统一）。两者分工明确，配合使用可以大幅减少 Code Review 中的风格争议，让团队专注于逻辑和架构。本节课将系统讲解 ESLint 的配置体系、规则集与共享配置、Pret...
第83课：Babel 与代码转译——预设、插件、browserslist、core-js polyfill 策略现代 JavaScript 语法日新月异：ES6+ 引入的箭头函数、模板字符串、Promise、async/await 等特性极大地提升了开发效率，但浏览器对它们的支持进度参差不齐。Babel 是解决这个问题的标准工具：它把使用最新语法编写的代码转译为向后兼容的 JavaScript，让开发者无需等待浏览器支持即可使用新特性。Babel 本身是一个编译平台，核心转译能力由插件（Plugin） 提供，而预设（Preset） 则是插件的集合。本节课将深入讲解 Babel 的工作流程...
第82课：Webpack 性能优化——Code Splitting、懒加载、SplitChunksPlugin、缓存策略Webpack 的核心使命之一是将应用打包为浏览器可高效加载的静态资源。默认情况下，所有模块会被打包为一个（或少数几个）巨大的 bundle，导致首屏加载缓慢、缓存失效频繁（任何一处代码变动都会使整个 bundle 的哈希变化）。Webpack 提供了多层优化手段来解决这些问题：Code Splitting 将代码拆分为多个较小的 chunk，懒加载 按需加载非首屏模块，**SplitChunksPlugin** 精细控制公共依赖的提取和合并，缓存策略 利用内容哈希和运...
第81课：Webpack 常用 Loader 与 Plugin——css-loader、babel-loader、HtmlWebpackPlugin、MiniCssExtractPlugin 等上一课我们学习了 Webpack 的五大核心概念。本节课将深入到最常用的 Loader 和 Plugin 的具体配置与工作原理。在日常开发中，你不需要记住所有 Loader 和 Plugin 的细节，但必须熟练掌握以下高频组合：**babel-loader（ES6+ 转译）、css-loader + style-loader / MiniCssExtractPlugin（CSS 处理）、...
第80课：Webpack 核心概念——Entry、Output、Loader、Plugin、ModeWebpack 是现代前端工程化的奠基性工具。自 2014 年发布以来，它定义了“一切皆模块”的打包范式——JavaScript、CSS、图片、字体、HTML 都可以被视为模块，通过 Loader 和 Plugin 进行转换和优化。尽管 Vite 等新一代构建工具在开发体验上有所超越，Webpack 凭借其成熟的生态系统（数以千计的 Loader 和 Plugin）、高度灵活的配置以及对复杂场景的深度支持（微前端、Module Federation、多页应用），仍然是大量企业级项目的核心基...
第79课：Vite 配置与环境变量——vite.config.ts、环境变量、代理配置、构建优化上一课我们学习了 Vite 的冷启动原理、HMR 机制和插件系统。本节课将深入 Vite 的配置文件——vite.config.ts 中那些控制开发体验和生产输出的关键选项。我们将逐一拆解 环境变量（.env 文件）的加载与类型安全使用、开发服务器代理（server.proxy）解决跨域问题的配置技巧、以及生产构建优化（代码分割、资源内联、压缩策略）的最佳实践。掌握这些配置，你就能将 Vite 从一个“能跑的开发服务器”调校为“高性能的生产构建流水线”。
1. 环境变量与模式Vite 使用 ...
第78课：Vite 构建工具入门——项目初始化、开发服务器、HMR 原理、插件机制Vite（法语“快”）是由 Vue.js 作者尤雨溪开发的下一代前端构建工具。它由两部分组成：一个基于浏览器原生 ES Modules 的开发服务器，提供极速的冷启动和热模块替换（HMR）；以及一个基于 Rollup 的生产构建引擎，将代码打包为高度优化的静态资源。Vite 的设计哲学是“利用浏览器已经支持的 ES Modules 来加速开发，仅在打包时才做传统构建”。本节课将系统讲解 Vite 的项目初始化、开发服务器与 HMR 的底层原理、以及插件系统的架构——如何通过 Rollup 插件和 Vite ...
第77课：包管理器进阶：yarn 与 pnpm——workspace、幽灵依赖、硬链接与符号链接、pnpm 优势上一课我们学习了包管理器的核心职责、依赖解析算法、lock 文件和 monorepo workspaces 的基础配置。本节课将深入两个高级主题：yarn 的 Plug’n’Play（PnP）模式（一种完全抛弃 node_modules 的依赖管理方案）、pnpm 的存储与链接机制（硬链接 + 符号链接如何彻底消灭幽灵依赖并极致节省磁盘空间），以及两者在 monorepo 场景下的 workspace 协议 差异。理解这些底层实现原理，能帮助你在中大型项目中正确选型，并在依赖问...
第76课：包管理器深度：npm、yarn、pnpm——依赖解析、lock 文件、workspaces、幽灵依赖包管理器是前端工程化的枢纽。它们不仅仅下载依赖——它们决定着项目的依赖树结构、安装速度、磁盘占用以及跨环境的一致性。社区中并存着三大主流包管理器：npm（Node 生态标配）、yarn（Facebook 推出的高效替代品）和 pnpm（基于硬链接的磁盘优化方案）。它们在依赖解析算法、lock 文件格式、node_modules 组织结构和monorepo 支持上有着本质的设计差异。理解这些差异，你才能根据项目规模、团队协作和 CI/CD 需求做出正确的技术选型，并避免“...
