---
url: https://sugarat.top/weekly/2023-01-13.md
---

# 视野修炼第20期

欢迎来到第 20 期的【视野修炼 - 技术周刊】，下面是本期的资讯汇总。

\[\[toc]]

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

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

## 🔥强烈推荐

### 1. [2022 年 JavaScript 明星项目](https://risingstars.js.org/2022/zh)

由 `Best of JS` 整理的 2022 年明星项目榜单出炉了

> 今年的冠军是一个带有微笑标志的美味面包，用微笑开启新的一年是不错的开始!

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzUzNzQ5ODY5NQ==673537498695)

![总览图](https://img.cdn.sugarat.top/mdImg/MTY3MzM2MTM3MTExMg==673361371112)

是不是有很多没有见过的新面孔？是不是很多不认识（”看看你被淘汰了几次“）？`🥔：后面单独开篇文章介绍其中一些库`

下面总结一下榜单内容

* 年度总冠军: Bun 🏆：一个专注性能与开发者体验的全新 JavaScript 运行时
* 前端框架：在 2022 年，React 仍然是冠军，但如果考虑到 Vue.js 的星星在 v2 和 v3 版本的仓库中被分割，那么 Vue.js 的受欢迎程度也很接近
* React生态：Next.js，tRPC（类型安全的API开发框架 ）
* Vue生态：Slidev(markdown写PPT)，Nuxt.js
* 后端&全栈：Next.js，tRPC（类型安全的API开发框架 ）- 还是这2哥们儿
* 构建工具：Vite，Turbopack（前段时间炒的很火）
* css in js：UnoCSS（即时按需原子化CSS引擎），vanilla-extract（0运行时依赖样式表）
* 桌面开发：Tarui，Electron
* 状态管理：Zustand（React），Pinia（Vue）

### 2. 优雅又迅速的ts文件执行方式

**bunx + tsx**

* bunx 是 [Bun](https://bun.sh/) 添加的一个全局指令，类似 `npm` 下的 npx
* tsx：全称`TypeScript Execute` 指基于 `esbuild` 增强Node实现直接执行 TS 的工具

按照官网介绍执行本地包会快 100 倍

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzM2MzY3NzA3OA==673363677078)

当然得先安装 bun，一行代码即可

```sh
curl -fsSL https://bun.sh/install | bash
```

于是，执行ts脚本可以像这样

```sh
首次执行可以使用下面的指令设置一下bun拉包的镜像源（npmmirror 中国镜像站）

echo '[install]
# Default registry
# can be a URL string or an object
registry = "https://registry.npmmirror.com/"' >~/bunfig.toml

运行脚本
bunx tsx test.ts
```

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzM2MzgyNjEwNw==673363826107)

上个演示，直观对比感受一下速度

![bunx调用tsx](https://img.cdn.sugarat.top/mdImg/MTY3MzUzNDYxMjY3Ng==673534612676)

可以直观感受到非常的快，没有丝毫等待的迹象，npx 却有明显的等待时长

当然可以配置一下 `alias` 缩短敲的指令

比如笔者终端执行用的 `zsh` 就在 `~/.zshrc`里添加

```sh
alias bt='bunx tsx'

# 然后执行应用配置
source ~/.zshrc
```

下面就可以用 `bt` 代替 `bunx tsx`

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzUzNTAwOTM0OA==673535009348)

### 3. [拉取Git仓库代码更迅速的方式](https://mp.weixin.qq.com/s/6VaV70zbnfzWBRxHGbmTcw)

* 方式1：`git clone --depth 1 <url>`
  * 只会下载的内容质包含最近一次 `commit` 信息，代码完整
  * **缺点:** ① 切换不到历史 commit ② 切换不到别的分支
* ⭐️方式2：`git clone --filter=blob:none <url>`
  * 只下载 commits 历史以及 HEAD 的文件
  * 每次checkout都会触发一次从remote下载源文件

比较推荐方式2：大家在拉取大型仓库的时候可以实践一下

虽然方式1更快，但后续要正常操作要麻烦一点，方式2没有额外操作步骤

## 🔧开源&工具

### 4. [Roadmap2.0](https://github.com/kamranahmedse/developer-roadmap) - 学习路线指导网站

> 推荐收藏这个网站，总会用上的

新版使用 `astro` + `tailwindcss` 构建

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzUzNjk2MjUwOA==673536962508)

### 5. [publint.dev](https://publint.dev/vue@3.2.45)

检测你的 package.json 有没有问题

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzU3MDgxMzc1MQ==673570813751)

### 6. [lightningcss](https://github.com/parcel-bundler/lightningcss/tree/master)

postcss的替代品，近期发布了 v1.18.0版本，支持js插件扩展

* parcel css 内置了所有 postcss 最佳预设，即开即用
* parcel css 的 visitor api 设计完全吊打

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzU3MDg2OTc0NA==673570869744)

webpack可以安装 [lightningcss-loader](https://github.com/fz6m/lightningcss-loader) 在项目中体验

## 📚文章&资讯

### 7. [英：The year 2022 for pnpm](https://pnpm.io/zh/blog/2022/12/30/yearly-update)

"2022 年暴涨 5 倍下载量，彻底击败 lerna ，作者还在乌克兰每天只有几小时有电，勤勉的维护项目，不断的出新活，respect ！"

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzU3MTM1MTY3MA==673571351670)

### 8. [张鑫旭：前端原生API实现条形码二维码的JS解析识别](https://www.zhangxinxu.com/wordpress/2023/01/js-parse-barcode-qrcode-barcodedetector/)

利用 BarcodeDetector API 实现，实践详见原文

当然目前的兼容性较差

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzU3MTUwNDM0Mg==673571504342)

### 9. [英：:has()伪类的表单样式](https://webkit.org/blog/13096/css-has-pseudo-class/#styling-form-states-without-js)

文章作者利用`:has`实现了许多之前需要 js 协助才能实现的交互样式

这里贴个例子，详细demo见原文

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzU3MTcwMzE1Mg==673571703152)

## 😛趣图

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzUzODAyODI3MQ==673538028271)

![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzUzODA1MjkyOQ==673538052929)

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://www.yuque.com/chencheng/mdh-weekly) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [rottenpen：FE News](https://rottenpen.zhubai.love/) - 分享前端，生活
* [知识星球：咲奈的平行时空](https://public.zsxq.com/groups/28851452458181.html) - 前端前沿技术、资讯、方法论分享