前端食堂技术周刊第 75 期：React 新文档上线、Modern.js v2、TypeScript 5.0、Electron 的十年、Houston AI、Deno Frameworks

美味值：

口味：麻辣凤爪

• 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly

本期摘要

• React 新文档上线
• Modern.js v2 发布
• TypeScript 5.0
• Vite v4.2.0
• Electron 的十年
• Astro 发布 Houston AI
• proto
• Deno Frameworks
• React Forget 的局限
• Webpack 5 的任意代码漏洞

大家好，我是童欧巴。欢迎来到前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1. React 新文档上线

在 Hooks 发布 5 年后，React 新文档终于正式上线了。

• 所有示例使用函数式组件和 Hooks
• 包含图表、插图、题目挑战、600+ 个交互事例
• 旧网站被转移到 legacy.reactjs.org
• 提供 React 团队成员 名单

2. Modern.js v2 发布

开源了三个解决方案：Modern.js 框架、Modern.js Module 和 Modern.js Doc，分别面向 Web 应用开发场景、npm 包开发场景和文档站开发场景。

Modern.js 框架

• 开箱即用的双构建工具支持：Webpack、Rspack(已支持在 Rspack 模式下使用框架的 70% 功能和配置项，几分钟即可平滑迁移)
• 渐进式设计：可以通过 modern new 按需开启功能，支持不同规模项目开发诉求
• 插件系统：包括 CLI 插件、Server 插件、Runtime 插件
• 嵌套路由：基于 React Router v6，进行了资源加载、共享布局和数据获取方面的优化
• 支持流式渲染（Streaming SSR ）

Modern.js Module

• 构建：基于 esbuild + swc，并扩展插件机制。支持 bundle/bundleless，支持对类型文件的 bundle 处理和文件里的别名处理
• 调试：基于 Storybook
• 测试：集成 Jest
• 版本管理：基于 Changeset
• 扩展能力：包含丰富 Hooks 的插件机制，支持扩展调试能力

Modern.js Doc

• 基于 Rspack 构建
• 支持 MDX
• 全文搜索：基于 FlexSearch
• 国际化
• 自定义主题
• 插件机制

3. TypeScript 5.0

自 RC 版本以来基本没有变化。

• package.json 指定了最低 Node.js 版本 12.20
• 发布了迁移到 ESM 的文章
• 调整了各项基准数值

4. Vite v4.2.0

• 支持 HTML 文件中的环境变量替换
• Sourcemaps 改进
• 支持 ESM subpath imports
• 支持 TypeScript 5、esbuild 升级到 0.17
• 支持 import type { Rollup } from 'vite'

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s5l0NqHY-1679223240355)(https://files.mdnice.com/user/15/bee9b8a2-966f-4b47-bbf9-c3ccdc15a97c.png)]

5. Electron 的十年

十年经验总结包括：

• 成立工作组，分而治之(Releases WG、Upgrades WG、API WG、Security WG、Ecosystem WG、Outreach WG、Community & Safety WG、Infrastructure WG)
• 将 Electron 的所有权从 GitHub 转移到了 OpenJS 基金会
• 社区方面：建立 Discord 线上虚拟社区、参与高知名度的开源项目
• 自动化所有事情：Not Goma、CFA、Sheriff、GitHub bots(Sudowoodo、Trop、Roller、Cation)
• What’s next？与 Chromium 的发布节奏保持同步，每 8 周发布一次 Electron 的 major 版本，保持框架与 web 平台和 Node.js 的更新，保持企业级应用的稳定性和安全性

6. Astro 发布 Houston AI

第一个发布 AI 产品的前端框架，Houston AI 基于 GPT 3、LangChain、Astro 2.0、Astro 文档站点。

下面我们来看技术资料。

技术资料

1. proto

基于 Rust 实现的工具链管理器，又一层抽象。目前的 Feature 包括支持管理多个语言、跨平台、版本检测、来源验证以及生态系统检测。

2. Deno Frameworks

本文介绍了 Deno 生态中的框架 Fresh、Aleph、oak、Hono、Ultra、Lume、Alosaur。

3. React Forget 的局限

React Core Team 成员 Andrew Clark 认为 React Forget 比 Signals 更好。

而 Builder.io 的 CTO，也是 Angular、Qwik 等框架的作者 Miško Hevery 表示非常惊讶，他认为 Signals 更好。因为 useMemo 无法解决 prop-drilled 的问题，并在文中举出了具体的事例。

Signals 开箱即用，相比记忆化更加高效，因为他们不受组件渲染树的约束，且能够仅对需要更新的视图进行细粒度更新，避免很多重渲染的性能浪费。

4. Webpack 5 的任意代码漏洞

这个漏洞危害还是很大的，在三方库里添加一段 magic 代码，就可以实现执行任意代码，如打开你的计算器、读取你的账号信息。具体可以查看云谦的这篇解读文章：Webpack 最近的任意代码漏洞是怎么回事

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。