前端周刊第二十一期

前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表，欢迎大家关注、转载。
如果外链不能访问，关注公众号「前端每周看」，里面有解决办法

大事件

• 比较三种非破坏性处理数组的方法——JavaScript 的好医生将for-of、.reduce()和.flatMap()相互对立，这样您就可以选择最适合您自己的数组处理工作的方法。

• npm 安全更新：GitHub 对 4 月份攻击的了解——上个月，npm 注册表的管理者 GitHub报告说，被盗的 OAuth 令牌被用于访问某些私有存储库、私有包清单和元数据，以及 npm 用户帐户数据。这是一个更新。值得注意的是： “在将 npm 集成到 GitHub 日志系统之后，GitHub 发现了许多用于 npm 注册表的纯文本用户凭证，这些凭证在内部日志中被捕获。

• TypeScript 4.7 发布——类型化 JavaScript 超集的主要特性是对 Node.js 的 ES 模块支持——该特性一直难以实现，并且其对文件扩展名的依赖继续引发争论——以及 CommonJS 互操作性（来自 ES 模块） 、改进的函数推理、括号元素访问的控制流分析等。

• Next.js's Layouts RFC: Big Changes Ahead for Next.js——如果你是 Next.js 用户，你会想要阅读这篇文章，因为一些重要的更新正在进行中，特别是在路由、应用程序结构和布局方面（包括嵌套布局）。

文章

1. 什么是“边缘计算”？“这有点像编织狗帽” — 看，这个比喻让我们发笑，作者在这里延伸了很长一段路。

2. Airbnb 如何通过 Metro 获得更快的 JavaScript 构建 — Airbnb 从 Webpack 迁移到Metro（一个针对 React Native 的 JavaScript 捆绑器，但 Airbnb 将它用于 Web 项目）的故事，以及它如何使他们的开发反馈循环“几乎是即时的”。

3. 我们如何将 Node.js 库转换为 Deno（使用 Deno） - “我们采用了一种“运行时适配器”模式，我们认为它代表了一种通用方法，可能对其他希望支持 Deno 的库作者有用。”

4. 2022 年 React 状态管理库综述 - 这个领域有很多选择，包括 Zusstand、Recoil、XState，当然还有 Redux。

5. JSON 和 JavaScript 中的字符串化怪异 - 这不是最简单的事情，尽管至少有一个（复杂的）书面规范用于JSON.stringify's 的操作。

6. The Balance has Shifted away from SPAs - 这不是最简单的事情，尽管至少有一个（复杂的）书面规范用于JSON.stringify's 的操作。

框架发布

1. Electron 19 – 获取 Chromium 102、V8 10.2 和 Node 16.14.2。
2. Neutralino.js 4.6 - 轻量级跨平台桌面应用程序框架。
3. fast-check 3.0 – 基于属性的测试框架。
4. Knex 2.1.0 – Node.js 的 SQL 构建器。
5. Cypress 9.7.0 – 在浏览器中测试任何东西。
6. Storybook 6.5 – UI 组件开发工具。

代码和工具

1. Ninja Keys：为您的应用程序/站点添加命令面板/键盘快捷键界面：如果您在 GitHub 上使用过 Cmd/Ctrl+K 或在 VS Code 等工具中使用命令面板，您会觉得这很熟悉，而且很方便在 vanilla JS 应用程序中或与 Vue、React 或 Svelte 一起使用。Kbar是该领域的另一位参与者，更专注于 React。

2. Filesize.js：从文件大小生成人类可读的字符串：例如，123456 字节可以变成"120.56 KB"

3. Three.js 的自定义 Vue 3 渲染器：直接在此处提供时髦的整页演示。检查后，这些文档可能会更有用。“把它想象成 Vue 的 react-three-fiber。”

4. React-Uploady 1.0：文件上传组件和钩子：旨在简单而高度可定制。您可以拥有文件上传按钮、预览、拖放上传区域等。文档很好，展示了一个基本示例，还有一个截屏视频。

5. Estimator.dev：现代 JavaScript 节省计算器：计算通过切换到更现代的 JavaScript 语法可以实现的网站大小改进。

6. 浏览器扩展模板：快速充实浏览器扩展代码库：Think create-react-app but for an extension, kinda.