前端工程化

🤔 v-mortal 是什么？！我只知道 v-model 啊！昨天，我正在 review 代码，突然看到几个 v-mortal 出现在 Diff 中。嗯？很陌生啊，完全没见过，搜索引擎没有结果，AI 也说不知道，问我是不是拼写错误，可能是 v-model ？

npm / yarn / pnpm：别再靠感觉选了新项目用 pnpm。Monorepo 用 pnpm workspaces。存量 yarn classic 项目不必强迁。如果你还在用 npm 跑 CI，你的构建时间和磁盘账单都有改善空间。

开源项目第195期：OpenTelemetry Demo（Astronomy Shop）— 官方出品的分布式系统可观测性实战教材"可观测性不是工具，是能力。要学会用 Traces/Metrics/Logs 诊断分布式系统，光读文档不够，得有一个真实的系统可以折腾。"

一位正在转型AI全栈的前端工程师

从 0 到 1 搭建生产级 RAG 系统：切片、召回与重排序调优实录作为一名有十年经验的前端开发者，我在转向全栈工程师的过程中，决定亲手搭建一个生产级 RAG（Retrieval-Augmented Generation）系统。目标是从一本 PDF 书籍（《好好学习》）中自动回答相关问题，例如“成甲老师从哪一年开始接触知识管理？”、“什么是临界知识？”等。

Next.js 博客左侧笔记列表是怎么从 Redis 渲染出来的？从组件、children 到动态路由一次讲清我第一次打开这个 next-blog 项目，最想知道的不是"React 是什么"，而是左侧那一列笔记到底怎么从 Redis 跑到屏幕上。这篇文章就沿这条线，把组件渲染、children、数据流、Next.js 的 layout 和动态路由串起来。先交个底：它是 npx create-next-app 起的 Next.js 全栈脚手架（next 16.3.1），用 App Router，页面默认是 React Server Component（RSC）——能在服务端 async 里直接 await 取数再返

ESLint 10 把 .eslintrc 删了：flat config 到底怎么配，我帮你踩完了你升级了 ESLint，兴冲冲地重跑一遍 lint，结果屏幕上出现的不是熟悉的 warning 列表，而是一句陌生的报错：

彻底搞懂 'use client'：Next.js 组件根本不是"只在浏览器渲染"一个 Todo 项目，让你看清 Server Component 和 Client Component 之间那条被大多数人误解的边界。

彻底搞懂 App Router 约定式路由：文件放对位置，路由就自动生成了一个 next-demo 项目，串起 page.tsx、layout.tsx、route.ts、'use client'——App Router 的"约定大于配置"一次讲清。

Harness Engineering：让 Agent 在受控边界内运行AI Agent 工程化系列第五篇。本文以 Cherry Studio 的 Tool Registry、Claude Code settings、审批、会话宿主与可观测性为例，说明 Harness Engineering 如何把“模型能做什么”变成“产品允许它在什么边界内做什么”。文中的伪代码用于解释设计逻辑，不是可直接复制的生产代码。

AINative软件工程

LLM 应用的依赖注入工程实践：解耦 Client、Prompt 和 Tool Registry，让 AI 系统真正可测试可替换作者按：我们团队有一个 LLM 应用上线后跑了 3 个月，等到要切换模型供应商的时候，才发现 LLM 客户端实例被散落在 17 个文件里，单元测试覆盖率是 0%，因为没法 mock。这篇文章就是为了不让你重蹈覆辙。

Loop Engineering：把模型调用变成可控的多步任务AI Agent 工程化系列第四篇。本文以 Cherry Studio 的 AI SDK Agent、Stream Manager 和 Agent Session Runtime 为例，讲解工具循环的状态、停止条件、Hook、错误、审批与用户 steering。文中的伪代码用于解释工程逻辑，不是可直接复制的生产实现。

Context Engineering：让 Agent 在当前步骤看到正确的事实AI Agent 工程化系列第三篇。本文以 Cherry Studio 的运行时为例，讲解对话历史、附件、知识库、记忆与 Agent Session 如何共同构成模型上下文，并给出关键算法的伪代码与工程取舍。

一次前端生产白屏复盘：旧 HTML、Hash 资源和 MIME type text/html最近处理了一次生产环境白屏问题。项目是一个 React + Vite 的 SPA 应用，构建后资源文件会带 hash，例如：

Prompt Engineering：从提示词文案到 Agent 行为契约AI Agent 工程化系列第二篇。本文以 Cherry Studio 的 Chat 与 Agent Session 运行时为例，讨论 Prompt 如何被组装、维护、测试和演进。文中的伪代码用于解释设计逻辑，不是可直接复制的生产代码。

前端技术官

前端真的比后端简单吗？在这个圈子摸爬滚打这么久，我听过最多的一句吐槽就是：前端不就是画画页面，调调接口吗？有什么难度？很多写后端的兄弟，看着前端用各种脚手架两分钟就能搭出一个漂亮的管理后台，往往会产生一种错觉：前端的门槛极低，随便拉个会写 HTML 的实习生就能干。

Webpack迁到Rspack，文档说三步走，实际我折腾了两天我们组一个React中后台项目，跑了三年多了，452个模块。Webpack 5打包一次生产环境接近两分钟，CI排队的时候看着进度条，总觉得在浪费生命。上周刷GitHub看到Rspack已经2.1.7了，release note里写了不少性能优化，我寻思趁这周需求间隙试试。官方文档看起来挺清爽的：改个配置文件名，换几个loader，完事。半天就够了吧。结果折腾了两天。文档写得挺清楚，但坑都在文档没写的地方。

2026 年了，别再用 only-allow 固定包管理器了！devEngines 才是正解大家好，我是 sonion。最近在搭新项目时，发现用 only-allow 限制包管理器强制用 pnpm 的方案失效了，排查半天才发现 only-allow 不支持 pnpm v11。

先吃饱再说

编写一个颜色选择器之后，我理解了 React 工程化的三层架构摘要：一个包含颜色选择器和成员列表的小项目，如何从“所有代码堆在一起”演进为 Model、API、Component 三层分离？本文通过实际代码，拆解工程化如何让 React 项目变得清晰、可维护、可扩展。

先吃饱再说

从“传事件”到“只传值”：React + TypeScript 组件 Props 设计的两次进化摘要：本文通过一个简单的姓名编辑组件，展示 React + TypeScript 中 Props 类型定义的三次迭代——从暴露事件对象到封装内部状态，再到状态提升与职责分离，揭示组件设计如何逐步走向清晰与可维护。

暗黑模式一键切换完整方案（CSS 变量 + 本地存储）Hi，我是前端人类学！在网页设计中，暗黑模式早已从“酷炫的彩蛋”变成了“用户刚需”。无论是为了夜间护眼、节省 OLED 屏幕电量，还是单纯追求视觉沉浸感，提供暗黑模式切换功能都已成为现代 Web 应用的标准实践。本文将带你从零构建一套生产环境可用的暗黑模式切换方案，核心思路是：CSS 变量统一管理主题色彩，JavaScript 控制切换逻辑，localStorage 持久化用户偏好。