前端技術雙週刊 2023-03-25：加速 JavaScript 生態系統_王力國

項目地址：olivewind/weekly

微信公眾號：依賴注入

發佈時間：2023.03.25

本週內容：資訊x3、開源x9、文章x3

行業資訊

React 新版官網上線

全新的域名、UI：新版域名為 https://react.dev，同時舊版文檔將不再更新並存檔在 https://legacy.reactjs.org
更豐富的交互式演示：引入圖表、插圖來深化印象，維護超過 600 個示例，同時代碼支持交互式
使用函數組件和 Hooks：意味着新入門的同學不再需要像之前一樣從類組件開始學起，哪怕你幾乎不會再使用類組件
全新且詳細的 API 文檔：包含 Reference、Usage、Troubleshooting 三部分，為一些常見問題給出了官方解答
不再推薦使用 create-react-app 創建應用

從官方的發佈的公告上看，接下去 React 團隊在官網上的工作重點是：

為所有示例提供 TypeScript 版本；
創建更新的性能、測試和可訪問性指南；
獨立於支持它們的框架記錄 React 服務器組件；
與我們的國際社區合作翻譯新文檔；
向新網站添加缺少的功能（例如，此博客的 RSS）。

Electron 發佈 10 年整 🎉

經過 10 年和來自 1192 位貢獻者的 27147 次提交之後，Electron 已成為如今構建桌面應用程序最受歡迎的框架之一，官方團隊近期發佈了慶祝帖子並概述他們是如何運營一個可持續的大型開源項目，主要有以下幾點：

設計治理模型以支持團隊擴展：不同的工作組擁有不同責任，這對於簡化流程和將項目所有權的部分分配給特定的維護者非常重要，目前有這些工作組（WG）：
- Releases WG：負責將 Electron 發佈上線
- Upgrades WG：負責升級 Chromium 和 Node.js
- API WG：負責監督開放 API 設計
- Security WG：負責保持 Electron 的安全性
- Ecosystem WG：負責運營網站、文檔和工具
- Outreach WG：負責社區與企業外聯
- Community & Safety WG：負責社區管理
- Infrastructure WG：負責維護構建基礎設施、雲服務
建設和參與社區以提高知名度
- 2020 年，推出了 Discord 社區
- 2021 年，建立 Electron China 用户羣
- 參與高知名度的社區活動和開源項目
- 自 2019 年以來，每年都會慶祝 Hacktoberest（由 DigitalOcean 組織的年度開源慶典）
- 在 2020 年，參加首次舉行的 Google Season of Docs 活動
- 在 2022 年，第一次指導 Google Summer of Code 的學生
將所有東西自動化以提升效率

TypeScript 正式發佈 5.0

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

全新裝飾器: 不再需要顯示標記 experimentalDecorators 即可使用裝飾器
const 類型參數，這意味着你在下面這種情況下不再需要使用 as const ```ts // 5.0 之前 type HasNames = { readonly names: string[] }; function getNamesExactly(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(arg: T): T["names"] { // ^^^^^ return arg.names; } // 推斷出類型: readonly ["Alice", "Bob", "Eve"] const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] }); 3. **extends 支持多配置文件**json { "extends": ["a", "b", "c"], "compilerOptions": { // ... } } ```
所有枚舉都是聯合枚舉：這意味着哪怕枚舉值是函數調用，你可以可以引用枚舉類型的一個子集 ```ts enum Color { Red, Orange, Yellow = Math.random() }

// 5.0 之前報錯：“枚舉類型“Color”包含具有不是文本的初始值設定項的成員” type MyColor = Color.Red | Color.Orange; ```
支持 export type *
支持 customConditions

如果模塊 package.json 自定義了加載入口 ts { // ... "exports": { "my-condition": "./foo.mjs", "node": "./bar.mjs", "import": "./baz.mjs", "require": "./biz.mjs" } } 此時你可以使用 customConditions 來要求 TypeScript 從 foo.mjs 作為入口加載模塊 ts { "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 第三版本提案。

```ts 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 圖像。在轉化圖像、增加水印等場景下可能會很實用。

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

dolanmiu/docx（3k star）

docx 是一個支持在 JS/Node 下通過聲明式 API 輕鬆生成和修改 .docx 文件的工具庫。

```js 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 組件，用法非常簡單，可以按需重寫或替換其中的節點渲染。

```jsx 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 }) => (

{children}

);

render( <Markdown options={{ overrides: { h1: { component: MyParagraph, props: { className: 'foo', }, }, }, }}

# Hello world!
, document.body ); /* renders:

Hello World

*/ ```

DioxusLabs/dioxus（7.9k star）

Dioxus 是一個可移植的、高性能的、符合人體工程學的框架，使用 Rust 語言構建跨平台的用户界面。如果你能夠熟練使用 React 框架，那 Dioxus 對你來説將非常簡單。

```rust 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 組件的能力，並且能夠呈現像素級完美的佈局，還在你的演講稿中內置了互動的演示樣例。

前端技術雙週刊 2023-03-25：加速 JavaScript 生態系統