#优质博文 #bundler #工程化 #前端
Bundler Tree Shaking 原理及差异 · web-infra-dev · Discussion #28

AI 摘要：Tree shaking（摇树优化）已成为现代前端打包（bundler）领域的重要优化手段。不同 bundler 工具（如 Webpack、Rollup、esbuild、Turbopack）由于应用场景和关注点不同，实现 tree shaking 的原理与细节也有所差异。文章系统对比了这些工具的 tree shaking 实现，包括分析粒度、副作用（side effects）判定、模块/语句/AST（抽象语法树）层面的优化，以及各自的优势与局限性，并详细剖析了典型案例。对于需要深入理解前端 build 工具原理与优化策略的开发者极具参考价值。

author web-infra-dev ahabhgk

GitHub

Bundler Tree Shaking 原理及差异 · web-infra-dev · Discussion #28

Tree shaking 在如今的前端打包领域已成为极为重要且不可或缺的一部分。鉴于各个 bundler 的适用场景和侧重点存在差异，因此各个 bundler 之间的 tree shaking 实现方式也各不相同。例如，Webpack 主要用于前端应用打包，侧重于正确性，其 tree shaking 主要关注跨模块级别的优化；而 Rollup 主要用于库打包，侧重于优化效率，其 tree s...

#优质博文 #CSS #TypeScript #前端 #类型安全 #工程化
The Multi-Repository TypeScript Problem

AI 摘要：本文深入探讨了在大型 TypeScript 项目、尤其是多团队、多仓库（polyrepo）架构下，如何在服务边界之间实现类型安全。作者通过剖析现有单仓库（monorepo）与多仓库在类型共享上的差异，提出了一套自动化提取、打包、共享和验证 TypeScript 类型定义的新思路，从而实现跨服务间类型兼容性检测，最大限度利用 TypeScript 本身的类型系统能力，实现 monorepo 式的类型安全体验。

1. TypeScript 项目架构对类型共享的影响
• 对比单仓库（monorepo）与多仓库（polyrepo）架构下服务间类型共享的简易性和复杂性
• 强调 monorepo 在类型共享上的先天优势，但多仓库在业务组织上的必要性

2. 跨仓库类型校验的实际挑战
• TypeScript 类型检查器需要获取完整工程上下文，但多仓库使类型定义分散
• 讨论依赖和类型递归拉取带来的复杂性，不同仓库可能存在同名、类似或依赖链深度不一的类型

3. 类型提取、打包和自动化流程
• 利用 ts-morph、SWC 等工具自动化精准地提取、分发类型定义
• 提出基于接口路由自动生成类型别名，解决多团队协作下类型命名不一致问题
• 持续集成（CI）流水线以独立项目方式聚合、校验和比对类型包，提高自动化校验覆盖面和准确率

4. 类型兼容与校验自动化策略
• 利用 TypeScript 类型赋值（assignability）规则进行自动验真，无需自定义冗余逻辑
• 构建临时 TypeScript 项目，自动加载各仓库导出的类型包，通过编译器 API 比对并提取错误
• 充分借力 TypeScript 编译器本身能力，让生态演进自然受益

5. 工程实践与系统扩展性
• 跨仓库类型校验架构具备良好的可扩展性和维护性
• 所有工程增强无需魔改 TypeScript，可高效适配未来升级

author Carrick

www.carrick.tools

The Multi-Repository TypeScript Problem

Navigating Type Safety Across Service Boundaries

cosine - 前端人の日常频道

#碎碎念 #前端 #工程化 好好好 “cargo for JavaScript” 好大的饼，等发布了康康，我对这种还是一向持积极态度的，有人弄是好事

看到有没到现场的群友觉得vite继续做这些也无法避免继续让前端工具链碎片化。

但其实现场直接有人问尤雨溪这个经典问题了，前面10个工具链不够好，又开发一个，于是我们有11个了，怎么面对这种问题？
回答是需要时间，实现再好也不会有魔法让所有想切换的人一下子换成vite+工具链；
演讲前文也提到过，在合适的时机做合适的事很重要，vite实际上从起步发展到现在，进展非常迅速，社区接受度已经很高了（已经被广泛采用或者作为大部分框架的默认脚手架），是前端工具链最有希望做成这件事的团队。

如果问我，我会说看看其他领域怎么解决类似问题的，cargo的优秀示范在前面，py那边也要uv在做类似的生态位，前端工具链当然也需要这样一个角色

#优质帖子 #前端 #Node #工程化 #可扩展性 #DDD #模块化 #Nest
Best Scalable File Structure for unopinionated Node frameworks?

AI 摘要：本文讨论了在无特定意见的 Node.js 框架（如 Express、Hono 等）中，如何设计一个可扩展且适合生产环境的文件结构。作者和评论者围绕领域驱动设计（DDD）、模块化单体架构（Modular Monolith）以及文件结构对代码库可维护性的影响展开了激烈讨论。部分人认为文件结构对团队协作和代码库扩展至关重要，而另一些人则认为其重要性被夸大，强调不应过于纠结于目录布局。

Reddit

From the node community on Reddit: Best Scalable File Structure for unopinionated Node frameworks?

Explore this post and more from the node community

#优质博文 #前端 #node #工程化
Modern Node.js Patterns for 2025

AI 摘要：本文深入探讨了 Node.js 在 2025 年的现代开发模式，展示了其从早期的回调和 CommonJS 主导到如今基于标准的开发体验的巨大转变。文章重点介绍了 ES 模块（ESM）、内置 Web API、测试工具、异步模式、流处理、Worker 线程、安全性与性能监控等现代特性，旨在帮助开发者构建更高效、可维护且符合 Web 标准的应用程序。通过减少外部依赖、提升开发者体验和优化部署方式，Node.js 已成为一个全面的开发平台，为未来的服务器端 JavaScript 开发奠定了坚实基础。

1. 模块系统：ESM 成为新标准
• 对比 CommonJS 和 ES 模块，ESM 提供更好的工具支持和 Web 标准一致性。
• 介绍 node: 前缀用于内置模块导入，避免命名冲突并明确依赖。
• 强调顶层 await 特性，简化初始化代码，消除 IIFE（立即执行异步函数）模式。

2. 内置 Web API：减少外部依赖
• 原生 Fetch API 取代外部 HTTP 库（如 axios），支持超时和取消操作。
• AbortController 提供标准化操作取消机制，适用于多种异步操作。

3. 内置测试工具：无需外部框架
• Node.js 内置测试运行器，提供现代化 API，支持单元测试、异步测试和覆盖率报告。
• 开发中的 watch 模式提供即时反馈，简化测试流程。

4. 高级异步模式：成熟的异步处理
• 结合 async/await 与并行执行（如 Promise.all ）和结构化错误处理，提升代码性能和可读性。
• 使用 AsyncIterators 改进事件驱动编程，支持流式事件处理和背压控制。

5. 流处理与 Web 标准集成
• 现代流处理 API（如 pipeline ）提供自动清理和错误处理，简化操作。
• 支持 Web Streams，实现与浏览器代码和边缘环境的无缝兼容。

6. Worker 线程：CPU 密集型任务的并行处理
• Worker 线程实现多核利用，适用于计算密集型任务，避免阻塞主线程。
• 示例展示如何将繁重计算任务委托给 Worker 线程，保持应用响应性。

7. 提升开发者体验：内置工具简化开发
• 内置 watch 模式和环境文件支持，替代 nodemon 和 dotenv ，减少配置负担。
• 简化开发流程，提升开发效率。

8. 现代安全与性能监控
• 实验性权限模型限制应用访问权限，遵循最小权限原则。
• 内置性能监控工具（ perf_hooks ）帮助识别瓶颈，无需外部 APM 工具。

9. 应用分发与部署优化
• 支持单文件可执行应用，简化 CLI 工具和桌面应用的部署，无需用户安装 Node.js。

10. 现代错误处理与诊断
• 结构化错误处理提供丰富的上下文信息，便于调试和监控。
• 高级诊断工具（如 diagnostics_channel ）帮助深入了解应用内部行为。

11. 现代包管理和模块解析
• 支持导入映射（Import Maps），简化内部模块引用，便于重构。
• 动态导入支持按需加载和代码分割，适应不同环境需求。

总结与未来展望
• 强调拥抱 Web 标准、使用内置工具、优化异步模式和开发者体验的重要性。
• Node.js 保持向后兼容，支持渐进式采纳现代模式，确保应用长期可维护性。

author Ashwin

#优质博文 #前端 #工程化 #javascript #新动态
🤖 JavaScript Weekly #742

AI 摘要： 本期 JavaScript Weekly 聚焦于 JavaScript 生态系统的最新动态，包括 ECMAScript 2025 规范的正式批准、Vite 7.0 的发布以及多个前沿工具和框架的更新。文章涵盖了 JavaScript 未来发展的提案、AI 工具在开发中的应用、以及多种实用库和工具的最新版本信息。此外，还介绍了多个技术文章和视频教程，帮助开发者提升技能和了解行业趋势。

1. Ecmascript 2025：有什么新功能？：Ecma 国际大会正式批准了 ES2025 语言规范，Dr. Axel Rauschmayer 提供了简洁的解读，方便开发者快速了解新特性。
2. JavaScript 未来发展提案：Deno 团队整理了 TC39 进程中正在推进的 9 个提案，并附上代码示例，展示了 JavaScript 未来的发展方向。
3. V8 团队的深度解析文章更新 - V8 中引入的两个新优化，旨在加速 WebAssembly。 #wasm
4. 版本更新：Transformers.js 3.6、zx 8.6、Node.js 多个版本更新、Prettier 3.6、Bun v1.2.17 和 SVGO 4.0 的发布信息。
5. Angular 团队创建了一套 LLM 提示和 AI IDE 规则文件，以帮助 Angular 开发者从 LLM 中获得更好的代码
6. 在复杂视觉应用程序中实现 Undo/Redo 系统
7. 没时间学习（Web）框架 X —— 你如何判断学习新事物是否值得花时间？
8. 在编写 WASM 组件时比较 Rust、JavaScript 和 Go
9. 如何撰写引人入胜的软件发布公告
10. 介绍了 Hono 4.8 跨运行时框架、LogTape 1.0.0 通用日志工具、Google 的 Gemini CLI AI 代理工具、PLJS 1.0 Postgres 插件、Marked 16.0 Markdown 解析器、Vue Infinity 数据虚拟化渲染工具、Spark Three.js 3D 渲染器以及多个图表库和框架的更新。

2Ality

Ecma International approves ECMAScript 2025: What’s new?

On 25 June 2025, the 129th Ecma General Assembly approved the ECMAScript 2025 language specification (press release), which means that it’s officially a standard now. This blog post explains what’s new.

#优质博文 #前端 #css #工程化
挺好的探讨 CSS 特异性的文章，适合初学者概览。
CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control — Smashing Magazine

AI 摘要：本文由 Victor Ayomipo 撰写，深入探讨了 CSS 中特异性（specificity）控制的复杂性及其解决方案。文章详细分析了三种主要的 CSS 特异性管理策略：BEM（Block-Element-Modifier）、Utility Classes（实用类）和 CSS Cascade Layers（层叠层）。通过对比它们的优缺点、使用场景及特异性控制方式，作者旨在帮助开发者理解并选择适合项目需求的 CSS 组织方式，同时强调保持低特异性的重要性，避免使用 !important 等不良实践。

1. 引言：CSS 特异性的挑战
• 介绍了 CSS 特异性导致的样式应用问题，如样式覆盖失败的常见困扰。
• 强调理解特异性比依赖 !important 更可持续，提出特异性问题是 CSS 开发中的核心挑战之一。

2. 特异性基础（Specificity 101）
• 解释了特异性如何通过浏览器层叠算法决定样式优先级。
• 通过示例（如 .cart-button 和 .cart-button.sidebar）展示了项目扩展中特异性冲突的加剧。
• 概述了三种策略（BEM、Utility Classes、Cascade Layers）在控制特异性上的不同思路。

3. 作者与特异性的关系
• 分享了作者对特异性理解的演变，从基础规则到深入研究 CSS 层叠机制。
• 通过实际代码案例，展示了特异性冲突（如旧代码与新样式的优先级问题）及解决时的困境。
• 提出个人原则：保持低特异性，避免复杂选择器链，必要时重构代码。

4. BEM：经典系统
• 详细介绍了 BEM 的命名方法论（Block、Element、Modifier），强调其通过显式层级降低特异性。
• 优点：代码可预测，组件隔离，特异性低且一致。
• 缺点：类名冗长，复用性受限，命名困难，需灵活应用（如结合全局类）。

5. Utility Classes：通过回避特异性
• 描述了 Utility Classes（原子化 CSS）的理念，即通过单一功能的类保持最低特异性（如 p-2、text-red）。
• 优点：快速开发，可预测性高，覆盖简单。
• 缺点：代码可读性差，HTML 冗长，品牌色调整等全局变更困难，父子关系处理受限。

6. Cascade Layers：设计上的特异性控制
• 介绍了 CSS Cascade Layers 的强大功能，通过 @layer 定义样式优先级，超越传统特异性规则。
• 优点：提供绝对控制力，可覆盖高特异性选择器（如 ID 选择器）而无需 !important。
• 缺点：特异性仍起作用，!important 行为特殊，易被滥用导致层级复杂。

7. 三者对比
• 通过表格形式对比了 BEM、Utility Classes 和 Cascade Layers 在特异性控制、代码可读性、组织方式等多个维度的表现。
• 最佳场景：BEM 适合设计系统，Utility Classes 适合快速构建，Cascade Layers 适合遗留代码或复杂项目。

8. 三者交集与结合

• 提出 Cascade Layers 可作为协调者，与 BEM 或 Utility Classes 结合使用，而 BEM 与 Utility Classes 结合则易冲突。
• 作者偏好 Utility Classes 结合 Cascade Layers，但认可 BEM 的价值，强调选择取决于个人与团队需求。

9. 结论
• 总结 Cascade Layers 是近年来最强大的 CSS 特性，但它与 BEM 和 Utility Classes 的本质不同（特性 vs 方法论）。
• 建议保持低特异性，并结合 Cascade Layers 设置样式优先级，以实现更高效的 CSS 管理。

author Victor Ayomipo

Smashing Magazine

CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control — Smashing Magazine

CSS can be unpredictable — and specificity is often the culprit. Victor Ayomipo breaks down how and why your styles might not behave as expected, and why understanding specificity is better than relying on `!important`.

#优质博文 #前端 #node #工程化 #新动态
🕒 Node Weekly Issue #582

AI 摘要：本期 Node Weekly 聚焦 Node.js 生态系统的最新动态，重点介绍了 Node.js 通过 Amaro 1.0 向稳定支持 TypeScript 迈进的关键进展，同时涵盖了 pnpm 10.12 的全局虚拟存储功能、JavaScript 30 周年纪念以及多个实用工具和库的更新。此外，还包括对 Node.js 社区重要人物 Mikeal Rogers 的缅怀，以及对各种框架、测试工具和开发资源的深入探讨，内容详实且覆盖广泛。

1. Node.js 与 TypeScript 支持进展：
• Amaro 1.0 发布，作为 Node.js 官方工具，用于剥离 TypeScript 代码中的类型，使其能够在 Node.js 中运行，同时也可作为独立库使用。
• 这是 Node.js 将 TypeScript 支持从实验性转向稳定的重要里程碑，预计年内将在正式版本中实现稳定支持。
• Sarah Gooding 详细报道了相关进展，Marco Ippolito 在 Node Congress 2025 的演讲中进一步探讨了原生 TypeScript 支持的实现方式及当前局限性。

2. pnpm 10.12 新功能：
• 引入实验性“全局虚拟存储”功能，通过 node_modules 符号链接实现依赖共享，避免重复安装，从而提升效率和速度。

3. 社区动态与纪念：
• Isaac Z. Schlueter 发表了对 Node.js 社区重要贡献者 Mikeal Rogers 的缅怀文章，悼念其上周逝世。
• Dylan Goings 庆祝 JavaScript 诞生 30 周年，回顾其发展历程。

4. 技术文章与教程：
• 顶级 await 支持： 介绍了在现代浏览器及 Node.js（v16 以上）中，ES 模块支持顶级 await 的用法，适用于 .mjs 文件或指定为模块的 .js 文件。
• JavaScript 爬虫库推荐： 探讨了包括 Crawlee、Cheerio 等在内的最佳爬虫库，以及如何从 Node.js 使用浏览器进行爬取。
• Hono 框架与 Node.js： Hono 框架创始人 Yusuke Wada 分享了将其引入 Node.js 的经验，Hono 是一个基于 Web 标准的轻量级 Web 应用框架。
• 性能与压力测试： 介绍了三种 Node.js 测试工具（AutoCannon、Artillery、k6）的使用方法和场景。
• Nx 构建 MCP 服务器： Nx 团队分享了如何使用 Nx 构建 MCP 服务器的教程。

5. 工具与库更新（Code & Tools）：
• WelsonJS： 利用 Windows 内置 JS 引擎构建 Windows 应用，类似 Electron，适合计算能力有限的环境，支持多种 JS 替代方案和 RPC 客户端。
• Croner 9.1： 使用 cron 语法触发函数或评估表达式，v9 已迁移至 TypeScript 并引入了一些破坏性变更。
• log-vwer： 基于 Node.js 的自托管日志监控仪表板，适用于本地日志存储与搜索。
• 其他更新： 包括 & Entities 6.0（HTML/XML 实体编码/解码）、ESLint v9.29.0（支持显式资源管理语法）、LogTape 0.12（无依赖日志库）、fast-png 7.0（PNG 图像编解码）、node-llama-cpp 3.10（本地运行 LLM）、Discord.js 14.20、Ableton.js 3.7、Fastify 5.4、Mongoose 8.16、Piscina 5.1、tiff 7.0 等。

6. 由于本周内容相对较少，编辑团队回顾了未入选的库存项目，推荐了以下资源：
• FIGLet.js： 使用 FIGfont 规范将文本渲染为 ASCII 形式，适用于 CLI 工具开发。
• Stricli： Bloomberg 使用的 CLI 工具构建框架。
• Pyodide： 基于 WebAssembly 的 Python 发行版，支持浏览器和 Node.js 运行时。
• VS Code 中的 Node.js 性能分析： Pavel Romanov 展示了如何在 VS Code 中进行 Node.js 应用的基本性能分析。

#优质博文 #前端 #node #新动态 #工程化
🍊 Node Weekly #581

AI 摘要：本期 Node Weekly 聚焦 Node.js 生态系统的最新动态与技术更新，重点讨论了 Node.js 版本生命周期管理、技术提案进展以及一系列工具和库的更新。文章强调了旧版本（如 v18 及更早版本）已进入 EOL 状态，建议开发者直接升级到 v22 以获得更好的未来支持，同时介绍了 Node v24.2.0 的新功能、TC39 会议的技术提案、Jest 30 的重大改进，以及多个 Node.js 相关的工具和库的最新版本发布。此外，还涵盖了 JavaScript 生态系统的其他重要动态，如 Rolldown-Vite 带来的构建速度提升、CSS 2025 年度调查。

1. 社区动态
• Matteo Collina 指出 Node.js v18 及更早版本现已 EOL。他详细分析了这对旧版本用户意味着什么，以及为什么应该跳过活跃的 LTS v20 版本，直接升级到 v22 版本，以最大程度地适应未来发展。如果您必须继续使用旧版本，Matteo 分享了一个可供考虑的选项。
• Node v24.2.0（Current）发布：引入 import.meta.main，一个新的布尔值，用于判断当前 ES 模块是否为进程的入口点，便于在模块直接运行时执行特定代码；移除了 nghttp2 中对 HTTP/2 优先级信号的支持；使用权限系统时无需将应用程序入口点传递给 --allow-fs-read
• TC39 会议与技术提案：Sarah Gooding 总结了 TC39 近期会议讨论和推进的提案，包括 Array.fromAsync、Error.isError 和显式资源管理。

2. 测试框架与工具更新
• Jest 30 发布，带来了一系列重大改进，标志着数年来的一次重要版本更新。
• SQLite-JS：一个有趣的 SQLite 扩展，允许使用 JavaScript 编写自定义 SQLite 函数。

3. 博文教程
• Native Hot Module Reloading in Node via Module Hooks：通过模块钩子实现原生高效的“热模块”功能
• Unpacking Config and Environment Variables in Node：Liran Tal 分享了在 Node.js 中处理配置和环境变量的挑战及最佳实践
• Postgres 迁移：推荐使用 node-pg-migrate 处理 Node.js 中的 Postgres 迁移（作者：Boas Falke）。
• 构建 API：探讨如何使用 Node.js 和 gRPC 构建 API
• 在 Node 中使用 SQL 和 Sequelize：介绍在 Node.js 中使用 Sequelize 进行 SQL 操作

4. 代码与工具推荐
• Mock Service Worker：一个用于 REST/GraphQL API 模拟的库，支持拦截请求并模拟响应
• tz-lookup：基于经纬度的快速时区推断工具，以速度和大小为代价换取准确性
• 其他工具更新：包括 Babel 8 Beta、Prisma 6.9、OpenAI Node 5.2、MongoDB Node.js Driver 6.17 等多个库和框架的最新版本发布。

5. 其他 JavaScript 生态动态
• Rolldown-Vite：Evan You 宣布了基于 Rust 的快速 JavaScript 打包工具 Rolldown 的 Vite 替代包，许多开发者报告构建时间显著缩短。
• Gleam：一种针对 Erlang 和 JavaScript 运行时的语言，编译到 JS 的速度提升了 30%。
• State of CSS 2025：CSS 年度调查现已开放参与。

State of CSS 2025

Take the State of CSS survey

#优质博文 #前端 #工程化 #oxlint #linter #新动态
Announcing Oxlint 1.0

AI 摘要：Oxlint 1.0 作为首个稳定版本正式发布，这是一个基于 Rust 开发的 JavaScript 和 TypeScript 代码检查工具，性能比 ESLint 快 50~100 倍，支持超过 500 条 ESLint 规则，并在 Shopify、Airbnb 等大公司中得到应用。Oxlint 强调快速、零配置的特性，便于开发者快速上手，同时支持通过配置文件进行定制化，并提供与 ESLint 的平滑迁移工具和插件支持。未来，Oxlint 将继续优化性能、支持自定义规则和更精细的配置，团队也在不断壮大，期待社区反馈以推动项目发展。

author Boshen Chen and Cameron Clark

void(0)

Announcing Oxlint 1.0

The first stable version of Oxlint, a fast & easy-to-use Rust-powered linter for JavaScript and TypeScript, is out. Learn about its 50~100x speed advantage over ESLint, support for 500+ rules, real-world adoption by major companies, and easy migration.

#优质博文 #前端 #react #RSC #javascript #工程化
讲 RSC 讲的最明白的一集，写的太牛了。
How Imports Work in RSC

AI 摘要：本文深入探讨了 React Server Components (RSC) 中导入（import）和导出（export）机制的运作方式，重点分析了如何通过 'use client' 和 'use server' 指令在前后端环境中划分代码。作者从模块系统的基本原理出发，解释了 JavaScript 模块的单例特性及其在单一环境中的运作方式，随后扩展到前后端代码共享的挑战和解决方案，提出了 'server-only' 和 'client-only' 的“毒丸”机制来防止代码跨环境误用，并通过 RSC 的指令机制实现前后端模块系统的交互。文章旨在帮助读者构建对 RSC 的准确心智模型，同时也适用于对模块系统感兴趣的开发者。

什么是模块系统？
• 模块系统的定义：模块系统是一套规则，用于将程序拆分为文件，控制代码可见性，并将代码链接为可执行的单一程序。
• 人类需求：模块帮助开发者将复杂程序拆分为可管理的部分，限制代码可见性以保护实现细节，并促进代码复用。
• 计算机执行：计算机需要在内存中“展开”模块代码以执行程序，模块系统弥合了人类编写代码和计算机执行之间的差距。
• JavaScript 模块：通过 import 和 export 关键字实现模块化。

导入就像复制粘贴……但又不完全是
• 基本直觉：JavaScript 的模块系统设计使得 import 和 export 的效果类似于复制粘贴，最终程序在内存中展开为单一代码块。
• 与 C 语言的 #include 对比：C 的 #include 确实是直接复制粘贴，可能导致命名冲突和重复包含问题，而现代模块系统（如 JavaScript）通过自动处理避免这些问题。

JavaScript 模块是单例
• 单例特性：每个模块无论被导入多少次，其代码只执行一次，模块系统通过缓存已加载模块的导出值来实现这一点。
• 优势：避免代码重复导致输出体积膨胀；模块可保持私有状态；简化心智模型，每个模块视为单一实例。
• 实现机制：模块系统通常使用 Map 记录已加载模块及其导出值，例如在 Node.js、Webpack 等工具中均有类似逻辑。

一个程序，一个计算机
• 单一环境设计：大多数 JavaScript 程序是为单一计算机（如浏览器或 Node.js 服务器）设计的，模块系统支持从入口文件开始加载并缓存模块。
• 导入效果：导入模块时，代码被“带入”当前程序，模块保持单例特性，避免重复执行。

两个程序，两个计算机
• 前后端分离：传统上，前端和后端是运行在不同计算机上的两个独立程序，分别负责交互逻辑和 HTML/API 服务。
• 模块系统独立性：前后端各有独立的模块系统，共享代码（如 a.js）会在两个环境中分别加载，实质上是“各自的版本”。

构建失败是好事
• 代码复用风险：共享代码可能引入只适用于一侧的 API（如后端的 fs），导致另一侧构建失败。
• 构建失败的价值：构建失败提供早期反馈，迫使开发者解决代码复用问题，可选择调整代码位置或依赖关系。

仅限服务器端代码
• 问题场景：若共享代码引入服务器端敏感信息（如密钥），可能无构建错误地泄露到前端。
• 解决方案：引入 server-only “毒丸”包，标记不可进入前端的代码，前端构建时遇到则失败，强制开发者修复。
• 传递性：只需在源头文件标记 server-only，依赖链会自动传播此限制。

仅限客户端代码
• 类似机制：引入 client-only “毒丸”，防止特定前端代码（如 DOM 操作）被后端引入，构建失败以避免运行时错误。
• 细粒度控制：如 React 通过条件导出机制将 useState 等 API 标记为 client-only。

一个程序，两个计算机（RSC 视角）
• 前后端协作问题：传统方式依赖约定同步前后端代码，缺乏语法支持，易出错。
• RSC 创新：use client 指令允许后端引用前端代码而不将其引入后端，实质是“打开前端之门”，生成 <script> 标签在前端恢复；use server 则相反。
• 指令作用：非指定代码运行位置，而是创建模块系统间的“门”，用于数据传递而非代码移动。

结论
• RSC 核心：承认前后端模块系统独立性，共享代码在两侧分别存在。
• 两大机制：server-only 和 client-only 防止代码误入错误环境；use client 和 use server 提供跨环境引用和数据传递的“门”。
• 最终模型：RSC 将应用视为跨两台计算机的单一程序，拥有独立模块系统、毒丸保护和交互之门，开发者只需处理构建错误即可。

author Dan Abramov

overreacted.io

How Imports Work in RSC — overreacted

A layered module system.

#优质博文 #前端 #node #pino #logging #工程化
Production-Grade Logging in Node.js with Pino

AI 摘要：本文详细介绍了在 Node.js 应用中使用 Pino 进行生产级日志记录的全面指南。Pino 作为一种高效且快速的日志库，以其 JSON 格式输出和与现代可观测性平台的兼容性而著称。文章涵盖了 Pino 的核心功能、日志级别管理、字段自定义、上下文日志记录、序列化器和敏感数据处理、日志路由以及与 Node.js 框架和 OpenTelemetry 的集成方法。

• 引言：介绍了 Pino 自 2014 年以来的广泛应用，强调其高性能和灵活配置，Fastify 框架默认使用的日志工具。提供了安装和基本使用示例，展示了 JSON 格式输出和通过 pino-pretty 美化日志。
• Pino 日志级别：详细说明了 Pino 支持的标准日志级别（trace, debug, info, warn, error, fatal）及其对应的数值表示，默认级别为 info，并提供了通过环境变量调整日志级别的方法。
• 自定义日志级别输出：展示了如何将数值级别格式化为字符串输出，并提到后续与 OpenTelemetry 日志数据模型的集成。
• 调整 Pino 默认日志字段：介绍了如何修改默认日志字段（如时间格式、字段重命名），以及通过 formatters 自定义绑定字段（pid, hostname）或添加全局元数据（如应用版本）。
• 捕获事件和错误详情：讲解了上下文日志记录的重要性，展示了如何在 HTTP 请求中添加详细信息，并符合 OpenTelemetry 语义约定；同时介绍了如何记录 Node.js 错误及其堆栈信息。
• 使用 Pino 序列化器塑造日志：介绍了序列化器的功能，用于转换日志对象中的特定属性，包括内置序列化器（err, req, res）和自定义序列化器的创建方法。
• 敏感数据的编辑或移除：提供了使用 redact 选项自动审查或移除日志中敏感数据（如密码、信用卡信息）的方法，并支持自定义审查内容或完全移除字段。
• 使用 Pino 传输路由日志：讲解了如何通过 transport 功能将日志输出到文件或多个目标（如控制台、文件、OTLP 端点），并提及同步日志和支持的传输生态。
• 与 Node.js 框架集成：展示了 Pino 在 Fastify（默认集成，支持请求上下文追踪）和 Express（通过 pino-http 中间件）中的使用方法，包括自动日志记录和自定义配置。
• 与 OpenTelemetry 集成：介绍了通过 pino-opentelemetry-transport 将 Pino 日志转换为 OpenTelemetry 格式并发送到 OTLP 端点，支持与分布式追踪的相关性，并解决语义约定问题。

author Ayooluwa Isaiah

Dash0

Production-Grade Logging in Node.js with Pino · Dash0

This article explores Pinos core features integration with popular Nodejs frameworks and setting up a productiongrade logging pipeline with OpenTelemetry

#优质博文 #前端 #javascript #node #php #工程化 #新动态 #tools
🤖 Node Weekly #580

AI 摘要： 本期 Node Weekly 聚焦 Node.js 生态系统的最新动态与工具，涵盖了 PHP 与 Node.js 的集成、AI 技术在开发中的应用、以及多个实用工具和库的更新。文章详细介绍了 php-node 模块如何实现 PHP 应用在 Node 环境中的运行、多个 Node.js 相关工具如 ESLint、Bun 的新功能。此外，还包括了 JavaScript 领域的最新资讯，如 TC39 提案进展和 Temporal API 的潜力。

1. 简讯
• php-node：PHP 与 Node.js 的新型集成：介绍 php-node 作为 Node 的原生模块，允许在 Node 环境中运行 PHP 应用。应用场景：迁移遗留 PHP 应用、构建 PHP/JS 混合应用，或在 Node 应用中调用 PHP 功能（如 WordPress 集成）
• Joyee Cheung 分享关于 Node 中 CommonJS 与 ESM 桥接的演讲幻灯片。
• OpenJS 基金会现在是其旗下 40 多个 JavaScript 项目的 CNA，包括 ESLint、Express 和 Electron。
• SQLite-JS 扩展允许使用 JavaScript 编写自定义 SQLite 函数。
• DigitalOcean 推出 Node 驱动的 MCP 服务器，支持通过 AI 代理（如 Claude）管理托管应用。
2. 技术文章与教程
• 使用 Node.js 和 Llama Stack 实施 AI 保障措施： Llama Stack 是 Meta 用于在 Node、Python、Swift 或 Kotlin 中构建 AI 应用程序的框架。
• 在 Express 中管理功能标志 (Trunker)：介绍 Trunker 作为 Express 中间件，用于实现功能标志管理。
• 使用可选链编写更可靠的 JavaScript：讲解可选链的使用及其优势。
• 构建 Linux Electron 应用：讨论 Electron 跨平台特性及 Linux 平台特定问题。
• Node.js 生产级日志记录 (Pino)：介绍使用 Pino 进行高效日志记录。
3. 代码与工具
• qnm：CLI 工具，方便探索 node_modules，提供模糊搜索及空间占用分析功能。【感觉还是 antfu/node-modules-inspector 香】
• Zigar：在 Node 和 Electron 项目中使用 Zig（C/C++ 超集）代码。
• 🤖 OpenAI 客户端 5.x：从 Node 使用 OpenAI 模型 ——OpenAI 官方 JavaScript 库的最新版本，适用于其各种 API，现已支持其所有最新模型和实时 API（ v5.0 更新日志 ）。支持 Deno 和 Bun。
• Opossum 8.5：异步函数断路器，支持超时及错误阈值设置。
• Beachpatrol：CLI 工具，基于 Playwright 实现浏览器自动化，支持 macOS 和 Linux。作者：Sebastian Carlos。
• 其他工具更新：包括 ESLint v9.28.0（增强 TypeScript 支持）、Bun v1.2.15（新增安全审计工具）、Ink 6.0（支持 React 19）、pdf2html 4.0（用 Apache Tika 和 PDFBox 将 PDF 转换为 HTML）
4. JavaScript 领域动态
• TC39 第 108 次会议：多项提案进展，如 Seeded Pseudo-Random Numbers 进入 Stage 2，Error.isError 进入 Stage 4。
• Stack Overflow 年度开发者调查开启第 15 年。
• 探讨即将推出的 Temporal API，如何解决 JavaScript 中日期和时间处理问题。
• Sean Gillespie 正在思考高效 monorepo 的要素。

Platformatic Blog

Seamlessly Blend PHP with Node.js

@platformatic/php-node integrates PHP into Node.js apps for a unified developer experience

#优质博文 #前端 #javascript #typescript #工程化 #新动态
⚡️ JavaScript Weekly Issue #737

AI 摘要：本期《JavaScript Weekly》涵盖了 JavaScript 发展的历史里程碑、TypeScript 的性能革新、框架简介以及多个工具和库的更新。文章详细介绍了 JavaScript 30 年的发展历程，TypeScript 编译器的原生预览版带来的性能提升，以及多个主流框架的核心理念。此外，还包括了 Node.js 等工具的最新版本发布、Electron 性能优化的经验分享，以及一系列实用工具和资源的推荐，适合对前端开发和技术动态感兴趣的开发者深入了解。

• JavaScript 历史回顾：由 Deno 团队撰写的文章，详细梳理了 JavaScript（最初名为 LiveScript）自诞生以来的 30 年发展历程，从 Netscape Navigator 的首次亮相，到 JScript 分支、标准化进程、Node.js 的引入，直至现代生态系统的形成，呈现了一个全面的时间线。
• TypeScript 原生预览版发布：微软宣布了 TypeScript 编译器的原生预览版，通过将编译器移植到 Go 语言实现原生编译和更高的并发性能，Anders Hejlsberg 早前预告的 10 倍速度提升现已可供开发者尝试。
• JavaScript 框架简介：SolidJS 的创作者 Ryan Carniato 制作了一段 11 分钟的视频，简明扼要地讲解了 React、Angular、Vue、Svelte 和 Solid 等框架的不同设计理念和应用场景，内容紧凑且适合快速了解框架全貌。
• 简讯与更新：
• 公布了下周 TC39 会议的议程及讨论提案。
• React Router 现已预览支持 React Server Components。
• 版本发布：
• Node.js 发布了 v24.1.0（当前版）和 v22.16.0（LTS 版）。
• Bun v1.2.14：快速 JavaScript 运行时和工具包。
• Slonik v48：Node.js 的 Postgres 客户端，支持运行时和构建时类型安全。
• 其他更新包括 Zod v4、Astro 5.8、ESLint v9.27.0。
• 文章与教程：
• Angular 新动态：Google I/O 活动中，Angular 团队分享了框架的最新更新，预告 Angular 20 的发布。
• ESLint v9.0 回顾：Nicholas C. Zakas 回顾了 ESLint v9.0 发布一年来的经验教训，重点讨论了新默认的 flat-config 系统带来的挑战。
• Electron 性能优化：分享了 Slack、Notion 和 VS Code 等应用如何提升 Electron 应用性能的六种方法。
• 其他短文：包括数组索引方法 at() 的用法、Node.js 控制台文本样式化、JavaScript WebSocket 认证等。
• 代码与工具：
• Defuddle：从网页提取主要内容的工具，类似于 Mozilla 的 Readability，有在线演示。
• snapDOM：快速准确地将 DOM 节点捕获为 SVG 图像，保留样式和背景。
• ForesightJS：预测鼠标意图的库，通过预加载数据减少延迟（对触摸设备效果有限）。
• Astra：新的 JavaScript 到 EXE 编译器，仅支持 Windows。
• Crosspost：支持跨多个社交网络（如 Bluesky、X、Mastodon）发布内容的 JS 工具。
• Rockpack 6.0：React 应用启动工具，支持 React 19，集成 SSR、打包、Linting 和测试。
• 其他工具更新包括 Calendar Link、octokit.js、image-type 和 Peggy。
• 其他动态：
• Google I/O 开发者主题演讲展示了 Chrome DevTools 的新功能。
• 微软发布 VS Code 的 Postgres 扩展，支持 SQL 智能补全和 GitHub Copilot 集成。
• Anthropic 推出 Claude 4 模型，广泛应用于编码工具。
• Glitch 平台将关闭应用托管功能，未来发展方向不明。

Deno

A brief history of JavaScript | Deno

In 30 years, JavaScript went from being a little scripting language to one of the world's most popular. Here are key moments to show how it has evolved and where it is headed.

#优质博文 #git #工程化
How Core Git Developers Configure Git

AI 摘要：本文分享了 Git 核心开发者常用的配置设置，并探讨了这些设置为何应成为默认值。文章分为三部分：明显改进 Git 的配置（如分支排序、标签排序、默认分支、差异算法等）、无害且可能有用的配置（如自动纠正提示、提交时显示差异等），以及个人偏好的配置（如合并冲突样式、拉取默认行为等）。作者通过实际示例和配置代码，详细解释了每个设置的作用和优势。

TLDR
• 提供了一组 Git 配置代码，可直接复制到 ~/.gitconfig 文件中，涵盖分支、标签、差异、推送、拉取等优化设置。

How do Git core devs configure their Gits?
• 介绍了 Git 核心开发者通过邮件列表讨论的“春季大扫除”实验，参与者分享了他们认为应成为默认的 9 项配置和 3 个别名。
• 这些配置包括 merge.conflictstyle、rebase.autosquash、diff.algorithm 等。

Clearly Makes Git Better
1. Listing branches
• 使用 branch.sort = -committerdate 按提交日期排序分支，column.ui = auto 以列格式显示分支。
2. Listing tags
• 使用 tag.sort = version:refname 按版本号排序标签，避免字母顺序的问题。
3. Default branch
• 设置 init.defaultBranch = main 避免每次初始化仓库时的警告。
4. Better diff
• 使用 diff.algorithm = histogram 改进差异算法，diff.colorMoved = plain 高亮移动的代码。
5. Better pushing
• 设置 push.autoSetupRemote = true 自动设置上游分支，push.followTags = true 自动推送标签。
6. Better fetching
• 使用 fetch.prune = true 和 fetch.pruneTags = true 自动清理已删除的远程分支和标签。

Why the Hell Not?
1. Autocorrect prompting
• 设置 help.autocorrect = prompt 在输入错误命令时提供纠正建议。
2. Commit with diffs
• 使用 commit.verbose = true 在提交消息编辑器中显示完整差异。
3. Reuse recorded resolutions
• 启用 rerere.enabled = true 和 rerere.autoupdate = true 自动重用冲突解决方案。
4. Global ignore file
• 设置 core.excludesfile = ~/.gitignore 使用全局忽略文件。
5. Slightly nicer rebase
• 使用 rebase.autoSquash = true 和 rebase.autoStash = true 优化变基操作。

A Matter of Taste
1. Better merge conflicts
• 使用 merge.conflictstyle = zdiff3 在冲突标记中显示原始内容。
2. Better pulling
• 设置 pull.rebase = true 将拉取默认行为设为变基而非合并。
3. Run the fsmonitor processes
• 启用 core.fsmonitor = true 和 core.untrackedCache = true 加速大仓库的状态检查。

author Scott Chacon

GitButler

How Core Git Developers Configure Git

What `git config` settings should be defaults by now? Here are some settings that even the core developers change.

#优质博文 #前端 #node #javascript #新动态
Node Weekly #578

AI 摘要：本文是 Node Weekly 第 578 期的内容，发布时间为 2025 年 5 月 13 日，聚焦于 Node.js 和 JavaScript 生态系统的最新动态。文章涵盖了新工具和库的发布（如 Feedsmith 和 Hyparquet）、Node.js 版本更新（如 v24.0.1）、性能优化进展、以及 npm 包创建的最佳实践等内容。此外，还介绍了 JavaScript 相关工具和技术（如 k6 和 Mantine），并提供了多个实用库和资源的链接。编辑 Peter Cooper 提到将参加 Google I/O，newsletter 将暂停至 5 月 27 日。

1. 更新动态

• Node v24.0.1 发布：修复了 v24.0 中移除的 SlowBuffer 功能，因仍有流行包依赖此功能；同时 Lizz Parody 文章总结了 Node 24 的新特性。
• 性能优化动态：Node 性能专家 Yagiz Nizipli 正在改进 Node 的 HTTP 性能。
• 其他更新：Bun v1.2.13 提升了 Node.js 兼容性（如 worker_threads 支持）；VS Code 新增对 Node 网络调试功能的支持；Node.js Next 10 调查仍在进行中，旨在帮助核心团队确定优先级。

2. 技术文章

• 创建现代 npm 包：Brian Clark 提供了一份 2025 年适用的分步指南，介绍创建 npm 包的最佳实践，内容近期已更新。 #工程化
• 文件系统路径与 URL：Dr. Axel Rauschmayer 探讨了在 Node 中处理文件系统路径和文件 URL 的方法。

3. 工具推荐

• Feedsmith：一个 Web 订阅解析和生成工具，支持 RSS、Atom、JSON Feed 等格式，解决了现有库的一些问题，尽管尚处于早期阶段，但核心功能已就绪。Jean-Philippe Monette 的成熟 Feed 库已经有十多年的历史了，如果您想要专注于 Feed 生成，它也刚刚进行了一次重大更新 （v5.0）
• PptxGenJS：一个成熟的库，用于用 JavaScript 创建 PowerPoint 演示文稿，支持图形、表格和其他典型的幻灯片对象等。
• ANSIS 4.0：一个支持多环境的 ANSI 颜色库，适用于终端、浏览器等，v4.0 带来重大更新。
• Hyparquet：无依赖的 JavaScript 库，用于解析 Parquet 文件格式，支持浏览器环境。
• jsdiff 8.0：用于文本差异比较的库，支持多种比较方式。
• Glob 11：JavaScript 中最准确且第二快的文件匹配库。
• 其他工具：包括 sqs-consumer、express-openapi-validator、OpenAI Node、dnt、cron-parser 和 Undici 等库的最新版本更新。
• k6 1.0：Grafana 推出的负载测试工具，支持用 JavaScript/TypeScript 编写脚本。

author Peter Cooper

GitHub

src: improve performance of http parser by anonrig · Pull Request #58288 · nodejs/node

Adds v8 fast api to almost all possible http parser methods.

Pending benchmarks.
Benchmark CI: https://ci.nodejs.org/view/Node.js%20benchmark/job/benchmark-node-micro-benchmarks/1717/
cc @nodejs/p...

#优质博文 #前端 #AI #任务管理 #产品需求 #工程化 #MCP
I didn't think AI can code like this - YouTube
被安利到了 TaskMaster AI，想试试。

Twitter Post

AI 摘要：本文由 Dan ⚡️ 在 X 平台分享了如何利用 AI 和任务管理系统高效构建产品的流程。他强调了详细需求编写、产品需求文档 (PRD) 的创建、任务管理工具的选择以及基于任务的构建循环的重要性。Dan 推荐使用 TaskMaster AI 作为任务管理工具，并提供了一个简单的提示循环来确保任务按逻辑顺序执行，避免复杂项目中的混乱。

• 1. 编写详细需求
• 花费 15-20 分钟深入思考，确保 AI 明确你的构建目标。
• 需求需简洁但全面，包含技术栈等细节。
• 总结：这一步是确保 AI 理解项目愿景的基础，避免后续沟通偏差。

• 2. 创建产品需求文档 (PRD.txt)
• 使用博客中提供的提示，将需求整理成正式的产品需求文档。
• 仔细复查文档内容，确保无遗漏。
• 总结：PRD 作为项目蓝图，是后续任务分解和执行的重要依据。

• 3. 使用任务管理系统
• 推荐了四种任务管理工具：TaskMaster AI、Roocode Boomerang Tasks、Shrimp Task Manager 和 Cline Task Tool。
• Dan 个人更倾向于 TaskMaster AI，原因是其集成了 Perplexity 进行网络搜索，能更好地处理复杂性，正确识别依赖关系并按逻辑顺序执行任务。
• 其他工具如 MCP 与 Cursor 配合良好，也支持 CLI 直接使用。
• 总结：选择合适的任务管理工具是项目有序推进的关键，TaskMaster AI 在复杂项目中表现更优。

• 4. 使用简单的任务构建循环
• 强调构建循环必须严格围绕任务进行，避免偏离任务管理系统，否则复杂项目容易出错。
• 提供了一个简单的提示循环：
• "Show tasks" - 查看任务列表。
• "What's the next task I should work on? Please consider dependencies and priorities." - 询问下一个优先任务。
• "Implement task 2 and all of its subtasks." - 执行具体任务及其子任务。
• "I'd like to add a new task that ..." - 添加新任务。
• 更多示例可在推文中查看，核心是始终保持任务管理的一致性。
• 总结：任务构建循环是确保项目按部就班执行的关键方法，严格遵循可避免混乱。

author Dan ⚡️ (@d4m1n)

YouTube

Didn't think AI can code like this (TaskMaster AI + Cursor guide for vibe coding setup)

All the prompts on https://shipixen.com/tutorials/reduce-ai-coding-errors-with-taskmaster-ai 🫡
Learn how to properly setup your IDE for coding complex apps with Cursor and TaskMaster AI (Claude Task Master).

Here is the app that I vibe coded:

👉 https:/…

#tools #npm #开源 #工程化 #可视化

Announcing @Tan_Stack NPM Stats (Beta)

AI 摘要：Tanner Linsley 宣布推出 Tan_Stack NPM Stats (Beta)，这是一个用于分析和可视化 NPM 软件包统计数据的工具。该工具提供了丰富的功能，包括可共享的深度链接、软件包分组、多种时间范围的统计数据查看、增长趋势分析、自定义显示选项以及开源支持，旨在帮助开发者更直观地了解和比较 NPM 软件包的表现。

1. 可共享的深度链接：用户可以生成并分享特定的统计数据视图链接，方便协作与交流。
2. 软件包分组：支持将相关软件包组合在一起，便于管理和比较。
3. 时间分箱选项：提供每日、每周、每月、每年的数据统计分箱，灵活查看不同时间段的表现。
4. 增长趋势分析：用户可以选择查看绝对增长或相对增长数据，了解软件包的增长趋势。
5. 比较基线设置：支持设置基线数据，用于与其他软件包或时间段进行对比。

示例链接

author Tanner Linsley

🧵 Thread • FixupX

Tanner Linsley (@tannerlinsley)

Announcing @Tan_Stack NPM Stats (Beta)

🔗 Shareable deep links
📦 Group related packages together
📊 Daily/weekly/monthly/yearly binning
📈 View absolute or relative growth
🎯 Set baseline for comparison
👁️ Toggle package visibility
🎨 Customize package colors…

#优质博文 #前端 #工程化 #pnpm
感觉这样挺好的欸。vscode 扩展：antfu.pnpm-catalog-lens

Categorize Your Dependencies

AI 摘要：本文探讨了在项目开发中如何更好地管理和分类依赖包，提出了使用 pnpm catalogs 进行依赖分类和版本管理的方法，并介绍了相关的工具支持和未来可能的应用场景。

详细内容要点：

1. 引言
• 介绍了在项目开发中使用 npm 安装第三方包的情况。
• 解释了依赖包的两种主要类型：dependencies（生产依赖）和 devDependencies（开发依赖）。
• 展示了 package.json 文件中依赖包的示例配置。

2. 依赖包的基本概念
• 详细解释了 dependencies 和 devDependencies 的区别。
• 说明了这些概念最初是为 Node.js 库开发而引入的。
• 讨论了 npm 在安装包时如何处理依赖和开发依赖。

3. 项目类型分类
• 将项目分为三类：Apps（应用程序）、Libraries（库）和 Internal（内部包）。
• 指出依赖和开发依赖的区分主要适用于发布到 npm 的库。

4. 依赖包的多重用途
• 讨论了工具如何扩展依赖和开发依赖的含义以适应不同场景。
• 举例说明 Vite 和其他构建工具如何处理依赖包。

5. 依赖包分类的必要性
• 指出仅使用 dependencies 和 devDependencies 无法充分描述包的用途。
• 提出了一些可能的依赖分类方法，如 test、lint、build 等。

6. PNPM Catalogs 介绍
• 介绍了 pnpm catalogs 功能，允许在 monorepo 中共享依赖版本。
• 展示了如何在 pnpm-workspace.yaml 和 package.json 中配置 catalogs。
• 说明了 catalogs 如何简化版本管理和依赖分类。

7. 工具支持
• 讨论了使用 catalogs 后需要的工具支持。
• 介绍了作者开发的 VS Code 扩展 PNPM Catalog Lens，用于显示依赖版本。
• 列举了已适配 catalogs 的工具，如 taze、eslint-plugin-pnpm 等。

8. 未来展望
• 讨论了依赖分类在未来可能的应用场景，如在 Vite 和 unbuild 中更精细地控制依赖优化和外部化。
• 提出使用 catalogs 可以增强安全性报告和防止错误的打包操作。
• 作者表示已开始在项目中使用 catalogs，并鼓励读者尝试这种方法。

author Anthony Fu

Visualstudio

PNPM Catalog Lens - Visual Studio Marketplace

Extension for Visual Studio Code - Show inlay version for PNPM catalogs