MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图1
封面图：anniespratt @ unsplash。

Hi，我是云谦，欢迎打开新一期的「MDH：前端周刊」，这是第 0071 期，发表于 2022/09/26。

本周有这些内容想和你分享：

  • TypeScript 4.9 satisfies
  • 新一波 JavaScript 框架
  • B 站防挡弹幕
  • 设置 Mac 新电脑
  • npm 包最佳实践
  • cli 最佳实践
  • 用 Node 写 Shell 脚本
  • tauri 快速上手
  • Ezno

一周新闻

TypeScript 4.9 satisfies

https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-beta/#the-satisfies-operator

satisfies 是 TypeScript 4.9 新引入的操作符，用于只做校验但不改变表达式的类型结果。通常用于 Object 声明，因为既需要保留每个属性的类型，又需要做 key 值校验。

比如，

  1. type Colors = 'red' | 'green' | 'blue';
  2. const foo = {
  3.   red: [1],
  4.   green: true,
  5.   blue: 'ok',
  6.   black: {},
  7. //~~~~~~~~~~ 既校验了 key，要求满足 Colors，这里的 black 会抛错
  8. } satisfies Record<Colors, unknown>;
  10. // 又让每个属性拥有完整类型
  11. foo.red.at(0);
  12. foo.blue.startsWith('o');

新一波 JavaScript 框架

https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks/

MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图2

作者从 Web 之初、CGI、PHP 开始讲起，讲 JavaScript 历史画卷一幅幅展开，既有 Ajax、jQuery、Backbone、YUI 等一代代的 JavaScript 库前辈，又有 Astro、Fresh、Remix 等新一波的 JavaScript 框架。推荐阅读，从中可以了解为什么会有这些库和框架，以及他们都是为了解什么而生的？

所以，既然每个框架都会被历史所代替，前端开发者应该如何保持竞争力？

B 站防挡弹幕

https://juejin.cn/post/7141012605535010823

MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图3

我一直以为这和前端技术无关。没想到只要一行 CSS + 通过分割算法自动生成的遮罩图即可实现。

  1. .弹幕 {
  2.   mask-image: url("mask.svg");
  3. }

上图的遮罩图片如下。

MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图4

设置 Mac 新电脑

https://cpojer.net/posts/set-up-a-new-mac-fast

Jest 作者换了新 Mac 之后的快速配置方法，以下是一些记录。

1、Dotfile 用 github 管理维护
2、用 brew 安装命令行和 App
3、用 Syncalicious 备份和恢复 App 设置
4、推荐了如下 App：Dropbox、Syncalicious、Rectangle Pro、Alfred、Airflow、Archiver、Disk Inventory X、ProtonVPN 和 1Password

npm 包最佳实践

https://snyk.io/blog/best-practices-create-modern-npm-package/

MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图5

简要流程如下，

1、初始化（创建 github 仓库、clone、npm init -y）
2、设置 npm 账号（注册 npm 账号、开启 2FA、npm login）
3、发布 npm 包（检查发布包文件 npx npm-packlist、发布预演 npm publish —dry-run、npm publish —access=public）

而如果要上生产，则还需做这些，

1、提供 cjs 和 esm 包产物（tsconfig.json、package.json exports）
2、测试（单元测试、CI 测试、包测试）
3、安全检查（Snyk）
4、自动发布（代码合到 master 自动发布）

cli 最佳实践

https://clig.dev/

MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图6

如果你有写命令行的需求，推荐阅读本文及其「Further reading」中推荐的文章。

用 Node 写 Shell 脚本

https://exploringjs.com/nodejs-shell-scripting/

MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图7

Dr. Axel Rauschmayer 的新书，HTML 版本免费。

tauri 快速上手

https://blog.logrocket.com/tauri-electron-comparison-migration-guide/

MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图8

快速上手 3 命令。

  1. $ npm create tauri-app
  2. $ npm run tauri dev
  3. $ npm run tauri build

Ezno

https://kaleidawave.github.io/posts/introducing-ezno/

MDH 前端周刊第 71 期：satisfies、JavaScript 框架、防挡弹幕、Mac 设置、npm 包最佳实践 - 图9

一个 JavaScript 编译器，作者是年仅 21 岁的 UK 小哥。Ezno 内核是类型校验器，与 tsc 类似。

周刊一锅端

小结

如果你喜欢 MDH 前端周刊，请转发给你的朋友，告诉他们到这里来订阅，这是对我最大的帮助。下期见！
MDH，让开发者有笑容 :)