前端食堂技术周刊

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

PC 端在仓库里看体验更好，顺手赏个 Star 是对食堂最大的支持。

本期技术周刊视频版：https://www.bilibili.com/video/BV1dF41147rq

本期摘要

• ECMAScript proposal: Types as Comments
• Vitest v0.6.0
• What's New In DevTools (Chrome 100)
• How to Upgrade to the React 18 Release Candidate
• 您的 node_modules 文件夹中到底发生了什么？
• Solid.js 感觉就像我一直希望 React 成为的样子
• The Story of React
• Rust 数据结构与算法
• Red Hat 和 IBM Node.js 参考架构
• 关于依赖管理的真相 — 前端包管理器探究

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

技术资讯

1. ECMAScript proposal: Types as Comments[2]

TypeScript 官方发起了一个令人十分惊喜的提案，将类型注释添加到 JavaScript 代码中，允许这些注释由 JavaScript 外部的类型检查器检查。在运行时，JavaScript 引擎会忽略它们，将类型视为注释。

目的是使开发人员能够运行用 TypeScript、Flow 和 JavaScript 的其他静态类型超集编写的程序，而无需任何转译，前提是它们坚持使用该语言的某个相当大的子集。

对于 TypeScript 和 Flow 来说，随着时间的推移，语言降级的需求将会越来越少，所以将它们转换为 JavaScript 的主要工作就剩下了删除类型注释。

如果让 JavaScript 本身支持类型注释，那么就可以减少构建的步骤，突破 JSDoc 类型注解的限制(冗长且缺乏表现力)，让用户以更简单的方式获得静态类型的好处。

1. Vitest v0.6.0[3]

Vitest 最近发布了 v0.6.0 版本，添加了文件内测试，类似于 Rust 的模块测试。如果你对它还不是很了解的话，可以通过这个链接到达官网学习。

1. What's New In DevTools (Chrome 100)[4]

Chrome 的第 100 个版本如约而至，Chrome DevTools 添加了如下功能：

• 在 Styles 样式窗格中查看和编辑 @supports 规则
• Recorder 记录器面板改进(默认支持常用选择器、自定义选择器等)
• Sources 面板调试悬停时预览类和函数属性信息
• Performance 性能面板新增帧类别

1. How to Upgrade to the React 18 Release Candidate[5]

React 18 现已作为候选版本 (RC) 提供，官方提供了详细的升级指南。

下面我们来看下技术资料：

技术资料

1. 您的 node_modules 文件夹中到底发生了什么？[6]

众所周知，node_modules 文件夹是宇宙中最重的对象之一。大多数项目里 90% 的代码都来自开源，大部分我们都没有读过，它们运行在我们的笔记本电脑和服务器上，并且具备所有的权限。系统还能正常运行可以称为奇迹了。

使用 npm install 下载依赖包就好像在吃自助餐，没有人会阻止你往自己盘子里装多少食物。但如果过度放纵，也会对你的健康造成影响。

不管怎样，我们必须对交付到生产环境的代码负责，无论是我们自己编写的还是开源的。这篇文章中的 Socket 提供了快速评估包安全性和健康分数的能力。对触发安全问题的代码，可以直接跳转到导致问题的代码行，供你审查。

1. Solid.js 感觉就像我一直希望 React 成为的样子[7]

React 自从有了 Hooks 之后，相比 Class 组件，写起代码确实简洁了(其实还不够简洁，只是相对而言)，但是因为没有响应式，我们需要主动声明依赖项，这很容易导致出错。那么 Solid.js 是怎么做的呢？可以通过这篇文章了解详情。

1. The Story of React(视频)[8]

在 React 首次发布时，它并没有得到很好的反馈，大家都不是很接受，因为 React 与之前大家会的技术栈完全不同。

这个视频讲述了从 jQuery 到第一个流行的 JavaScript 框架 backbone.js 还有固执己见的 Angular，再到 React 框架发展的故事。

1. Rust 数据结构与算法[9]

一本开源 Rust 电子书，内容包含算法分析、基本数据结构与算法，还有一些实战。共有 9 章，目录如下：

• 计算机科学
• 算法分析
• 基本数据结构
• 递归
• 查找
• 排序
• 树
• 图
• 实战

1. Red Hat 和 IBM Node.js 参考架构[10]

Red Hat 和 IBM 整理了一些关于 Node.js 的最佳实践。

1. 关于依赖管理的真相 — 前端包管理器探究

前端的包管理器你知道几种呢？

npm、yarn、pnpm、cnpm、tnpm...

为什么要搞出这么多包管理器？每个包管理器的不同版本都存在哪些问题？什么是依赖嵌套，幽灵依赖又是什么？这篇文章会带你搞清楚上面这些问题。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1. 你真的了解 gif 吗？分析 gif 文件和一些奇怪的 gif 特性[11]

这是一篇对 gif 本质深度的探究的文章。

1. It's always been you, Canvas2D[12]

看看 canvas 进化了哪些 API。

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

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

参考资料

[1]

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

[2]

ECMAScript proposal: Types as Comments: https://github.com/giltayar/proposal-types-as-comments

[3]

Vitest v0.6.0: https://vitest.dev/guide/features.html#in-source-testing

[4]

What's New In DevTools (Chrome 100): https://developer.chrome.com/blog/new-in-devtools-100/

[5]

How to Upgrade to the React 18 Release Candidate: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

[6]

您的 node_modules 文件夹中到底发生了什么？: https://socket.dev/blog/inside-node-modules

[7]

Solid.js 感觉就像我一直希望 React 成为的样子: https://typeofnan.dev/solid-js-feels-like-what-i-always-wanted-react-to-be/

[8]

The Story of React(视频): https://www.youtube.com/watch?v=Wm_xI7KntDs

[9]

Rust 数据结构与算法: https://github.com/QMHTMY/RustBook/blob/main/README_CN.md

[10]

Red Hat 和 IBM Node.js 参考架构: https://github.com/nodeshift/nodejs-reference-architecture

[11]

你真的了解 gif 吗？分析 gif 文件和一些奇怪的 gif 特性: https://www.infoq.cn/article/FQe808MycqC0FB8U2DSx

[12]

It's always been you, Canvas2D: https://developer.chrome.com/blog/canvas2d/