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

强烈引荐

  1. Rspack 新成员：Rsdoctor
  2. Bun Shell
  3. DCloud:App跨途径框架比照2023版

开源东西&技能资讯

  1. WoodenFish – 敲木鱼
  2. CSS 完成卡片翻转作用
  3. fsx – JavaScript 的现代文件体系 API
  4. 在vscode中悄然无声地摸鱼
  5. 人像生成东西

AI东西&资讯

  1. Inpaint-web – 开源的图片修正东西

​也引荐大家关注一下最后的引荐内容（周刊的主要内容来历途径）

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

强烈引荐

1. Rspack 新成员：Rsdoctor

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

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

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

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

Rsdoctor 是一个构建剖析东西，用于剖析依据 Rspack 和 Webpack 构建的项目。它支撑剖析的项目包含：Rsbuild、Create React App、Modern.js 等。

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

详细内容能够移步：Rsdoctor v0.1 发布公告，这儿摘抄一部分：

  1. 概览页能够知道项目装备、确诊信息、编译信息、产品状况

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

  1. 确诊模块：其中重复包能够查看到详细的引用途径

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

  1. 产品剖析

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

和之前常用的 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 左右

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

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

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

一起还有 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。江山代有才人出，每个都试图推翻原生，但曩昔却一直未成功。

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

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

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

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

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

开源东西&技能资讯

4. WoodenFish – 敲木鱼

一个敲木鱼的网页 App，移动端翻开时，只要侦测到手机陀螺仪的视点变化，才算一次敲击动作，这时能够把手机想象成敲木鱼的棒子

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

5. CSS 完成卡片翻转作用

知识点：

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

6. fsx – JavaScript 的现代文件体系 API

文章是一篇译文

fsx 库在不同的运行时环境中都可用，包含 Node.js、Deno 和内存中完成，供给了一致的运用方法。

假如有跨运行时运用的诉求能够考虑一下这个库 fsx。

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

下面看一下 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!')

7. 在vscode中悄然无声地摸鱼

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

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

8. 人像生成东西

依据手绘风 SVG 人物画像集合 Open Peeps，一个人物画像的在线定制东西。

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

还不错哦作用，Mark

AI东西&资讯

9. Inpaint-web – 开源的图片修正东西

依据 Webgpu 和 wasm 技能, 纯浏览器端完成。

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

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

趣图

视界修炼第71期 | Rspack 宗族新成员 Rsdoctor

篇幅有限，假如你还没看够，可移步后边的引荐途径，继续旅游，前史周刊（<20）移步博客

⭐️强力引荐关注