前端週刊第二十二期

前端週刊發表每週前端技術相關的大事件、文章教程、一些框架的版本更新、以及程式碼和工具。每週定期發表，歡迎大家關注、轉載。
如果外鏈不能訪問，關注公眾號「前端每週看」，裡面有解決辦法

大事件

• Angular v14 Released——長期存在的 JavaScript 框架的一個關鍵版本，其使用的地方比大多數 JavaScript 開發人員意識到的要多得多（尤其是在大公司中）。一些新的東西：

1. 獨立元件可提供更簡單的創作體驗。
2. 嚴格型別的反應形式。
3. 改進的更改檢測。
4. 可訪問性的改進。

• JavaScript 和 TypeScript 中的 Monorepos——關於在 JavaScript中使用 monorepos（也有解釋）的全面介紹和教程，包括它們的好處以及如何使用 Yarn 建立和管理一個。

• Jest Image Snapshot: A Jest Matcher for Image Comparison——使用 American Express 的這個工具向視覺迴歸測試問好。在測試中為您的應用拍攝影像快照，並將它們與基線進行比較。如果您想忽略細微的變化並且只丟擲巨大的差異，它甚至可以處理公差。

文章

1. 您現在可以使用 JavaScript 在 Microsoft Word 中製作遊戲 — Office 外掛是一種使用 JavaScript 編寫 Office 應用程式指令碼的機制。你可以用它來做一些有用的事情，或者，如果你和這個人一樣聰明，你可以建立一個使用 Word 文件作為畫布的圖形遊戲。

2. 您可能不需要為您的 npm 分散式庫使用 Bundler。 — Colin 提出了一個很好的論點，即儘可能乾淨地執行，但如果您願意，還有很多其他選項的連結。

3. 使用 Pinia 介紹 Vue.js 狀態管理 - Pinia現在是 Vue 的官方狀態管理庫（以前是 Vuex），Tyler 在這裡分享了他對它的興奮之情。

4. 如何使用 Vanilla JS、Twilio 和 Node 構建群聊應用程式 - 如果您不想自己將所有後端基礎設施放在一起......外包它。

5. 在 Haskell 中將 JavaScript 的子集編譯為 ARM 程式集 - 其中一件您可能永遠不需要做的事情，但如果有足夠的時間和意願，您可能會想要做。

框架釋出

1. RE:DOM 3.28.0 – 微型 (2KB) UI 庫。
2. gl-react 5.2 – React 中的 WebGL 著色器。
3. lint-staged 13.0 – 針對暫存的 git 檔案執行 linter。
4. AVA 4.3.0 – Node.js 測試執行器。
5. Recoil 0.7.3 – 來自 Facebook 的 React 的替代狀態管理。

程式碼和工具

1. Svelvet：用於基於節點的互動式圖表的 Svelte 元件庫：您可以使用具有無縫縮放和平移、可拖動互動性、可自定義邊緣/節點等的預構建元件建立直觀的流程圖。

2. Shaka Player 4.1：播放自適應媒體的庫：在沒有外掛或 Flash 的瀏覽器中播放 DASH 和 HLS 等格式。它還可以通過 IndexedDB離線播放媒體。

3. Glide Data Grid 4：適用於 React 專案的快速資料網格：自稱是“不折不扣、異常快速的資料網格”，可以支援多達數百萬行，並具有豐富的渲染和 TypeScript 支援。主頁上有一個簡潔的演示，它也獲得了麻省理工學院的許可。

4. Terser：用於 ES6+ 的 JavaScript 'Mangler' 和 Compressor Toolkit： 一個可以從 Node 或命令列使用的壓縮工具。它去除註釋，壓縮變數名，刪除空格，並用更小的變體替換各種程式碼模式。

5. 顏色圖例元素：在資料視覺化中提供圖例的 Web 元件：使用 Lit/Lit-Element 和 D3.js 構建。

6. highlight-code：A <textarea>with Automatic Syntax Highlighting —在這裡試用。API 允許您自定義語言、選項卡大小以及文字區域是否應自動擴充套件以適應。

7. collect.js：100 多種陣列和物件的便捷方法：類似於 Laravel 集合的 API：chunk、flatten、shuffle、firstWhere、mapWithKeys 等。