【第16期】前端食堂技术周刊

技术资讯

1. Vitest[2]

antfu 和 patak 开发了一个由 Vite 提供支持的快速单元测试框架，特性：

• Vite 的配置、转换器、解析器、插件
• 智能和实时观看模式，用于测试的 HMR
• Vue、React 等组件测试
• 开箱即用的 TS/JSX
• ESM
• 快照测试
• 。。

如果你对单元测试还不是很了解，可以通过这篇文章先入个门如何做前端单元测试[3]

1. Web Performance Calendar[4]

Stoyan Stefanov 组织的 Web Performance Calendar，已经连续 13 年了，每年的 12 月发行，是你 12 月的最佳读物之一。

1. vite@2.7.0 发布[5]

• 改进 SSR 依赖处理
• API 整合
• 默认 server.fs.strict

1. ahooks v3.0.0 发布[6]

ahooks 3.0 的目标是建设 高质量可靠的 React Hooks 库，我们希望成为像 lodash 一样的稳定的基础依赖。相较于 2.0，具有以下几个优势：

• 全面支持 SSR
• 全新的 useRequest
• 所有的输出函数地址是固定的，避免闭包问题
• DOM 类 Hooks 支持 target 动态变化
• 更合理的 API 设计
• 解决了在严格模式（Strict Mode）下的问题
• 解决了在 react-refresh（HRM）模式下的问题
• 新增了更多 Hooks
• 修复了很多已知问题

技术资料

1. TypeScript 挑战[7]

TypeScript 团队在今年 10 月末提出了几个“令人毛骨悚然”的代码挑战，让您以一种有趣的方式深入挖掘 TypeScript 语言。

• 2020 年发布的挑战[8]

1. reddit_recap_2021[9]

2021 年 Reddit 回顾报告。

1. ts-log-cn[10]

从 TypeScript 的更新日志中筛选类型相关的知识点, 类型推断的变化(放宽)和配置项以及 ECMA 的新增语法选录。

1. HTMHell Advent Calendar[11]

一个专注于 HTML 的博客网站。

• 地狱(真实网站中的不良做法合集)
• 天堂(HTML小妙招)
• 传送门：在每扇门的后面，您都会找到一篇专注于 HTML 的文章、演讲或工具。

1. Ben Awad 面试 Dan Abramov 的直播回放[12]

对，就是垂直居中那个。

1. Thank you, Angular[13]

Angular 的核心领导者之一 Igor Minar (工作了 12 年) 的离职感言。

1. React Holiday[14]

React 18 免费教程，为期 25 天。

1. 2021 React Conf 回放地址，右下角可以切换中文字幕[15]

好文推荐

• 多人协同编辑技术的演进[16]
• 张鑫旭：前端工程师应该为用户体验负责

评论区吵的厉害，不过用户体验这一点我站鑫旭老师，现在好用的产品太少了，更别提用户体验好。做一个有工匠精神的工程师是一种优秀的职业素养，希望读过这篇文章后大家可以深度思考用户体验这个问题。毕竟，用户体验这一层，早晚也会卷起来。

• React中的TS类型过滤原来是这么做的！

参考资料

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

[2]Vitest: https://vitest.dev/

[3]如何做前端单元测试: https://juejin.cn/post/7039108357554176037

[4]Web Performance Calendar: https://calendar.perfplanet.com/2021/

[5]vite@2.7.0 发布: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md

[6]ahooks v3.0.0 发布: https://github.com/alibaba/hooks/releases/tag/v3.0.0

[7]TypeScript 挑战: https://devblogs.microsoft.com/typescript/type-treat-wrap-up/

[8]2020 年发布的挑战: https://www.typescriptlang.org/play?#gist/303ebff59a6fc37f88c86e86dbdeb0e8-0

[9]reddit_recap_2021: https://www.reddit.com/r/blog/comments/rbqu7c/reddit_recap_2021/

[10]ts-log-cn: https://github.com/any86/ts-log-cn

[11]HTMHell Advent Calendar: https://www.htmhell.dev/adventcalendar/

[12]Ben Awad 面试 Dan Abramov 的直播回放: https://www.youtube.com/watch?v=XEt09iK8IXs

[13]Thank you, Angular: https://blog.angular.io/thank-you-angular-d90d70f2e9d8

[14]React Holiday: https://react.holiday/

[15]2021 React Conf 回放地址，右下角可以切换中文字幕: https://conf.reactjs.org/stage

[16]多人协同编辑技术的演进: https://zhuanlan.zhihu.com/p/425265438