前端工程化

自动化构建的支线任务目标：区分开发环境 / 生产环境。在前端工程化之前，前端代码就是简单的 HTML + JS + CSS，放在服务器上就能跑。但现代前端工程有两个典型场景：

前端发版自动化实战：打包时自动更新版本号并展示 commitId最近在项目中做了个优化项，就是打包时自动更新版本号，在页面上展示当前应用的版本信息。最终效果大概是这样的：

项目代码提交检测机制实现为提高了代码质量和团队协作效率。通过 Git hooks 和工具链的配合，实现了代码提交检测机制：采用两层检测机制来确保代码质量和提交规范：

为什么打 npm 包时要将 Vue/React 进行 external 处理？本文基于 vite （rollup）来讨论 external 配置，跟大家一起探讨 npm 包开发中和业务项目开发中，打包配置 external 所扮演的角色有何不同！（ps：为方便大家自己研究下案例代码的执行，完整代码已经上传 github，有需要的朋友可以自行 clone 下来玩玩。

前端工程化—实战npm包深入理解 external 及实例唯一性本文基于 vite （rollup）来讨论 external 配置，跟大家一起探讨 npm 包开发中和业务项目开发中，打包配置 external 所扮演的角色有何不同！（ps：为方便大家自己研究下案例代码的执行，完整代码已经上传 github，有需要的朋友可以自行 clone 下来玩玩。

从 npm 包实战深入理解 external 及实例唯一性本文基于 vite （rollup）来讨论 external 配置，跟大家一起探讨 npm 包开发中和业务项目开发中，打包配置 external 所扮演的角色有何不同！（ps：为方便大家自己研究下案例代码的执行，完整代码已经上传 github，有需要的朋友可以自行 clone 下来玩玩。

从迁移至 Rsbuild 说起，前端为什么要工程化这段时间，我陆陆续续完成了两个旧项目的构建工具的升级（从老版本的使用 Webpack 的 Create React App 升级到基于 Rspack 的 Rsbuild）。

手写一个Webpack HMR插件——彻底搞懂热更新原理Webpack热更新是我们开发环境中人人皆知的基本能力，同时也是面试中比较频繁会问到的话题，那里你有没有想过整个过程是怎么实现的？

PNPM的原理实现pnpm 是一个快速、节省磁盘空间的 JavaScript 包管理器，通过硬链接共享依赖和软链接组织 node_modules 结构，比 npm 和 yarn 更高效。核心思想：是多个项目共用一个相同的依赖。

Workspace搭建Vue3+组件分离的Monorepo项目三种主流的代码仓库管理策略。它们代表了三种不同的哲学和工程实践，各有优劣，适用于不同的场景。上图是git在不同策略的维护代码的效果，Mono-Repo最终还是回归单个仓库。

前端模块化详解：CommonJS 与 ES Module 核心原理与面试指南在前端开发中，模块化是必不可少的重要概念。随着 JavaScript 生态的发展，CommonJS 和 ES Module 成为最主流的两种模块化方案。本文将深入剖析两者的核心原理，并通过典型面试题帮助大家彻底掌握模块化知识。

如何实现TypeScript级的polyfill自动引入在现代前端开发中，polyfill是确保代码在不同浏览器中兼容性的重要手段。传统的polyfill解决方案通常是在构建时解析JavaScript代码，通过检测特定方法调用来决定引入哪些polyfill。

微前端学习记录(qiankun、wujie、micro-app)不一定，任何技术都是取决于你的需求，过度设计反而导致程序更加糟糕，因为微前端并不是万能的，各个微前端框架都存在一些问题，甚至无法解决你的问题，如果你不知道自己是否需要微前端，那么大概率是不需要。

webpack打包优化Webpack 的优化点很多，可以分成构建速度优化和打包体积优化两大类。下面给你整理一份比较系统的清单：

奔跑的蜗牛ing

Vue3 + Element Plus 输入框省略号插件：零侵入式全局解决方案🚀 Vue3 + Element Plus 输入框省略号插件：零侵入式全局解决方案在日常开发中，我们经常会遇到输入框内容过长需要显示省略号的需求。传统的做法是在每个组件中手动添加样式和逻辑，但这种方式存在以下问题：

样式工程化：如何实现Design System对于样式的处理，我经历了好几个阶段，也对其中的琐碎、麻烦、相互干扰、不够工程化深恶痛绝，可以说这玩意就是我从后端开发转向全栈的一个拦路虎。好在我现在踩了很多坑，也算积累了一点经验了。

CI/CD学习记录（基于GitLab）首先来回忆一下之前是怎么发版的？仅有测试和正式两个环境的情况下，大致如下以上步骤，提交代码和合并代码其实还是比较省时的，但是构建和部署是需要花比较多的时间的也是比较容易出错的，尤其是比较大型的项目，那有没有办法让打包构建和部署，甚至是自动测试，交给一些工具来做呢？我们只需要提交代码，工具检测到代码变了，就自动帮我打包构建、自动化测试并部署到服务器。这样一来程序员就可以少干一些事情，同时也能达到一个快捷、稳定、可靠的效果。

如何通过前端工程自动生成字体图标各位网友晚上好，相信大家都知道字体图标。字体图标虽然有轻量、矢量、易调整、兼容性好等优点，但有一个重大缺陷就是维护比较麻烦。在过去我们在维护图标库时，往往需要专业的字体制作人员，制作出字体图标库后再给到前端，流程繁琐且不易协同。如今，借助前端工程化的能力，我们可以轻松实现 SVG 图标自动生成字体文件，极大提升了开发效率和可维护性。

薛定谔的猫2

前端工程化系列（一）：编码规范相关最近整理了一下自己在团队中实践并落地的编码规范相关内容，主要包含以下几类：命名规范是编程规范中最重要的一部分，它直接影响到代码的可读性和可维护性

【20250909】Vite构建优化指南本文主要对Vite比较常涉及的一些优化点/优化方向进行记录整理，方便后面查阅。我们需要借助一些工具来更直观的分析打包产物，推荐如下的几个Vite插件：