视野修炼-技术周刊第20期

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

强烈推荐

2022 年 JavaScript 明星项目
优雅又迅速的ts文件执行方式
拉取Git仓库代码更迅速的方式

开源&工具

Roadmap2.0 - 学习路线指导网站
publint.dev
lightningcss

文章&资讯

英：The year 2022 for pnpm
张鑫旭：前端原生API实现条形码二维码的JS解析识别
英：:has()伪类的表单样式

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

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

强烈推荐

1.2022 年 JavaScript 明星项目

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

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

是不是有很多没有见过的新面孔？是不是很多不认识（"快去认认标"）？：后面单独开篇文章介绍其中一些库

下面总结一下榜单内容

年度总冠军: 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 添加的一个全局指令，类似 npm 下的 npx
tsx：全称TypeScript Execute 指基于 esbuild 增强Node实现直接执行 TS 的工具

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

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

curl -fsSL https://bun.sh/install | bash
复制代码

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

首次执行可以使用下面的指令设置一下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
复制代码

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

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

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

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

alias bt='bunx tsx'

# 然后执行应用配置
source ~/.zshrc
复制代码

下面就可以用 bt 代替 bunx tsx

3.拉取Git仓库代码更迅速的方式

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

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

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