---
url: https://sugarat.top/weekly/2024-04-29.md
description: >-
  ① Node.js v22 发布 ② Module Federation 2.0 正式发布！ ③ 终极 CSS 形状实现合集 — 单元素实现 ④
  像和朋友聊天一样编写Alt文本 ⑤ 2024 前端工程师手册 ⑥ HTML 属性与 DOM 属性对比 ⑦ LLM Price Check - AI
  模型价格对比 ⑧ Image2Text - 图片转描述
---

# 视野修炼第82期 | Node.js v22

欢迎来到第 82 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

**​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）**

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. Node.js v22 发布](https://nodejs.org/en/blog/announcements/v22-release-announce)

Node.js 22 发布咯，下面介绍几个值得尝试的特性

① 支持 `require ESM` 模块。

*这个在之前 [CJS 和 ESM 相互兼容？](https://mp.weixin.qq.com/s/0_JtlCDOgF6Q_7dWDFtXAw) 的文章有提前介绍。*

现在可以通过在执行时添加`--experimental-require-module`参数来启动这个特性。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/255358e06028e2e80f9adf9e9bc345e2)

② **node --watch**，现在稳定了，可以替代 nodemon 使用，修改后自动重启 Node 进程。

```sh
node --watch index.js
```

![](https://cdn.upyun.sugarat.top/mdImg/sugar/1d1bb1cdb315ee57d3e62904bf70dc1c)

③ 运行 `scripts` 脚本

`node --run <script>` 和 `npm run <script>` 一样效果。

```sh
node --run start
```

![](https://cdn.upyun.sugarat.top/mdImg/sugar/dccd47d0b2c6a6d0dfdf3227167c0175)

④ `glob` 和 `glob-sync`

![](https://cdn.upyun.sugarat.top/mdImg/sugar/aebaa5f4e6f2c9247150c0cb9ca4ccc3)

可以用其替代 `fast-glob`, `glob`等库使用，用来扫描目录更加方便咯。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/c8ac625da9ebdd371104dcb95ed7b336)

Node.js 18 将于 2025 年 4 月终止生命周期(EOF)，官方建议升级到 Node.js 20 (LTS) 或 Node.js 22（即将成为 LTS）。

*企业里的大部分项目都升不动，现在还是 Node 14 跑，升了就G。*

## 🔧开源工具&技术资讯

### [2. Module Federation 2.0 正式发布！](https://mp.weixin.qq.com/s/E138XQLfEHe-8GVACNjGWw)

> 这是一个由 ByteDance Web Infra 团队与 Module Federation 的作者 @Zack Jackson 共同推出的新版本。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/b7b68da6da3971b0073f5aeaa2e77dde)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/de587a9d9aedf865a5bad62cd1dfb0b5)

*没有深入体验过，不过肯定是好东西，可以跑一下 `quickStart` 试试！*

### [3. 终极 CSS 形状实现合集](https://css-shape.com/) — 单元素实现

![](https://cdn.upyun.sugarat.top/mdImg/sugar/ecf7635114ade87d8d4dd838bb34f75c)

## 📚 教程&文章

### [4. 像和朋友聊天一样编写Alt文本](https://cloudfour.com/thinks/write-alt-text-like-youre-talking-to-a-friend/)

```html
<img alt="?"/>
```

编写替代文本，就像您向朋友描述图像一样。

### [5. 2024 前端工程师手册](https://github.com/FrontendMasters/front-end-handbook-2024)

一本 `现代前端网站开发 / 工程指南`，详细且免费，可[在线阅读](https://frontendmasters.com/guides/front-end-handbook/2024/)。

部分目录截图如下。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/d8c7d2ad6b34b53a42bc6b8cfa515257)

*内容比较多，可以按需阅读对应模块。*

### [6. HTML 属性与 DOM 属性对比](https://jakearchibald.com/2024/attributes-vs-properties/)

> 它们完全不同，但通常是耦合的。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/611d4767efd5625762e268163eaa51c4)

HTML 属性可以序列化，Dom 属性不可以。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/be1cfb4c30671a3d2e998956f92bd6ea)

HTML 属性只能是字符串。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/a53bc730763d8f849f27cbec7d16b2ae)

HTML 属性不区分大小写。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/1f83576d50db86b9b1b620179283894e)

像 id 这样的属性又是耦合的。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/816bce1947e6446ff878e2f2915a78f5)

## 🤖AI工具&资讯

### [7. LLM Price Check](https://llmpricecheck.com/) - AI 模型价格对比

> 这个网站提供 AI 模型价格对比和试用链接。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/fe74b99cdca099750fd044f0db7be110)

### 8. Image2Text - 图片转描述

![](https://cdn.upyun.sugarat.top/mdImg/sugar/28c397afb9fbd202b47cb9a4ae610d97)

效果还行，可以把喜欢的图片喂给他，再把提示词丢给其它文生图模型。

## 😛趣图

![](https://cdn.upyun.sugarat.top/mdImg/sugar/c12ec95b16315c02b550a7c26e163901)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://sorrycc.com/mdh/) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！
* [FRE123 技术周刊精选](https://www.fre123.com/weekly) - 前后端技术周刊精选推荐信息流