前端工程化

前端工程化效率神器：pnpm 从入门到精通在前端开发中，npm 和 yarn 是比较常用的工具，但随着项目体积增大、依赖增多，难免会遇到这些问题：node_modules 占用过大的磁盘空间？依赖安装速度越来越慢？Monorepo 项目管理繁琐？

前端工程化实战：手把手教你构建项目脚手架面对如今丰富的前端生态，开启新项目时你是否经常陷入这样的纠结：以上烦恼都可以通过前端脚手架搞定，从而不再重复造轮子，而是打造专属自身团队的最佳实践。

互联网大厂前端面试实录：HTML5、ES6、Vue/React、工程化与性能优化全覆盖本故事发生在一家知名互联网大厂的前端面试现场。面试官老王经验丰富，严肃认真。而面试者避雷哥是一位幽默风趣、偶尔有点水的程序员，面对基础问题还能对答如流，但复杂问题就有点应付了。

重识 alias —— npm包开发的神器本文基于 vite 和 pnpm workspace 的 monorepo 架构跟大家一起重识 alias 的原理和用法！（ps：为方便大家自己研究下案例代码的执行，完整代码已经上传 github，有需要的朋友可以自行 clone 下来玩玩。

2025前端AI开发实战范式：RAG+私有库落地指南随着人工智能技术的快速发展，前端开发正在经历一场革命性的变革。传统的开发模式已经无法满足现代应用对智能化、个性化的需求。本文将深入探讨最新的前端AI编程范式，以RAG（检索增强生成）结合私有组件库为核心，为开发者提供一套完整的实战落地指南。

Vue3之响应式系统响应式系统对于前端开发者来说简直就是神，它使我们只需要关注数据，由数据驱动视图，使应用状态管理更加清晰可维护，极大的提高了开发效率，简化了代码结构。

为什么BigInt无法通过Babel降级？大家好，我是前端兼容性专家老林。今天我将为大家分享话题：为什么BigInt无法通过Babel降级？Babel作为JavaScript编译器，能够将新语法转译成旧语法，让开发者能够提前使用最新的语言特性。然而，当涉及到BigInt时，情况就变得复杂起来。

了解 pnpm 的优势，然后将已有项目的 yarn 换成 pnpm之前一直接触到 pnpm，但没有应用到业务项目，最近的业务项目安装和编译时间太长了，所以尝试性的换成 pnpm.

从 Monorepo 重温 ESM 的模块化机制本文基于 pnpm workspace 的 monorepo 架构跟大家一起重温 esm 的模块机制，驱散大家对于 monorepo 架构中模块导入导出的疑云。（ps：为方便大家自己研究下案例代码的执行，完整代码已经上传 github，有需要的朋友可以自行 clone 下来玩玩。

快速定位源码问题：SourceMap的生成/使用/文件格式与历史SourceMap，中文名叫“源映射”。在前端开发中，打包后的文件中除了我们写的代码与npm包的代码之外，经常还会出现一个后缀名为.map的文件。这就是SourceMap文件，也是我们今天要讲的主题。

自动化构建的支线任务目标：区分开发环境 / 生产环境。在前端工程化之前，前端代码就是简单的 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最终还是回归单个仓库。