前端工程化

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 数据的核心价值所在。

当时只道寻常

从零到一打造企业级全栈后台管理系统 —— 技术选型、工程化实践与深度思考耗时数月独立开发，摘录最具代表性的架构决策与实现细节，欢迎 Star 交流。YunHe-Vue（云禾管理系统）是一套面向前端开发者进阶全栈的企业级后台管理系统模板。

Monorepo 里有 app 也有共享包，lerna 真的还需要吗？我手里有个 monorepo：技术栈是 pnpm workspace + lerna，目前只有一个 app 子包。

当时只道寻常

一个「强迫症」程序员的坦白：我是如何把 SVG 图标体积缩小 30%本文手把手教你在前端项目中实现 SVG 图标批量清理自动化，通过 Node.js 脚本移除 fill、class、version 等冗余属性，配合多目录支持与递归遍历，实现图标体积普遍缩减 30%，显著提升首屏加载性能

nrm、corepack、npm registry 三者的爱恨情仇明明 nrm use taobao 切了源，corepack prepare pnpm 下载还是龟速？为什么 npm install 快了，但 corepack 不理你？今天一篇理清这三个“源”的关系。

Corepack 完全解析：从懵到懂，包管理器自由了用过 corepack enable 却搞不清 prepare 是干啥？明明执行了 prepare 却报 command not found？这篇带你彻底搞懂 Corepack 的工作机制。

一个 sudo 引发的血案：npm 全局包权限错乱彻底修复明明自己是电脑主人，装个全局包却要 sudo，删个包还报 EACCES 没权限？这篇带你彻底铲除这枚定时炸弹。

别再让 pnpm 跟着 nvm 跑了！独立安装终极指南还在用 npm install -g pnpm？换一个 Node 版本就 command not found 了吧？今天一篇讲透，让 pnpm 彻底脱离 nvm 的控制。

Playwright MCP 页面捕获：Snapshot、截图、HTML 到底选哪个？🚀 省流助手（速通结论）Accessibility Snapshot 是语义地图，截图是照片，HTML 是设计图纸——三者看到的世界完全不同。 Snapshot 告诉你“页面能交互什么”，截图告诉你“页面长什么样”，HTML 告诉你“源码写了什么”，而绝大多数自动化场景只需要第一个答案。默认用 Snapshot 作主力交互定位，token 成本极低、ref 定位稳定、自动过滤不可见元素；只在分析视觉风格时补一张截图，研究组件实现时才掏 HTML。格局建议：不要再用“截图+坐标”这种给人看的思路驱动

厌倦了重度耦合？我用 Vue3 撸了一个真·插件化中后台框架做前端这些年，经手过大大小小几十个中后台项目。市面上的开源 Admin 模板很多，UI 一个比一个炫酷，但真用到实际业务里，往往有一个致命的痛点：强耦合。

前端工程化七连问：从紧急修复到版本控制，一文打通工程化任督二脉本文系统梳理前端工程化中的7个高频问题：npm 紧急修复、代码分包、分支部署、browserslist、CJS 转 ESM、Git Hooks、Semver。每个问题附带原理分析和实战方案。

令人头痛的前端环境令人头痛的前端环境——从一次 npm i 报错说起前段时间 clone 了一个开源项目，本地执行 npm i 安装依赖后，启动开发服务器时报了下面这个错：