前端技术双周刊 2023-03-25：加速 JavaScript 生态系统

[olivewind]

项目地址：olivewind/weekly

微信公众号：依赖注入

发布时间：2023.03.25

本周内容：资讯x3、开源x9、文章x3

---

行业资讯

React 新版官网上线

1. 全新的域名、UI：新版域名为 https://react.dev，同时旧版文档将不再更新并存档在 https://legacy.reactjs.org
2. 更丰富的交互式演示：引入图表、插图来深化印象，维护超过 600 个示例，同时代码支持交互式
   
3. 使用函数组件和 Hooks：意味着新入门的同学不再需要像之前一样从类组件开始学起，哪怕你几乎不会再使用类组件
4. 全新且详细的 API 文档：包含 Reference、Usage、Troubleshooting 三部分，为一些常见问题给出了官方解答
   
5. 不再推荐使用 create-react-app 创建应用

从官方的发布的公告上看，接下去 React 团队在官网上的工作重点是：

• 为所有示例提供 TypeScript 版本；
• 创建更新的性能、测试和可访问性指南；
• 独立于支持它们的框架记录 React 服务器组件；
• 与我们的国际社区合作翻译新文档；
• 向新网站添加缺少的功能（例如，此博客的 RSS）。

Electron 发布 10 年整 🎉

经过 10 年和来自 1192 位贡献者的 27147 次提交之后，Electron 已成为如今构建桌面应用程序最受欢迎的框架之一，官方团队近期发布了庆祝帖子并概述他们是如何运营一个可持续的大型开源项目，主要有以下几点：

1. 设计治理模型以支持团队扩展：不同的工作组拥有不同责任，这对于简化流程和将项目所有权的部分分配给特定的维护者非常重要，目前有这些工作组（WG）：
   • Releases WG： 负责将 Electron 发布上线
   • Upgrades WG：负责升级 Chromium 和 Node.js
   • API WG：负责监督开放 API 设计
   • Security WG：负责保持 Electron 的安全性
   • Ecosystem WG：负责运营网站、文档和工具
   • Outreach WG：负责社区与企业外联
   • Community & Safety WG：负责社区管理
   • Infrastructure WG：负责维护构建基础设施、云服务
2. 建设和参与社区以提高知名度
   • 2020 年，推出了 Discord 社区
   • 2021 年，建立 Electron China 用户群
   • 参与高知名度的社区活动和开源项目
     • 自 2019 年以来，每年都会庆祝 Hacktoberest（由 DigitalOcean 组织的年度开源庆典）
     • 在 2020 年，参加首次举行的 Google Season of Docs 活动
     • 在 2022 年，第一次指导 Google Summer of Code 的学生
3. 将所有东西自动化以提升效率

TypeScript 正式发布 5.0

该版本主要包含如下更新：

1. 全新装饰器: 不再需要显示标记 experimentalDecorators 即可使用装饰器

2. const 类型参数，这意味着你在下面这种情况下不再需要使用 as const

   // 5.0 之前
   type HasNames = { readonly names: string[] };
   function getNamesExactly<T extends HasNames>(arg: T): T["names"] {
     return arg.names;
   }
   
   // 推断出类型： string[]
   const names = getNamesExactly({ 
     names: ["Alice", "Bob", "Eve"]
   });
   
   // 推断出类型： readonly ["Alice", "Bob", "Eve"]
   const names = getNamesExactly({ 
     names: ["Alice", "Bob", "Eve"] as const
   });
   
   ----
   
   // 5.0 开始
   type HasNames = { names: readonly string[] };
   function getNamesExactly<const T extends HasNames>(arg: T): T["names"] {
   //                       ^^^^^
       return arg.names;
   }
   // 推断出类型: readonly ["Alice", "Bob", "Eve"]
   const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });

3. extends 支持多配置文件

   {
      "extends": ["a", "b", "c"],
      "compilerOptions": {
          // ...
      }
    }

4. 所有枚举都是联合枚举：这意味着哪怕枚举值是函数调用，你可以可以引用枚举类型的一个子集

   enum Color {
     Red,
     Orange,
     Yellow = Math.random()
   }
   
   // 5.0 之前报错：“枚举类型“Color”包含具有不是文本的初始值设定项的成员”
   type MyColor = Color.Red | Color.Orange; 

5. 支持 export type *

6. 支持 customConditions

   如果模块 package.json 自定义了加载入口

   {
       // ...
       "exports": {
           "my-condition": "./foo.mjs",
           "node": "./bar.mjs",
           "import": "./baz.mjs", 
           "require": "./biz.mjs"
       }
   }

   此时你可以使用 customConditions 来要求 TypeScript 从 foo.mjs 作为入口加载模块

   {
       "compilerOptions": {
           "target": "es2022",
           "moduleResolution": "bundler",
           "customConditions": ["my-condition"]
       }
   }

该版本全部更新内容请查阅：Announcing TypeScript 5.0

开源项目

PlexPt/awesome-chatgpt-prompts-zh（21k star）

ChatGPT 是由 OpenAI 训练的大型语言模型，通过向它提供提示，它可以生成继续对话或扩展给定提示的响应。在该项目中，你将找到可与 ChatGPT 一起使用的各种提示，帮助你更好使用 ChatGPT。

tremorlabs/tremor（7.1k star）

Tremor 提供一系列专注仪表盘建设的组件，并且提供了不同场景下的最佳实践可供参考，可以帮助你轻而易举地构建富有洞察力的仪表板，该项目基于 React、Tailwind、Recharts 构建。

framer/motion（18k star）

Motion 是一个简单但功能强大的 React 动画库，使用它可以非常轻松实现常见的动画。

mozilla/source-map（3.2k star）

source-map 是 Mozilla 团队开源的一个可以正反解 Source Map 的工具库，这在 JavaScript 相关监控系统的实现中可能会很实用。如果你对 Source Map 的原理还不太熟悉可以查阅 Source Map 第三版本提案。

const rawSourceMap = {
  version: 3,
  file: "min.js",
  names: ["bar", "baz", "n"],
  sources: ["one.js", "two.js"],
  sourceRoot: "http://example.com/www/js/",
  mappings:
    "CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA",
};

const whatever = await SourceMapConsumer.with(rawSourceMap, null, consumer => {
  console.log(consumer.sources);
  // [ 'http://example.com/www/js/one.js',
  //   'http://example.com/www/js/two.js' ]

  console.log(
    consumer.originalPositionFor({
      line: 2,
      column: 28,
    })
  );
  // { source: 'http://example.com/www/js/two.js',
  //   line: 2,
  //   column: 10,
  //   name: 'n' }

  console.log(
    consumer.generatedPositionFor({
      source: "http://example.com/www/js/two.js",
      line: 2,
      column: 10,
    })
  );
  // { line: 2, column: 28 }

  consumer.eachMapping(function (m) {
    // ...
  });

  return computeWhatever();
});

lovell/sharp（24.8k star）

一个基于 libvips 库实现的高性能且简单易用的 Node.js 图像处理工具，可用于调整 JPEG、PNG、WebP、AVIF 和 TIFF 图像。在转化图像、增加水印等场景下可能会很实用。

sharp('input.jpg')
  .rotate()
  .resize(200)
  .jpeg({ mozjpeg: true })
  .toBuffer()
  .then( data => { ... })
  .catch( err => { ... });

dolanmiu/docx（3k star）

docx 是一个支持在 JS/Node 下通过声明式 API 轻松生成和修改 .docx 文件的工具库。

function generate() {
  const doc = new docx.Document({
    sections: [
      {
        properties: {},
        children: [
          new docx.Paragraph({
            children: [
              new docx.TextRun("Hello World"),
              new docx.TextRun({
                text: "Foo Bar",
                bold: true
              }),
              new docx.TextRun({
                text: "\tGithub is the best",
                bold: true
              })
            ]
          })
        ]
      }
    ]
  });

  docx.Packer.toBlob(doc).then((blob) => {
    console.log(blob);
    saveAs(blob, "example.docx");
    console.log("Document created successfully");
  });
}

probablyup/markdown-to-jsx（1.5k star）

markdown-to-jsx 是一个轻量级、可定制的 React markdown 组件，用法非常简单，可以按需重写或替换其中的节点渲染。

import Markdown from 'markdown-to-jsx';
import React from 'react';
import { render } from 'react-dom';

// surprise, it's a div instead!
const MyParagraph = ({ children, ...props }) => (
  <div {...props}>{children}</div>
);

render(
  <Markdown
    options={{
      overrides: {
        h1: {
          component: MyParagraph,
          props: {
            className: 'foo',
          },
        },
      },
    }}
  >
    # Hello world!
  </Markdown>,
  document.body
);
/*
  renders:
  <div class="foo">
    Hello World
  </div>
*/

DioxusLabs/dioxus（7.9k star）

Dioxus 是一个可移植的、高性能的、符合人体工程学的框架，使用 Rust 语言构建跨平台的用户界面。如果你能够熟练使用 React 框架，那 Dioxus 对你来说将非常简单。

fn app(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

    cx.render(rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    })
}

slidevjs/slidev（25.8k star）

Slidev 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。

优质文章

加速 JavaScript 生态系统（英文）

该系列介绍了包括 postcss、svgo、eslint、npm scripts 等在内常见工具的性能问题及其优化手段，看完的感觉就一个字“爽”。

[如何在 2023 年启动 React 项目？(英文)](https://www.robinwieruch.de/react-starter/ "如何在 2023 年启动 React 项目？(英文 "如何在 2023 年启动 React 项目？(英文)")")

该文章详细介绍使用 Vite、Next、Astro 三款工具包构建 React 应用的优劣势，以及它们为什么（没有）被 React 官方推荐。

你真的了解 setTimeout 么？聊聊 setTimeout 的最小延时问题

常用的 setTimeout 函数在不同的 JavaScript 运行时都有不同的实现，并且执行效果也不尽相同；该文章结合了 chromium、nodejs、deno、bun 等目前流行的 JS 运行时的源码，详细分析了这些差异。