不换的周刊 第22期

Scholar's Weekly 第22期

{ loading=lazy }

(封面图片来源于：基于 CC0 协议的 stocksnap)

!!! tip hint important "温馨提示"

周刊中所有高亮的内容都可以点击到指定内容的链接～

FE News

关键词： Bun、Deopt Explorer、Promise.withResolvers、Unit Test、Jest

1.Bun new bundler

相关地址：https://bun.sh/blog/bun-bundler

Bun 有了一个原生的打包工具，经过基准测试后的速度，Unbelievable，so cool...。

此外还有一个更酷的内容：

2.Using Bun.js as a bundler

相关地址：https://shaneosullivan.wordpress.com/2023/05/17/using-bun-js-as-a-bundler

刚好作为承接第一条周刊的内容，作为一个使用者的感受，Shane O'Sullivan 有了自己的心得体会，包括对于 vercel 上构建内容的一些坑点。

em，教科书式指导。

3.Deopt Explorer 简介

相关地址：https://devblogs.microsoft.com/typescript/introducing-deopt-explorer/

Deopt Explorer 的工具来帮助我们探索 V8 在编译器执行时产生的各种反优化、IC 和对象类型。

举个例子，插件可以查看函数的状态信息。

4.Promise.withResolvers

相关地址：https://github.com/tc39/proposal-promise-with-resolvers

通常大家是如何处理顶层的 new Promise 的 rej 和 resolve 函数的呢？

const handler = (callback) => new Promise(
    (res, rej) => {
        callback(res, rej);
    }
);

handler((res, rej) => {
    if(true) {
        res(); // do right something
    } else {
        rej(); // do reject
    }
})

现在有了 Promise.withResolvers 可以很好的缓解这个状态，它有点像是 React Context，按照规范特性的描述：

On subclasses of Promise, the withResolvers method should produce instances of the subclass.

那么我们可以改造下，像是下面这种：

const handler = (callback) => new Promise(
    (res, rej) => {
        callback();
    }
);

handler(() => {
    const { reject, resolve, promise } = Promise.withResolvers();

    if(true) {
        resolve(); // do right something
    } else {
        reject(); // do reject
    }
});

so cool!。

5.使用纯 JavaScript 获得完整的类型支持

相关地址：https://www.pausly.app/blog/full-type-support-with-plain-javascript

在某种特定场景下，你不必修改 *.js 为 *.ts 获取类型支持，完全可以借助 JSDOC 获取支持。

6.你的 Jest 测试可能是错误的

相关地址：https://jamiemagee.co.uk/blog/your-jest-tests-might-be-wrong/

你的 Jest 套件配置可能有些问题，Magee 向我们展示一组比较好的默认配置，因为一些测试状态可能会发生泄漏，导致我们的测试用例结果可能是错误的：

• 正确的用例实际因为状态未重置导致错误，让人产生困惑；
• 错误的用例因为状态未重置导致正确，让程序产生“欺骗”；

{
  clearMocks: true,
  resetMocks: true,
  restoreMocks: true,
  resetModules: true // It depends
}

7.Legend-State

相关地址：https://legendapp.com/open-source/legend-state-v1/

在速度和内存上取得里压制性胜利的一个新的 React State 库，可以看下简单的基准测试：

8.headless-qr

相关地址：https://github.com/Rich-Harris/headless-qr

一个现代化的 QR 生成工具。

9.eslint-plugin-check-file

相关地址：https://github.com/DukeLuo/eslint-plugin-check-file

我猜你肯定听过 引入包排序(simple-import-sort)、包管理(eslint-plugin-package-json-dependencies)等插件。

检测文件名，支持完全受控的文件名，保持项目文件名格式的一致性是一个不错的选择。

周刊中说了太多次 so cool，是因为我最近在看《闪电侠》，“巴里”（作为主人公）很喜欢说的一个词，waw! so cool~~~

End

!!! pied-piper "交个朋友吧～"

我是不换(书生)，"浪子回头金不换"的**不换**，"百无一用是书生"的**书生**，热爱工作，同时在工作之余也热爱开源。

本期周刊到这里就结束了，我们下期再见👋～