前端週刊第二十一期

夕陽白雪發表於2022-05-29
前端

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

大事件

  • 比較三種非破壞性處理陣列的方法——JavaScript 的好醫生將for-of、.reduce()和.flatMap()相互對立，這樣您就可以選擇最適合您自己的陣列處理工作的方法。

  • npm 安全更新：GitHub 對 4 月份攻擊的瞭解——上個月，npm 登錄檔的管理者 GitHub報告說，被盜的 OAuth 令牌被用於訪問某些私有儲存庫、私有包清單和後設資料，以及 npm 使用者帳戶資料。這是一個更新。值得注意的是： “在將 npm 整合到 GitHub 日誌系統之後，GitHub 發現了許多用於 npm 登錄檔的純文字使用者憑證，這些憑證在內部日誌中被捕獲。

  • TypeScript 4.7 釋出——型別化 JavaScript 超集的主要特性是對 Node.js 的 ES 模組支援——該特性一直難以實現，並且其對副檔名的依賴繼續引發爭論——以及 CommonJS 互操作性（來自 ES 模組） 、改進的函式推理、括號元素訪問的控制流分析等。

  • Next.js's Layouts RFC: Big Changes Ahead for Next.js——如果你是 Next.js 使用者，你會想要閱讀這篇文章，因為一些重要的更新正在進行中，特別是在路由、應用程式結構和佈局方面（包括巢狀佈局）。

文章

  1. 什麼是“邊緣計算”？“這有點像編織狗帽” — 看，這個比喻讓我們發笑，作者在這裡延伸了很長一段路。

  2. Airbnb 如何通過 Metro 獲得更快的 JavaScript 構建 — Airbnb 從 Webpack 遷移到Metro（一個針對 React Native 的 JavaScript 捆綁器，但 Airbnb 將它用於 Web 專案）的故事，以及它如何使他們的開發反饋迴圈“幾乎是即時的”。

  3. 我們如何將 Node.js 庫轉換為 Deno（使用 Deno） - “我們採用了一種“執行時介面卡”模式，我們認為它代表了一種通用方法，可能對其他希望支援 Deno 的庫作者有用。”

  4. 2022 年 React 狀態管理庫綜述 - 這個領域有很多選擇，包括 Zusstand、Recoil、XState，當然還有 Redux。

  5. JSON 和 JavaScript 中的字串化怪異 - 這不是最簡單的事情，儘管至少有一個（複雜的）書面規範用於JSON.stringify's 的操作。

  6. The Balance has Shifted away from SPAs - 這不是最簡單的事情，儘管至少有一個（複雜的）書面規範用於JSON.stringify's 的操作。

框架釋出

  1. Electron 19 – 獲取 Chromium 102、V8 10.2 和 Node 16.14.2。
  2. Neutralino.js 4.6 - 輕量級跨平臺桌面應用程式框架。
  3. fast-check 3.0 – 基於屬性的測試框架。
  4. Knex 2.1.0 – Node.js 的 SQL 構建器。
  5. Cypress 9.7.0 – 在瀏覽器中測試任何東西。
  6. Storybook 6.5 – UI 元件開發工具。

程式碼和工具

  1. Ninja Keys：為您的應用程式/站點新增命令皮膚/鍵盤快捷鍵介面：如果您在 GitHub 上使用過 Cmd/Ctrl+K 或在 VS Code 等工具中使用命令皮膚，您會覺得這很熟悉，而且很方便在 vanilla JS 應用程式中或與 Vue、React 或 Svelte 一起使用。Kbar是該領域的另一位參與者，更專注於 React。

  2. Filesize.js：從檔案大小生成人類可讀的字串：例如，123456 位元組可以變成"120.56 KB"

  3. Three.js 的自定義 Vue 3 渲染器：直接在此處提供時髦的整頁演示。檢查後，這些文件可能會更有用。“把它想象成 Vue 的 react-three-fiber。”

  4. React-Uploady 1.0：檔案上傳元件和鉤子：旨在簡單而高度可定製。您可以擁有檔案上傳按鈕、預覽、拖放上傳區域等。文件很好，展示了一個基本示例，還有一個截圖視訊。

  5. Estimator.dev：現代 JavaScript 節省計算器：計算通過切換到更現代的 JavaScript 語法可以實現的網站大小改進。

  6. 瀏覽器擴充套件模板：快速充實瀏覽器擴充套件程式碼庫：Think create-react-app but for an extension, kinda.

相關文章