前端周刊第66期：TypeScript教程、ESM、React泡沫、htmx、测试文章

周刊同步发表于微信公众号“写代码的宝哥”，欢迎各位小伙伴前来关注 😄！

快讯

• 软一峰老师最近发布了《TypeScript 教程》，一如既往地免费给大家阅读
• Rich Harris 发推：“Svelte 5 将会带来一次非常激进的改变”
• Chrome 下载功能重新设计了

文章

• 我将软件包现代化到 ESM 的经验 - 本文作者 Mark 是当前 Redux 包重度维护者，同时也是 React 贡献者。这里介绍了他最近将 Redux 系列包迁移到基于 ESM 的痛苦经历和教训。特别要说明的是，作者文中提到了 vitest 和 tsup，也算是这段痛苦经历中的一点甜头吧

• 因为 React 你忘记（或不知道）的事情 - React 是目前市场占有率最高的前端框架，但它真的是现在最好的框架吗？作者认为——不是，它过时了，而我们现在正处在“React 泡沫”时期。那么我们改作何选择呢？不知道。不过作者给出了一些替代选项供参考。总之，事情正在起变化，我们正在接近那个点。
• Node.js 的“配置地狱”问题 - Andy 思考并探究了为什么一个 Next.js 项目会有超过 30 个配置文件，以及我们改如何做来避免它（毫不奇怪，它涉及到使用 Deno）
• ▶   Next.js 13 构建一个 Threads 项目（克隆版） - Threads 是 Meta 公司出品的对标 Twitter/X 的一个社交应用。这是一个长达 5 小时的视频，介绍如何使用 Next.js 13 和 Clerk 来创建这样一个应用程序

• htmx 简介：以 HTML 为中心的动态 UI 库 - 看看什么是 htmx，它如何简化动态 Web 开发
• ▶  htmx：一个替代 React 的“改变游戏规则”框架? - 一个只有 14 分钟的短视频，制作精良。作者很喜欢htmx，认为它值得学习

• 一篇包含每个 HTML 元素的博客文章 - 作者花了 18 个月的时间完成这篇文章，文中将所有 HTML 元素压缩到一个地方进行介绍
• 你可以在 CSS 中指定的最大有效的 z-index 值是多少? - 它可能比你想象的要大

• 优化 eBay 网站速度 - “搜索页面加载时间每缩短 100 毫秒，eBay 的“添加到购物车”的次数就会增加0.5%“——凸显了性能优化在一个庞大规模网站上是多么重要
• 使用文档画中画 API 创建一个截屏 + 摄像机功能的记录器（Screen + Camera Recorder ） - 你基本上可以使用这个 API 进行录制操作，目前在 Chrome 浏览器至少是能正常工作的
• Project IDX：来自 Google 的一个新项目——是一个完全基于浏览器的 IDE（基于 VS Code 技术基础之上），包括对大多数全栈 JavaScript 框架、跨平台预览以及部署到 Firebase 上的支持
• 优秀的测试文章汇编（JS 方面的） - 一份带有鲜明个人色彩的 10 篇优秀测试文章推荐。文中提到了他自己的 JavaScript 和 Node.js的最佳测试实践 repo，其中内容也值得一看

发布

• Astro 2.10 - 3.0 也推出了首个 beta 版
• TypeScript 5.2 RC - TS 5.2 即将发布最终版本
• Nim 2.0 - Nim 是一种受 C 和 Python 启发的静态类型系统语言，支持编译为 JavaScript
• esbuild 0.19.0 - 高性能的打包器现在可以导入包含通配符的路径，并支持 CSS @import 规则。请注意，此版本包含向后不兼容的更改
• Node.js 安全发布 - v20.5.1（Current），v18.17.1（LTS）和 v16.20.2（LTS）都是这组版本的一部分，包含 OpenSSL 安全更新和修复，主要围绕权限策略
• Deno 1.36 - 一个可选的服务器端 JS 运行时。主要包含对 Node.js 系统兼容性改进
• WordPress 6.3 - 世界著名的 CMS，这一版本带来很多重大改进和更新

工具

• Mobile FIRST：一个浏览器扩展，模拟不同的移动设备 - 适用于 Chrome 和 Firefox，对于响应式测试、截图和 gif 模型和演示非常有用

• npmgraph：一个可视化包依赖关系图的有趣方法 - 一种接受一个或多个包名（或 package.json）并呈现它们（可能交叉的）依赖关系图的可视化的 Web 工具，下载输出的 SVG
• Fuite 3.0: 查找Web应用程序内存泄漏的工具 - 一个 CLI 工具，你可以指定任何 URL 进行内存泄漏分析。这里有一篇介绍性的博客文章，还有一个视频教程

资源

• noclip - 一个数字化的电子游戏关卡博物馆 - 这个网站收集了各种经典游戏关卡场景。有《超级马里奥64》中的城堡场地，还有《侠盗猎车手3》中的自由城街道，非常怀旧。WebGL 技术实现，repo

库

• Filesize.js: 从文件大小生成人类可读的字符串 - 例如，123456 字节可以转换成“120.56 KB”——也可以使用不同的转换标准。GitHub repo

• Luxon 3.4: 日期和时间操作库 - 一个是 Moment.js 的替代品，不过日期对象是不可变的（immutable objects），基于 1 的月份索引，以及基于 Intl 的本地化 API 等等

• d3-graphviz 5.1: Graphviz DOT 渲染和动画过渡 - 使用 Graphviz 的 WebAssembly 端口将 DOT 语言定义的图形渲染成 SVG 图表

• 🔊 Meyda: 音频特征提取库 - 支持离线特征提取以及使用 Web Audio API 的实时特征提取。你可以在主页上看到演示

• Typograms: 一种更优雅地渲染 ASCII 图表的方法 - 这是一个有趣的项目，你可以在特殊的 <script> 标签中用纯 ASCII 文本“绘制”图表，这些图表会被渲染成更漂亮的版本。如果 Mermaid 对你来说太复杂了，可以试试这个

• svg-drawing - 一个简单的绘制画布，创建具有“回放”效果的 SVG 图形。提供了一些绘制参数做自定义
• MyTailwind：互动式定制 Tailwind 组件 - 提供了一个简单的可视化编辑器，您可以在其中自定义大约 11 个不同组件（按钮、导航栏、卡片、侧边栏、警告等）的样式，然后复制带有 Tailwind 类的 HTML 代码
• Vaul: React 的无样式抽屉组件（drawer component） - 也被称为“底部表单”（Bottom Sheet），在移动界面中作为对话框元素的替代品非常有用，它由 Radix UI 的对话框组件驱动

---

资料来源：JavaScript Weekly#651、Frontend Focus#605。

本文由mdnice多平台发布