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

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

🔥强烈推荐

Rspack 新成员：Rsdoctor
Bun Shell
DCloud:App跨平台框架对比2023版

🔧开源工具&技术资讯

🐟WoodenFish - 敲木鱼
CSS 实现卡片翻转效果
fsx - JavaScript 的现代文件系统 API
在vscode中悄无声息地摸鱼
人像生成工具

🤖AI工具&资讯

Inpaint-web - 开源的图片修复工具

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

下面开始本期内容的介绍，预计阅读时间 10 分钟。

🔥强烈推荐

1. Rspack 新成员：Rsdoctor

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

这里着重介绍一下新成员：Rsdoctor

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

详细内容可以移步：Rsdoctor v0.1 发布公告，这里摘录一部分：

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

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

产物分析

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

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

2. Bun Shell

Bun 也支持类似 zx（Google出品 - 但集成度略低）执行 shell 命令的功能。

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

下面是一个例子

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 这个包很流行，每周下载量在 8000kw 左右

envKey=envValue script 这种设置环境变量的方式在 Windows 上也不生效，因此有了 cross-env 解决这个问题，周下载量 600w

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

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

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

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版

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

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

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

🔧开源工具&技术资讯

4. 🐟WoodenFish - 敲木鱼

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

5. CSS 实现卡片翻转效果

知识点：

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

6. fsx - JavaScript 的现代文件系统 API

文章是一篇译文

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

如果有跨运行时使用的诉求可以考虑一下这个库 fsx。

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

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!')