---
url: https://sugarat.top/weekly/2024-01-28.md
description: >-
  ① Rspack 新成员：Rsdoctor ② Bun Shell ③ DCloud:App跨平台框架对比2023版 ④ 🐟WoodenFish -
  敲木鱼 ⑤ CSS 实现卡片翻转效果 ⑥ fsx - JavaScript 的现代文件系统 API ⑦ 在vscode中悄无声息地摸鱼 ⑧ 人像生成工具 ⑨
  Inpaint-web - 开源的图片修复工具
---

# 视野修炼第71期 | Rspack 家族新成员 Rsdoctor

*💐 欢迎读者👉🏻 [投稿](https://www.wenjuan.com/s/AN32YrD/) 👈🏻分享内容*

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

\[\[toc]]

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

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

## 🔥强烈推荐

### [1. Rspack 新成员：Rsdoctor](https://mp.weixin.qq.com/s/ayHy4ozpRT8pqXGgyQf7CQ)

![](https://img.cdn.sugarat.top/mdImg/sugar/c3c597b4661072b1d411f28cd0262e89)

现在相关产品已经有 4 个了，很高产呀，社区活跃度也还不错。

![](https://img.cdn.sugarat.top/mdImg/sugar/ca80aef9d7eca53cefaa675afae7bb7e)

这里着重介绍一下新成员：[Rsdoctor](https://rsdoctor.dev/zh/)

> Rsdoctor 是一个构建分析工具，用于分析基于 Rspack 和 Webpack 构建的项目。它支持分析的项目包括：Rsbuild、Create React App、Modern.js 等。

![](https://img.cdn.sugarat.top/mdImg/sugar/a562cf214271fc5f17afac27a1d8dba9)

详细内容可以移步：[Rsdoctor v0.1 发布公告](https://rsdoctor.dev/zh/blog/release/release-note-1)，这里摘录一部分：

1. 概览页能够知道项目配置、诊断信息、编译信息、产物情况

![](https://img.cdn.sugarat.top/mdImg/sugar/3d2ddaa05a7bd151af01856a44d5f961)

2. 诊断模块：其中重复包可以查看到详细的引用路径

![](https://img.cdn.sugarat.top/mdImg/sugar/3949248fafa7411ecf67ccb7c06b9559)

3. 产物分析

![](https://img.cdn.sugarat.top/mdImg/sugar/c66a8b347d356ca7127f9b57bf991245)

*和之前常用的 webpack-build-analyze 插件比，确实更加友好 👍🏻*

*同时在不考虑 Vite 的情况下，也推荐大家优先尝试一下 Rspack*

### [2. Bun Shell](https://bun.sh/blog/the-bun-shell)

Bun 也支持类似 [zx](https://github.com/google/zx)（Google出品 - 但集成度略低）执行 shell 命令的功能。

① 先介绍了js写shell的困难之处

下面是一个例子

```js
import { spawnSync } from 'child_process'

// this is a lot more work than it could be
const { status, stdout, stderr } = spawnSync('ls', ['-l', '*.js'], {
  encoding: 'utf8',
})
```

② 不同操作系统 shell 无法统一

例如 `rm -rf` 在 Windows 上无法使用，因此 [rimraf](https://www.npmjs.com/package/rimraf) 这个包很流行，每周下载量在 8000kw 左右

![](https://img.cdn.sugarat.top/mdImg/sugar/9787efdefb419239675925fe45f59a56)

`envKey=envValue script` 这种设置环境变量的方式在 Windows 上也不生效，因此有了 [cross-env](https://www.npmjs.com/package/cross-env) 解决这个问题，周下载量 600w

![](https://img.cdn.sugarat.top/mdImg/sugar/c29e24e294f1a82977eb9a6881fc78ba)

同时还有 `which` 等指令，这里就不展开赘述了。

**这些polyfill 真的有必要存在吗？**

现在你可以使用 Bun Shell：Bun 中的一种新的实验性嵌入式语言和解释器，允许您在 JavaScript 和 TypeScript 中运行跨平台 shell 脚本。

```ts
import { $ } from 'bun'

// to stdout:
await $`ls *.js`

// to string:
const text = await $`ls *.js`.text()

// 使用变量
const resp = await fetch('https://example.com')

const stdout = await $`gzip -c < ${resp}`.arrayBuffer()

// 可以使用 cd 、echo 和 rm 等内置命令

await $`cd .. && rm -rf node_modules/rimraf`
```

> 它被设计为简单 shell 脚本的直接替代品。在 Windows 版 Bun 中，它将为 bun run 中的 package.json “脚本”提供支持。

*笔者准备下来深度体验一番，再写个使用反馈（准备先来个翻译文章，再来个使用实践），我感觉这个东西是很赞的，值得推荐*

### [3. DCloud:App跨平台框架对比2023版](https://mp.weixin.qq.com/s/j1xuhxiVwOnhEHKx1Hr6VQ)

> App跨平台框架历史悠久，从cordova、react native、flutter，直到最近的uni-app x。江山代有才人出，每个都试图颠覆原生，但过去却一直未成功。

![](https://img.cdn.sugarat.top/mdImg/sugar/1729cc2242e9e160cf727665341c6f11)

文章通过举例对比了常见框架的优缺点，最后介绍了一下 `uni-app x`。

![](https://img.cdn.sugarat.top/mdImg/sugar/3452c49821c93dd04a07a71bf9652123)

*但是现在 `uni-app x` 还不支持 iOS*

![](https://img.cdn.sugarat.top/mdImg/sugar/0d2a29ecc096101d6964ad7e2138fb45)

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

### [4. 🐟WoodenFish - 敲木鱼](https://github.com/jwenjian/wooden-fish)

> 一个敲木鱼的网页 App，移动端打开时，只有侦测到手机陀螺仪的角度变化，才算一次敲击动作，这时可以把手机想象成敲木鱼的棒子

![](https://img.cdn.sugarat.top/mdImg/sugar/9d601a24c9dce59a82c2bc719e8fe43e)

### [5. CSS 实现卡片翻转效果](https://mp.weixin.qq.com/s/KQY_wBY_Bkn27jtcx6IjVg)

知识点：

1. 伪元素的灵活使用`::before`与`::after`
2. transform 过渡属性的使用
3. css3 中 backface-visibility 属性：定义当元素背面向屏幕时是否可见

![](https://img.cdn.sugarat.top/mdImg/sugar/2d0b13bbad9cd7fec174c68f7f18feb2)

### [6. fsx - JavaScript 的现代文件系统 API](https://mp.weixin.qq.com/s/KT8s5KXKf8mJRmtLRV7-fg?scene=25#wechat_redirect)

*文章是一篇译文*

> fsx 库在不同的运行时环境中都可用，包括 Node.js、Deno 和内存中实现，提供了统一的使用方式。

如果有跨运行时使用的诉求可以考虑一下这个库 [fsx](https://github.com/humanwhocodes/fsx/blob/main/docs/README.md)。

![](https://img.cdn.sugarat.top/mdImg/sugar/d1493c62a3e1428e2f3182923dee9d94)

下面看一下 API 使用示例，封装了大概 10 几个常用的👍🏻。

```js
import { fsx } from 'fsx-node'

// read plain text
const text = await fsx.text('/path/to/file.txt')

// read JSON
const json = (await fsx.json('/path/to/file.json')) ?? {}

await fsx.write('/path/to/file.txt', 'Hello world!')
```

### [7. 在vscode中悄无声息地摸鱼](https://mp.weixin.qq.com/s/VKWHvyHwIqBmTEa6M-5aKA)

文章介绍了几个可以在 VS Code 中 “摸鱼”的插件：

* [Zhihu On VSCode](https://marketplace.visualstudio.com/items?itemName=niudai.vscode-zhihu)： 刷知乎
* [daily anime](https://marketplace.visualstudio.com/items?itemName=deepred.daily-anime)：追番
* [韭菜盒子](https://marketplace.visualstudio.com/items?itemName=giscafer.leek-fund)：VSCode 里也可以看股票 & 基金 & 期货实时数据

*笔者试用了一下，都还挺好用的，就不贴图了，感兴趣的可以装上试试*

### [8. 人像生成工具](https://sinqi.tools/zh/avatar)

> 基于手绘风 SVG 人物画像集合 Open Peeps，一个人物画像的在线定制工具。

![](https://img.cdn.sugarat.top/mdImg/sugar/1d578230eb85fa607184be4b6613a007)

*还不错哦效果，Mark*

## 🤖AI工具&资讯

### [9. Inpaint-web](https://github.com/lxfater/inpaint-web) - 开源的图片修复工具

基于 Webgpu 和 wasm 技术, 纯浏览器端实现。

随便找了张图测试了一下，效果确实还行。

![](https://img.cdn.sugarat.top/mdImg/sugar/ddd069bacba6104af149bccd1cfe0696)

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/sugar/32f6a0f073c264d662d19a07ff19376d)

***

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

## ⭐️强力推荐关注

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