前端周刊431期（2025年9月8日–9月14日）

前端周刊：与全球前端开发者同步成长～

生成前端周刊图.png

本期最突出的主题有两个：安全与原生化。npm 包接连被劫持，影响范围达到每周 20 亿次下载，说明供应链攻击已经不只是“安全部门”的问题，而是前端开发者必须随时警惕的风险。同时，原生 Web API 的能力正在不断增强，从 <dialog> 到 Subgrid，再到“安全数组方法”，都在逐步替代我们过去依赖的冗余封装和 polyfill，这背后是浏览器平台快速进化的体现。 工具生态方面，Cursor、Bun、Deno、Vite、Fresh 等仍在快速迭代，开发者既兴奋又焦虑：选择太多，踩坑风险也大。AI 工具的排行榜则再次证明，AI 已经成为前端工具链的“默认选项” ，不再是锦上添花，而是开发体验的必需部分。 CSS 板块依旧火热，过去五年的百余特性几乎重塑了 CSS 的能力边界：subgrid、anchor-positioning、corner-shape 都让布局与交互更精细、更语义化。这意味着前端的“技巧型黑魔法”会越来越少，取而代之的是标准化、可维护的写法。

Web 开发

🔹如何控制好 package.json：依赖管理的最佳实践，避免项目被依赖拖垮。推荐指数：⭐⭐⭐⭐

🔹黑客劫持每周下载 20 亿次的 npm 包，供应链攻击再现：影响范围极大的 npm 安全事件。推荐指数：⭐⭐⭐⭐⭐

🔹npm 的 debug 和 chalk 包被攻破：知名调试与终端输出工具遭受攻击。推荐指数：⭐⭐⭐⭐

🔹告别自定义弹窗：原生 <dialog> 元素的力量：为什么该抛弃冗余的自定义 Modal，拥抱原生能力。推荐指数：⭐⭐⭐⭐

🔹2025 年，原生 Web API 能取代自定义组件吗？：探讨 Web 平台 API 是否足够强大替代繁杂封装。推荐指数：⭐⭐⭐

工具

🔹如何在 Cursor 中选择合适的模型：用对模型，提升 AI 辅助开发体验。推荐指数：⭐⭐⭐⭐

🔹Deno 2.5：配置文件中新增权限控制：更精细化的权限管理，提升安全性。推荐指数：⭐⭐⭐

🔹Fresh + Vite：新一代全栈框架：结合 Fresh 的服务端能力与 Vite 的极速构建。推荐指数：⭐⭐⭐⭐

🔹幕后揭秘：Bun install 如何运作：Bun 团队带你看安装流程背后的优化细节。推荐指数：⭐⭐⭐⭐

🔹前端工具太多了？如何管理工具过载：在“工具爆炸”时代找到平衡点。推荐指数：⭐⭐⭐⭐⭐

Demo

🔹基于 Rapier & Three.js 的有机粒子实验：交互式 3D 粒子实验展示。推荐指数：⭐⭐⭐

🔹浏览器中的“液态玻璃”：CSS 与 SVG 折射效果：酷炫的玻璃质感动画效果实现。推荐指数：⭐⭐⭐⭐

CSS

🔹修 Bug 的时候，也顺手修关键问题：别只顾表面优化，基础才是关键。推荐指数：⭐⭐⭐

🔹过去 5 年的 100+ CSS 新特性大盘点：一次性带你过完现代 CSS 进化史。推荐指数：⭐⭐⭐⭐⭐

🔹CSS 色彩渐变动画探索：如何让颜色在网页上自然流动。推荐指数：⭐⭐⭐⭐

🔹CSS 锚点定位下的“跟随者”模式：用 anchor-positioning 实现动态跟随效果。推荐指数：⭐⭐⭐⭐

🔹把 CSS 层级引入现有项目：渐进式改造的思路。推荐指数：⭐⭐⭐

🔹不要继承 Box Model：盒模型继承陷阱解析。推荐指数：⭐⭐⭐

🔹断点列布局的五种实现方式：不同方法的优缺点对比。推荐指数：⭐⭐⭐⭐

🔹corner-shape 能做什么？：探索 CSS 新属性的潜力。推荐指数：⭐⭐⭐

🔹CSS 中的组合思想：像写函数一样写 CSS。推荐指数：⭐⭐⭐

🔹Astro 组件中不用 important 也能覆盖 CSS：利用层级覆盖样式。推荐指数：⭐⭐⭐⭐

🔹Subgrid：让元素完美对齐：CSS 网格布局的“完全体”。推荐指数：⭐⭐⭐⭐⭐

JavaScript

🔹终于来了：安全的数组方法：JS 新增安全方法，避免因索引越界崩溃。推荐指数：⭐⭐⭐⭐

React

🔹构建一个状态管理库：React 状态管理实践。推荐指数：⭐⭐⭐

🔹常见 React 错误及其修复方法：帮你避开踩坑。推荐指数：⭐⭐⭐⭐

🔹React Router v7 的基于文件路由 —— 为什么还要可选？：文件式路由的争议点。推荐指数：⭐⭐⭐

🔹React 基础：如何高效使用 useCallback：避免不必要的渲染。推荐指数：⭐⭐⭐⭐

🔹Cursor 的项目规则如何提升 Next.js 开发体验：借助 AI 工具提升大型项目可维护性。推荐指数：⭐⭐⭐⭐

Libraries

🔹发布 Reciprocate：让 HTML Web Components 响应式的甜蜜方案：增强组件响应性的新库。推荐指数：⭐⭐⭐

🔹Mediabunny —— 浏览器端的视频音频读写转换库：直接在浏览器里操作媒体文件，比其他方案更快。推荐指数：⭐⭐⭐⭐

🔹试过 Solid.js 后，我开始讨厌 React：开发者对 Solid.js 与 React 的对比心路历程。推荐指数：⭐⭐⭐