前端工程化

Webpack在前端项目中究竟发挥什么作用？想要知道Webpack在前端项目中，发挥什么作用，那就得知道它是由哪几部分组成的Webpack是一个前端的，针对于模块的打包工具。可以把项目中的资源文件，按照既定的方式，当作对应的模块，打包成可以在浏览器端运行的资源文件。

微前端 Micro-App 实践微前端的诞生，源于现代前端开发在应对大型、复杂、长周期项目时，传统单体前端架构暴露出的一系列系统性痛点。

初心丨哈士奇

用 AI 自动生成前端代码影响范围报告:从 CI 到测试用例各位读者大家好，进公司一年了，很久没写文章了，最近ai提效搞的很火，相信大家公司也一定有很多ai提效的经验，这里哈士奇也简单做了一个ai提效的工具，给大家分享一下思路，大家如果有其他经验也欢迎和哈士奇分享。

前端模块化设计实战：从 Vue3 Composition API 到 Monorepo 工程化模块设计的本质是认知管理而非代码管理——所有技术决策最终服务于降低开发者的认知负荷。本文从 Vue 3、React 生态出发，深入前端状态管理、Monorepo 工程化与代码分割策略，提供可直接落地的模块化方案。

打呵欠的猫

【1】用了3个月AI写代码，我每天在重复同一个错误（90%的人都在犯）今天第 15 次跟 AI 说"我们项目用 React + TypeScript + Antd，状态管理用 Rematch，日期用 dayjs 不要用 moment……"

Vue 项目实战与性能优化：工程化与协作全指南（规范 + 配置 + 协作 + 文档）做 Vue 项目，个人开发靠 “手感”，团队开发靠 “规范”；小项目拼 “功能实现”，大项目拼 “工程化与协作”。

一个案例教你彻底搞明白`AbortController` 、`AbortSignal`说到前端竞态问题，相信大家并不陌生。但真正落地时，大多数开发者选择忽略边界。哪怕是前端的明星项目vite都不能幸免。

全栈日记之工程化设计（webpack）🔥首先明确这篇文章目标，就是前端工程化，而webpack是我们工程化之一。通过编写一个webpack的配置，理清楚我们为什么要写这些配置。也就是说：我们的配置是服务于我们的想法，写的配置也是服务于我们的项目，根据我们的项目情况跟想要的效果进行编写，所以在这里并不会太多在于webpack有哪些模块，模块里面又有哪些参数。

canonical_entropy

超越Harness Engineering: AGE 应用开发模板介绍在我此前的两篇文章中已经介绍了AGE的基本理论概念以及它和Spec-Driven开发以及Harness Engineering的区别。为了便于实际落地AGE的实践，我新建了一个新的模板项目attractor-guided-engineering-template，本文是对这个模板的简单介绍。

【前端工程化原理通识：从源头到运行时的理论阐述】前端工程化，本质上是一套“将开发效率与运行效率进行系统化平衡的方法论”。它通过一系列工具、规范和流程，把开发阶段难以直接交付的代码形态（如TypeScript、JSX、分散的模块），转化为浏览器或Node.js环境能够高效执行的最终产物。

IDE 升级重启后 Next.js dev 起不来？kill 无效的真正原因升级 Cursor 并重启 IDE 后，终端里 pnpm dev 报端口占用、提示「已有 Next dev 在跑」，按提示 kill <pid> 却反复无效——很常见，也不只是 Cursor 的锅。根因通常是：IDE 重启不会替你结束上次终端里拉起的 next-server 孤儿进程；而这类进程有时不吃 SIGTERM，必须 kill -9，并可能要清理 .next/dev/lock。本文把现象、原理、排查命令和习惯写全，适用于 VS Code / WebStorm 等同类场景。

Vite+ vs nvm：一次「全局 CLI 失踪」事故引出的 Node 工具链选型工具链的"小毛病"经常引出大问题。这次的引子很简单：开发机上一直安装着某个全局 npm CLI（顶层命令就一个动词），日常通过命令行和 AI 编程助手都在用。

Rollup 官方插件 @rollup/plugin-inject 详解@rollup/plugin-inject是rollup官方自带的一个插件，是对标webpack中ProvidePlugin的存在。inject插件功能实用，源码也很值得阅读。今天我就为大家详解inject插件的使用。

一口气讲清楚 Monorepo、Turborepo、pnpm、Changesets 到底是什么？你肯定遇到过这种情况：项目里同时有前端、后端、公共组件，放在一个仓库嫌乱，拆成多个仓库又改一个公共函数要在五个项目里各改一遍。于是出现了 Monorepo、Turborepo、pnpm、Changesets 这四个词。它们不是互相替代，而是分别解决工程化中不同层面的问题。读完之后，你会明白它们各自解决什么、技术原理是什么、彼此之间是什么关系，以及在实际项目中该如何组合使用。

Rollup 官方插件 @rollup/plugin-inject 详解@rollup/plugin-inject是rollup官方自带的一个插件，是对标webpack中ProvidePlugin的存在。inject插件功能实用，源码也很值得阅读。今天我就为大家详解inject插件的使用。

用了多年 nvm，我终于找到 Python 的版本管理「答案」：uv场景很具体：你是个写了好几年 Node 的前端/全栈，nvm use 18、.nvmrc、nvm install --lts 闭着眼都能敲。某天接了个要跑 Python 脚本的活儿（爬数据、跑个模型、写个 CLI 工具），第一个念头不是「怎么写 Python」，而是——

新一代代码格式化工具 Oxfmt/OxlintOxfmt 是 Oxc 项目推出的新一代代码格式化工具，基于 Rust 编写，专为 JavaScript / TypeScript 生态打造。它被设计为 Prettier 的直接替代品——零配置、高度兼容、极速运行。在 100% 兼容 Prettier 格式的同时，运行速度比 Prettier 快 30 倍以上，比同为 Rust 工具链的 Biome 也快约 3 倍。

你的前端代码打包后究竟经历了什么？各位网友大家好，我是前端工程化专家老林。相信大家都打过前端包，但是你知道你的源代码是如何一步步变成前端包的呢？今天我就为大家以一个尽可能完善的构建过程来讲一讲。

Vue 的 `app.use()`、Figma 的快捷键、Vite 的插件——为什么它们底层是同一种架构？写过这种代码吗？每加一个功能，handleKeyDown 就胖一圈。半年后这文件 3000 行，圈复杂度爆表，谁都不敢动。

前端工程化 Mock 数据原理与实践在前端工程化体系中，Mock 数据是连接“前端数据模型”与“后端 API 接口”的核心桥梁。前端开发需依赖特定数据模型组织页面与组件交互流程，而该数据模型又高度依赖后端提供的 API 接口——在后端实际 API 功能完成之前，若能获得与真实接口高度一致的模拟数据，就能提前处理前端交互中的数据逻辑，待后端开发完成进入联调阶段后，再无缝切换至真实后端服务接口，这正是 Mock 数据的核心价值所在。