欢迎来到第 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 <url>- 只会下载的内容质包括最近一次
commit信息，代码完好 - 缺陷: ① 切换不到前史 commit ② 切换不到别的分支
- 只会下载的内容质包括最近一次
- ⭐️方法2：
git clone --filter=blob:none <url>- 只下载 commits 前史以及 HEAD 的文件
- 每次checkout都会触发一次从remote下载源文件
比较引荐方法2：我们在拉取大型库房的时候能够实践一下
虽然方法1更快，但后续要正常操作要费事一点，方法2没有额定操作步骤
开源&东西
4. Roadmap2.0 – 学习路线辅导网站
引荐收藏这个网站，总会用上的
新版运用 astro + tailwindcss 构建
5. publint.dev
检测你的 package.json 有没有问题
6. lightningcss
postcss的替代品，近期发布了 v1.18.0版别，支撑js插件扩展
- parcel css 内置了所有 postcss 最佳预设，即开即用
- parcel css 的 visitor api 规划彻底吊打
webpack能够装置 lightningcss-loader 在项目中体会
文章&资讯
7. 英：The year 2022 for pnpm
“2022 年暴升 5 倍下载量，彻底打败 lerna ，作者还在乌克兰每天只有几小时有电，勤勉的保护项目，不断的出新活，respect ！”
8. 张鑫旭：前端原生API完成条形码二维码的JS解析辨认
利用 BarcodeDetector API 完成，实践详见原文
当然现在的兼容性较差
9. 英：:has()伪类的表单款式
文章作者利用:has完成了许多之前需要 js 帮忙才干完成的交互款式
这儿贴个例子，具体demo见原文
篇幅有限，如果你还没看够，可移步后面的引荐渠道，持续游览，前史周刊（<20）移步博客
