2021-09

每天给你推荐一个新奇,好玩,高品质的开源库,好文,观点或言论等。

项目主页维护当前月份的内容,想看往期内容,可以翻到下方历史汇总部分,然后选择自己感兴趣的月份点进去即可。

2021-09

2021-09-30[工具]

GraphQL Code Generator 是一个 GraphQl 生态的一个很有名的代码生成工具。基本上有一些 GraphQL 工程经验的人都知道它。

 简单来说你可以将它看成是一个黑盒:

  • 输入是 graphql 的 schema(查询语句以及类型定义等),yml (配置文件)和 operation(操作,这个是可选的)。

  • 输出是代码文件

 比如你在 yml 中配置了 ts 插件,那么输出就是一个 ts 文件。其整体是插件化的,因此功能也会随着插件的完善而变得多样。比如实际工程中你可以在启动项目的时候生成 ts 代码,帮助你在获得更好的 ts 智能提示。

地址:https://www.graphql-code-generator.com/

2021-09-29[好文]

copilot 是一个基于 AI 的编程辅助工具。目前已经集成在了 vscode 中,后续可能集成到更多平台和工具,目前还是测试阶段。

地址:https://mp.weixin.qq.com/s?__biz=MzA3MjU5NjU2NA==&mid=2455508654&idx=1&sn=8f5e4c94a10d683cc4e2d15193c620c7

2021-09-28[好文]

阿里巴巴淘系的 graphql 解决方案,他们是如何在工具集成 graphql 的?遇到了哪些问题?又是如何解决的?

另外很有意思的点是,他们利用 cdn 的分布式能力,将 graphql 缓存写入 cdn 从而有效降低了 QPS。

地址:https://mp.weixin.qq.com/s/ZO1Vpslk3-17YxUVt9Vhrw

2021-09-21[工具]

apollographql 是很有名的 graphql 工具。它提供了服务端和客户端全套解决方案。

当然这不意味着你必须使用一个客户端框架才可以用,你完全可以使用原生的 http 去集成 graphql。不过客户端框架可以帮助我们解决很多问题,比如缓存策略,样板代码等等。比如 apollo 就集成了 React Hooks,使得你可在 React 应用中非常舒适地使用 graphql。

地址:https://www.apollographql.com/docs/react/data/queries/

2021-09-18[好文]

ESM 可以借助浏览器的模块化能力从而实现”无打包“,这样前端也不需要安装 node_modules,而仅仅是 import cdn 上的文件即可了。借助包的分发服务,甚至能将本地安装依赖的速度提升 10 倍。

不过现有的许多 npm 包是 cjs 的,那么将 CJS 转化为 ESM 如何进行?有哪些坑?这篇文章告诉你。

地址:https://mp.weixin.qq.com/s?__biz=MzA3MjU5NjU2NA==&mid=2455508622&idx=1&sn=10f0d16a4becb945e849e49d3af478f3

2021-09-17[工具]

这个工具可以让你将一个网页版的 vscode 部署在你的云端服务。

你可以将其部署到一些免费的平台,比如 heroku 的 free plan。这样你就可以拥有一个自己独有的云端 vscode 了。

地址:https://github.com/cdr/deploy-code-server

2021-09-16[工具]

MDVideo 是一个可以将 markdown 转为视频的插件。其支持:

  • 自动”剪辑“

  • 添加字幕

  • 语言合成

  • 。。。

不过目前仍然不支持 mac 平台且语言实现相对简单,期待功能更加完善。

地址:http://mdvideo.gshll.com/

2021-09-15[工具]

gron 是一个使得grep 可以处理格式化 json 结构的文本的工具

比如你有这样一个 json:

[
  {
    "commit": {
      "author": {
        "date": "2016-07-02T10:51:21Z",
        "email": "mail@tomnomnom.com",
        "name": "Tom Hudson"
      }
    }
  }
]

你可以 gron test.json | fgrep "commit.author" 就可以获得这样的结果(获取到 json 中的 author 字段的信息):

json[0].commit.author = {};
json[0].commit.author.date = "2016-07-02T10:51:21Z";
json[0].commit.author.email = "mail@tomnomnom.com";
json[0].commit.author.name = "Tom Hudson";

地址:https://github.com/tomnomnom/gron

2021-09-14[类库]

lit 是一个我关注了蛮长时间的库。这个库目前完善了很多功能,这里推荐给大家。

它可以用声明式的方式去写前端应用。并且非常小巧,只有 几 kb。

地址:https://lit.dev/

2021-09-13[类库]

webpack 是很优秀,全面,生态完好的前端构建工具。而 vite 是最近流行的基于 esm 无打包 的前端构建工具。

而很多公司和个人都在使用 webpack,他们也想获得 vite 的开发体验。大多数人的做法是按照一些教程手动替换,而今天介绍的工具 Webpack to Vite 可以自动完成这一任务。

地址:https://github.com/originjs/webpack-to-vite

2021-09-10[库]

教师节快乐 ✿✿ ヽ(°▽°)ノ ✿

mafs 是一个基于 React 的可视化数学公式的库。其不仅提供了公式的可视化,还可以完成一些交互动作。

地址:https://mafs.dev/guides/examples/projectile/

2021-09-09[好文]

Postman 是一个非常著名的接口调试工具,开发者可以使用它来完成接口的功能测试。

新版本的 postman 增加了很多有用的功能,比如环境变量,接口预处理等等。这篇文章带你了解它。

地址:https://mp.weixin.qq.com/s/WYGjvmsGG3D8sJ9j5i-d7w

2021-09-08[小技巧]

GUI 的优点就是入门比较快,操作简单。但很多时候却给我带来困扰,比如死活找不到某个功能的入口在哪,更可气的是好不容易记清楚了软件的功能入口,软件升级某一个功能的入口会发生变化,你又要摸索。使用命令行就没有这个问题。

命令行可以使用一些约定好的命令展示软件的所有功能,比如 -h。

好在有一些工具可以查看当前软件的信息,比如查看当前软件的所有快捷键,这个之前我们介绍过了。

而 GUI 程序毕竟是主流,因此我们也必须要要适应。这次介绍的是另外一个无需安装任何软件就可以使用的技巧。这里介绍一个小技巧:在 mac 下按 cmd + , 可以直接打开当前应用程序的设置页面。并且几乎所有主流的应用程序都遵守这个约定。

2021-09-07[工具]

API Extractor 是一个帮你更好地管理 ts 声明文件的工具。API Extractor 和 TypeScript 都是微软的开源安排,第一方工具用起来肯定放心。

它可以帮你:

  • 生成 md 后缀的报告文件

  • 打包 .d.ts 声明文件

  • 生成 api 文档

如果你是一个库的开发者,不妨尝试一下这个工具。如果你的仓库是 mono repo,那就更推荐使用了。

地址:https://api-extractor.com/

2021-09-06[新闻]

近日 Github 推出 Github 全球大学(Introducing GitHub Global Campus)功能。

你可以在这里申请:https://education.github.com/discount_requests/student_application

地址:https://education.github.com/

2021-09-03[工具]

最近 Github 更新了凭证(credential)认证机制,因此很多人碰到了这样的报错:

refusing to allow a Personal Access Token to create or update ....

这就是 Git 凭证没有配置正确的结果。解决的方式很多,不过我强烈推荐你使用 Git-Credential-Manager-Core,这个是微软自己出的工具。众所周知微软收购了 Github。因此这个工具可谓是为 Github 量身打造,并可以扩展到其他基于 git 的平台上。

mac 用户可以安装 pkg 文件,windows 用户可以安装 exe 文件。之后第一次 push 的时候会提示你认证,你只需按照提示操作就行。

地址:https://github.com/microsoft/Git-Credential-Manager-Core

2021-09-02[趣闻]

一个可以摆在桌子上的监控服务器的小摆件

它可以可以实现通用服务器或计算机的数据监控,包括 CPU 占用、RAM 占用、两个硬盘的可用空间、硬盘读写速度、网络 IO 速率。

这动手能力还不错嘛

地址:https://www.v2ex.com/t/799177?

2021-09-01[工具]

前端越来越卷很大程度上取决于前端工具迭代太快,同类工具太多。比如打包工具就有很多,比如 webpack,rollup,vite,esbuild,swc 等等。

这不仅让我们疲于学习各种框架和库,而且还疲于应付编写各个端插件。比如我写了一个 webpack 的插件,如果想让 rollup 用,那不得不重新开始写。类似的问题是编写微信小程序,如果想编写一个支付宝小程序也要做一些改变。 由于 taro 等跨端工具就产生了。

unplugin (是 universal plugin 的缩写,中文为通用插件)也是一样的,只不过它的目标是打包插件,而不是小程序罢了。

使用它,你可以同时编写 rollup,vote 以及 webpack 三端的插件。和 taro 等跨端工具一样,它也只能无缝转化多端交叉的功能。如果某一端特有的功能,可以使用特殊的 api 来定制。

地址:https://github.com/unjs/unplugin

关注我

我重新整理了下自己的公众号,并且我还给它换了一个名字脑洞前端,它是一个帮助你打开大前端新世界大门的钥匙 🔑,在这里你可以听到新奇的观点,看到一些技术尝新,还会收到系统性总结和思考。

在这里我会尽量通过图的形式来阐述一些概念和逻辑,帮助大家快速理解,图解是我的目标。

之后我的文章会同步到微信公众号 脑洞前端 ,你可以关注获取最新的文章,并和我进行交流。

另外你可以回复大前端进大前端微信交流群, 回复 leetcode 拉你进 leetcode 微信群,如果想加入 qq 群,请回复 qq。

Last updated