前端技術雙週刊 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 }) => (
);
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 元件的能力,並且能夠呈現畫素級完美的佈局,還在你的演講稿中內建了互動的演示樣例。
優質文章
加速 JavaScript 生態系統(英文)
該系列介紹了包括 postcss、svgo、eslint、npm scripts 等在內常見工具的效能問題及其優化手段,看完的感覺就一個字“爽”。
如何在 2023 年啟動 React 專案?(英文)
該文章詳細介紹使用 Vite、Next、Astro 三款工具包構建 React 應用的優劣勢,以及它們為什麼(沒有)被 React 官方推薦。
你真的瞭解 setTimeout 麼?聊聊 setTimeout 的最小延時問題
常用的 setTimeout 函式在不同的 JavaScript 執行時都有不同的實現,並且執行效果也不盡相同;該文章結合了 chromium
、nodejs
、deno
、bun
等目前流行的 JS 執行時的原始碼,詳細分析了這些差異。