歡迎來到第 80 期的【視野修煉 - 技術週刊】，下面是本期的精選內容簡介
🔥強烈推薦
- Bun 1.1 發佈 - Bundows
- Signals 的標準化提案
- 免費的AI咒語聚合網站
🔧開源工具&技術資訊
- 前端框架新勢力大盤點
- dashpress - 數據庫管理
- node.js 截圖庫
- autospec - API 規範描述文件生成
- Journey.js - 交互式引導
- barbajs - 頁面切換的平滑過渡
📚 教程&文章
- CSS 容器查詢交互式教程
也推薦大家關注一下最後的推薦內容（週刊的主要內容來源渠道）
下面開始本期內容的介紹，預計閱讀時間 9 分鐘。
🔥強烈推薦
1. Bun 1.1 發佈 - Bundows
4月1日發佈，完美支持 Windows 平臺（>= Win 10）。
所有功能都可以在 Windows 上使用了，再也不是閹割版本了。
特別推薦 Bun install 和 Bun Shell
// test.ts
import { $ } from 'bun'
// pipe to stdout:
await $`ls *.js`
bun run test.ts
執行 TS 腳本，可以直接 bun filename
bun hello.ts
速度極快，完全替代了 ts-node, tsx 這些庫，成爲了我日常執行 TS 腳本的首選。
2. Signals 的標準化提案
去年的很火的一個東西，可以一起回顧一下這張趣圖。
現在有人弄成 ES 提案了，用法如下。
| 常規寫法 | signals寫法 |
|---|---|
 |
 |
最終效果是不是和現在的前端框架大差不差了 👍🏻？
3. 免費的AI咒語聚合網站
可以收藏起來，有空的時候翻一翻 CV CV 本地使用。
🔧開源工具&技術資訊
4. 前端框架新勢力大盤點
簡單介紹了一下Astro, Qwik, Remix, Refine, Nue, VanJS, Waku 這些框架的發佈時間和特色。
輪子非常多，每個都有合適的使用場景，對這些新興框架感興趣的可以深入學習瞭解一下。
5. dashpress - 數據庫管理
只需執行一個命令，就會自動分析數據庫結構，生成管理後臺，號稱不用寫代碼。
① 終端執行指令
npx dashpress
② 訪問面板
http://localhost:3000
③ 錄入數據庫賬號即可
看上去像一個常規數據庫管理軟件，暫沒體驗到特別的功能。
只能說啓動非常方便 👍🏻，有 Node 即可。
6. node.js 截圖庫
原生的 node.js 截圖庫，支持 Mac、Windows 和 Linux 系統，且無需任何依賴。
使用示例
const fs = require('fs')
const { Screenshots } = require('node-screenshots')
const capturer = Screenshots.fromPoint(100, 100)
console.log(capturer, capturer.id)
// 同步截圖
const image = capturer.captureSync()
fs.writeFileSync('./a.png', image)
// 異步截圖
capturer.capture().then((data) => {
console.log(data)
fs.writeFileSync(`${capturer.id}.png`, data)
})
7. autospec - API 規範描述文件生成
自動記錄請求接口的格式，生成符合 OpenAPI 3.0 規範 的描述文件。
① 錄製接口
# ① 安裝依賴
npm i openapi-autospec
# ② 啓動錄製服務
npx autospec --portTo 3000 --filePath api.json
這裏的 3000 是你的本地後端服務的端口，啓動後效果如下
Proxy server listening on port 8687
Configure your client to use proxy at
127.0.0.1:8687
All traffic will be forwarded to 127.0.0.1:3000
你可以在前端應用中將 proxy 指向 8687 端口，服務會自動將其轉發到 3000 端口
// proxy 配置
proxy: {
'/api/': {
target: 'http://127.0.0.1:8687',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/api/, '')
},
}
② 生成文檔
所有的請求都會被記錄並自動生成對應的描述文件，下面是請求打印的日誌。
[POST] received for http://127.0.0.1:8687/public/report/pv
[GET] received for http://127.0.0.1:8687/super/user/message
[GET] received for http://127.0.0.1:8687/category
[GET] received for http://127.0.0.1:8687/task
[GET] received for http://127.0.0.1:8687/user/power/super
接着可以使用 Redoc 生成文檔。
npx @redocly/cli build-docs api.json
最終文檔效果如下。
非常適合需要對外給到部分API文檔時，進行自動生成。
下週準備深度使用一下，看看 awesome-api-devtools 提到的一些文檔工具，弄個API文檔生成最佳實踐。
8. Journey.js - 交互式引導
零依賴庫，用於創建交互式和可訪問的引導。
可直接通過 Dom 屬性綁定步驟。
<button data-journey-js="{ 'title': 'Get Version', 'description': 'Logs the current version of Journey.js to the developers console.', 'order': 6 }" onclick="console.log( $journey.getVersion() );">Get Version</button>
<script>
// 啓動
$journey.start();
</script>
9. barbajs - 頁面切換的平滑過渡
可用於製作平滑的頁面過渡效果，效果可訪問 https://barba.js.org/ 體驗。
📚 教程&文章
10. CSS 容器查詢交互式教程
非常詳細，有興趣&時間的可以細品一下。
篇幅有限，如果你還沒看夠，可移步後面的推薦渠道，繼續遊覽，歷史週刊（<20）移步博客
⭐️強力推薦關注
- 阮一峯: 科技愛好者週刊 - 記錄每週值得分享的科技內容，週五發佈
- 雲謙：MDH 前端週刊 - 前端資訊和分享
- 童歐巴：前端食堂 - 你的前端食堂，喫好每一頓飯
- 前端RSS - 根據 RSS 訂閱源抓取最新前端技術文章
- 值得一讀技術博客 - 每天進步一點點，每天分享有料的技術文章！
- FRE123 技術週刊精選 - 前後端技術週刊精選推薦信息流