2021-12

每天给你推荐一个新奇,好玩,高品质的开源库,好文,观点或言论等。
项目主页维护当前月份的内容,想看往期内容,可以翻到下方历史汇总部分,然后选择自己感兴趣的月份点进去即可。
今天是我的生日,祝我生日快乐!🎂🎂🎂 我们明年见~
随着 Webpack 逐步发展,其性能越来越强,用户接入成本也越来越低。但是我们仍然会有自定义打包配置的时候, 而 webpack 的配置实在是多,并且配置的格式以及可选项也很复杂。大多数我们只能通过查官方文档的方式来解决。
今天介绍一个小技巧,使用 vscode 的 ts 只能提示来提示你配置该怎么去写。众所周知,webpack 的配置文件一个 js 文件并且运行在 node 环境。那如何用 ts 实现智能提示呢?我们可以引入 webpack 对外暴露的 Configuration 对象,并使用 JS 注释告诉 vscode 我们的 config 是 Configuration 类型即可。
代码演示:
// webpack.config.js
import { Configuration } from "webpack";
/**
* @type {Configuration}
*/
const config = {
entry: "./src/main.js",
mode: "development",
output: {
filename: "bundle.js",
},
};
module.exports = config;
我刚刚说了 webpack.config.js 是运行在 node 的,因此 node 低版本 import 是无法直接运行的,会报错。这个时候大家需要注释掉 import 代码,等到需要智能提示再加上即可。
ts-node 是一个可以直接执行 TypeScript 代码的工具。
它的原理很简单,就是先调用 tsc 生成 js,然后再执行生成后的 js 文件。对于开发者而言就是简化了一部操作。
地址:https://github.com/TypeStrong/ts-node
npm 和 yarn 的早期版本在处理依赖的时候,会将依赖安装 hoist 到顶层的 node_modules。这意味着:源码可以访问 本不属于当前项目所设定的依赖包。
并且多个项目的依赖是不共享的。这意味着:当使用 npm 或 Yarn 时,如果你有 100 个项目,并且所有项目都有一个相同的依赖包,那么, 你在硬盘上就需要保存 100 份该相同依赖包的副本。
pnpm 很好地解决了这些问题。当你使用 Monorepo 管理代码的时候,这种优点会被放大。
地址:https://github.com/pnpm/pnpm
这个仓库集合了这些前端使用的 Rust 项目以及前端领域的 rust 先导者。其实这个仓库就类似于 awesome-xxxx
地址:https://github.com/i5ting/rust-fe
cookie、session、token、jwt 傻傻分不清楚?这篇文章给你解惑。
地址:https://zhuanlan.zhihu.com/p/446379414
相信大家都有过 copy 对象的经验,包括浅拷贝和深拷贝。
深拷贝一般都是使用 JSON.stringify, MessageChannel 或者 一些第三方库,比如 lodash。 而浏览器 HTML 规范增加了一个新的 api structuredClone,可以在浏览器层面上深拷贝对象,和内置的 JSON.stringify 不同的是,它支持的数据格式更多。
值得注意的是,structuredClone 目前浏览器的兼容性比较差,chrome 最新版也是不支持的,主流的差不多就 firefox 支持。
地址:https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
如果你使用 jest 不做任何配置并使用 import 语句的话,很可能会得到一个报错。
不仅仅是 jest,其实大多数的 node 工具都不认识 import。 对于 jest 来说,我们可以使用 babel-jest,并配置一下 babel 环境为 node 即可。
babel jest 之前是一个独立的仓库,现在已经迁移到了 jest 的 mono repo 中,由 jest 项目统一维护了。
地址:https://github.com/facebook/jest/tree/main/packages/babel-jest
Github 年度统计,以下是我的 Github 年度统计,大家可以用下面的网站自己生成自己的 Github 年度统计。
统计数据不包括私有仓库,但包括你的所有个人账户和组织(比如下图的 leetcode-pp 就是组织)下的数据

地址: https://wrapped.run/
jest 是一个非常流行的前端框架。jest 是如何 mock 模块的呢? 官方文档给了详细的文档,比如 jest.mock('axios') 就可以 mock axios,然后:
const resp = { data: users };
axios.get.mockResolvedValue(resp);
就可以 mocj axios 的 get 方法。
具体参考:https://jestjs.io/docs/mock-functions
那么对于全局变量,比如 WebSocket,fetch 等,如果进行 mock 呢?
这篇文章从基础 mock 到 jest.spyOn 一步步教你如果 mock 全局变量。
文章地址:https://benjaminjohnson.me/mocking-fetch
firefox relay 是 firefox 官方出品的邮箱转发工具。
它可以帮助你解决很多问题。比如有一个网站每个邮箱可以免费试用一个月,那么到期后你可以选择换一个邮箱。但是毕竟注册不同邮箱毕竟麻烦,甚至有些网站对注册进行了各种各样的限制。这个时候 firefox relay 就派上用场了。
另外你不想泄漏你的邮箱信息,打算糊弄一下注册过去先试试也可以使用 firefox relay。
地址:https://relay.firefox.com/
该工具可以直接将 html 转化为 markdown(简称 md),如果你想要 md 源码可以尝试使用它。