前端技術雙週刊 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 生態系統