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

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

强烈引荐

1. 2022 年 JavaScript 明星项目
2. 高雅又敏捷的ts文件履行方法
3. 拉取Git库房代码更敏捷的方法

开源&东西

4. Roadmap2.0 – 学习路线辅导网站
5. publint.dev
6. lightningcss

文章&资讯

7. 英：The year 2022 for pnpm
8. 张鑫旭：前端原生API完成条形码二维码的JS解析辨认
9. 英：: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）移步博客

⭐️强力引荐重视

• 阮一峰: 科技爱好者周刊 – 记录每周值得共享的科技内容，周五发布
• 云谦：MDH 前端周刊 – 前端资讯和共享
• 童欧巴：前端食堂 – 你的前端食堂，吃好每一顿饭
• rottenpen：FE News – 共享前端，生活
• 知识星球：咲奈的平行时空 – 前端前沿技术、资讯、方法论共享