---
url: https://sugarat.top/weekly/2023-04-14.md
description: ① 开发者专属搜索引擎 ② 更加优雅的操作AST方式 ③ 面向21世纪的终端工具 ④ Node.js事件循环可视化指南 ⑤ 本周最火🔥的项目是什么？
---

# 视野修炼第33期

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

\[\[toc]]

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

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

## 🔥强烈推荐

### 1 [phind](https://www.phind.com/) 开发者专属的搜索引擎

*Tip: 需要“魔法”才能访问*

![](https://img.cdn.sugarat.top/mdImg/MTY4MTQ4MDM5NzQwNQ==681480397405)

试用了一下还是不错的，会自动总结检索文章中的内容，并把内容来源都详细列举了出来（比baidu的开发者搜索强不少）

下面看2个案例

① 实现毛玻璃效果

![](https://img.cdn.sugarat.top/mdImg/MTY4MTQ4MTQ4OTg3MQ==681481489871)

![](https://img.cdn.sugarat.top/mdImg/MTY4MTQ4MTkyMjI2Mw==681481922263)

② 查看端口占用情况

![](https://img.cdn.sugarat.top/mdImg/MTY4MTQ4MjA4OTI5MQ==681482089291)

### 2 [magicast](https://github.com/unjs/magicast) - 优雅的AST操作工具

*`antfu` 大佬参与的又一佳作*

基于 `recast` 和 `babel` 实现，允许以编程方式修改 `JavaScript` 和 `TypeScript` 的源代码，操作AST更加优雅

来看看官方示例

`config.js:`

```js
export default {
  foo: ["a"],
};
```

修改源码，往`foo`里插入一个值`b`

```ts
import { loadFile, writeFile } from "magicast";

const mod = await loadFile("config.js");

// 就像常规的对象插值一样
mod.exports.default.foo.push("b");

await writeFile(mod);
```

更新后的 `config.js:`

```js
export default {
  foo: ["a", "b"],
};
```

这种库可以用到一些需要修改源码的插件中，或者自动化重构代码的场景(需要操作AST)

### [3 Warp - 21世纪的终端工具](https://app.warp.dev/referral/E7488N)

最近被安利的一个Terminal工具（还是挺好用，但目前只支持Mac）

打开速度非常的快（完全基于Rust构建，不参杂WEB技术）

我们先看看官网

![](https://img.cdn.sugarat.top/mdImg/MTY4MTUyNzkzNDg0Mg==681527934842)

再看看有哪些 **"开箱即用的特色功能"**

① 编辑体验

![](https://img.cdn.sugarat.top/mdImg/MTY4MTUyOTA3MjQ2Ng==warp-edit.gif)

支持鼠标在任意位置操作，也可通过快捷键 快速的跳转与内容选取

② 搜索与补全

![](https://img.cdn.sugarat.top/mdImg/MTY4MTUyOTcwMTM3NQ==wrap-tip.gif)

支持内容搜索，开箱即用的命令补全与纠错

③ AI加持

![](https://img.cdn.sugarat.top/mdImg/MTY4MTUzMDQwNTIyNQ==681530405225)

![](https://img.cdn.sugarat.top/mdImg/MTY4MTUzMDM2NTQ2MA==681530365460)

每日免费100次的 `chatGPT` 提问

了解更多功能推荐去看官网的介绍视频

## 🔧开源&技术资料

### [4 vue-reuse-template](https://github.com/antfu/vue-reuse-template) - 允许模板里定义可重用的模板

`antfu` 的又一花活，类似于使用 `defineComponent` 直接定义组件

大概用法如下

```vue
<script setup>
import { createReusableTemplate} from 'vue-reuse-template'

const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
</script>

<template>
  <DefineTemplate v-slot="{ data, msg, anything }">
    <div>{{ data }} passed from usage</div>
  </DefineTemplate>

  <ReuseTemplate :data="data" msg="The first usage" />
  <ReuseTemplate :data="anotherData" msg="The second usage" />
  <ReuseTemplate v-bind="{ data: something, msg: 'The third' }" />
</template>
```

目前这个能力已被集成到 [VueUse v10](https://vueuse.org/core/createReusableTemplate/) 里

### [5 深度使用html2canvas的经验总结](https://mp.weixin.qq.com/s/dPZLXaRFfIGmX6MBrPlKKQ)

> "本文主要关注 html2canvas 的前端生成方案，作者把在其中学习到的思路和踩坑经验和大家分享下，帮助大家上线顺利，享受美好的周末"

### [6 Node.js事件循环可视化指南](https://www.builder.io/blog/visual-guide-to-nodejs-event-loop)

![](https://img.cdn.sugarat.top/mdImg/MTY4MTUzODQyODI0MA==681538428240)

看到这个配图是不是有一点点蒙，读完这篇文章就能Get到了

文章较为透彻的阐述了事件循环的执行机制，并有丰富的配图帮助理解

![](https://img.cdn.sugarat.top/mdImg/MTY4MTUzNzUxNzcyMw==681537517723)

“事件循环是一个循环，只要您的 Node.js 应用程序启动并运行就会运行。每个循环中有六个不同的队列，每个队列保存一个或多个最终需要在调用堆栈上执行的回调函数。”

这个系列一共六篇，写得挺好的，配图也很不错

![](https://img.cdn.sugarat.top/mdImg/MTY4MTUzNzYxNjMyNA==681537616324)

### [7 bun即将正式发布 bundle 功能](https://twitter.com/jarredsumner/status/1644538884980903940)

![](https://img.cdn.sugarat.top/mdImg/MTY4MTU0NTA4OTkwMg==681545089902)

## 🤖AI资讯

### [8 AutoGPT](https://github.com/Significant-Gravitas/Auto-GPT) - 本周最火的项目

截止目前已经 6w ⭐️了

![](https://img.cdn.sugarat.top/mdImg/MTY4MTU0NjAxNzMyMg==681546017322)

AutoGPT 是什么？它是一个实验性的开源应用程序，展示了 GPT-4 语言模型的功能。该程序由 GPT-4 驱动，可以自主实现用户设定的任何目标。

已经有网友上手实验了，该用户让 AutoGPT 建立一个网站，不到 3 分钟 AutoGPT 就成功了。期间 AutoGPT 使用了 React 和 Tailwind CSS，全凭自己，人类没有插手。

### [9 OpenPromptStudio](https://github.com/Moonvy/OpenPromptStudio) - 🥣 AIGC 提示词可视化编辑器

这是一个旨在把 AIGC 提示词（现在支持 Midjourney）可视化并提供编辑功能的工具，有以下特性

* 显示英文提示词的中文翻译
* 翻译输入的中文提示词到英文（因为 Midjourney 仅支持英文提示词）
* 为提示词进行分类（普通、样式、质量、命令）
* 轻松的排序、隐藏提示词
* 把提示词可视化结果导出为图片
* 常用提示词词典
* 通过 Notion 管理提示词词典

![](https://img.cdn.sugarat.top/mdImg/MTY4MTU0NTQ0ODUzMA==681545448530)

### [10 SQLkiller](https://www.sqlkiller.com/) - AI数据分析助手

使用 AI 自动生成 SQL 语句的工具，支持多种数据库。用户需要提供"表结构"，并用自然语言描述想要什么数据。

![](https://img.cdn.sugarat.top/mdImg/MTY4MTU0NTUwNjQyOA==681545506428)

### [11 飞书推出AI办公助手](https://mp.weixin.qq.com/s/ZKUXRSNLtNM7-M6WzNOzFQ)

![](https://img.cdn.sugarat.top/mdImg/MTY4MTU0NTg5ODkzOQ==681545898939)

相信其余两家应该也快了（企微，钉钉）

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/MTY4MTU0NTY3MzYxMQ==681545673611)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](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://wx.zsxq.com/dweb2/index/group/15552285284822) - 前端前沿技术、资讯、方法论分享