前端技術週刊 2022-12-10：Vite 正式釋出 4.0
釋出時間： 2022.12.10
本週內容： 行業資訊x2、開源專案x6、線上教程x1、工具推薦x2、行業先驅x1
行業資訊
Vite 正式釋出 4.0
Vite 是一個全新的前端開發與構建工具，區別於傳統工具的設計，基於 unbundled 的設計讓它的擁有極速的服務啟動後和熱更新。目前 Vite 在 npm 每週下載超過 250 萬次，在昨日，Vite 正式釋出了 4.0 版本，主要有如下更新：
1. 升級至 Rollup 3.x
Rollup 3.0 在今年 10 月份正式釋出，具體更新可以參考更新日誌。
2. 為 React 提供多個外掛選擇
Vite 團隊認為 SWC 現在是 Babel 的成熟替代品，尤其是在 React 專案中。SWC 的 React Fast Refresh 實現比 babel 快很多，對於一些專案來說，它現在是一個更好的選擇。從 Vite 4 開始，將官方提供兩個外掛以供選擇。
@vitejs/plugin-react：基於 esbuild 和 Babel 的外掛，以較小的包占用空間和 Babel 的靈活性實現快速 HMR。@vitejs/plugin-react-swc：基於 SWC 的外掛，在構建過程中使用 esbuild，但在開發過程中將 Babel 替換為 SWC。對於不需要非標準 React 擴充套件的大型專案，冷啟動和 HMR 可以明顯加快。
3.瀏覽器相容性
構建 Safari14 預設以更廣泛的 ES2020 相容性為目標。這意味著現在可以使用 BigInt，並且不再轉譯 nullish 合併運算子。如果您需要支援舊版瀏覽器，可以使用 @vitejs/plugin-legacy。
4. CSS 作為字串匯入
在 Vite 3 中，匯入 .css 檔案的預設匯出可能會導致 CSS 的雙重載入。
TS
import cssString from './global.css'
這種雙重載入可能會發生，因為 .css 將生成樣式檔案，並且 CSS 字串也可能會被應用程式程式碼使用。從 Vite 4 開始，.css 預設匯出已被棄用，可以使用 ?inline 進行行內匯入，並且不會生成樣式檔案。
ts
import stuff from './global.css?inline'
5. 環境變數
Vite 現在使用 dotenv16 和 dotenv-expand9（之前是 dotenv14 和 dotenv-expand5）。如果變數值包含 # 或 `，則需要用引號將它們括起來。
diff
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"
6. 其它更新
- CLI 增加 h 命令以檢視全部
- 預構建支援
patch-package - 更簡潔的構建日誌輸出
- 改進 SSR 期間的錯誤資訊
- 縮小包體積，比 Vite3 小 23%
npm 上線安全相關重要功能
1. 細粒度 Token
npm 此前一直無法建立具有最小特權模型的令牌，以限制意外或故意濫用令牌的影響。新的細粒度訪問令牌允許你細粒度控制訪問許可權，包括：
- 控制有效時間
- 控制 IP 白名單
- 控制具體組織或具體包的訪問許可權
2. 線上檢視程式碼
線上檢視程式碼此前一直是一項付費功能，多年來一直供團隊和專業使用者使用，現在 npm 將其改進並開放給所有人使用。這是一個令人激動的進步，因為在此之前，開發者都需要安裝到本地之後才可以檢視 npm 實際安裝包程式碼的構成，然而因為有 npm install 鉤子的存在使得安裝過程並不是安全的。
開源專案
Rough.js（17.7k star）
一個小型 (<9 kB) 圖形庫，可讓您繪製草圖、類似手繪的風格。該庫定義了繪製直線、曲線、圓弧、多邊形、圓和橢圓的基元。它還支援繪製SVG 路徑。
wired-elements（9.2k star）
手繪風格、粗略外觀的 web component 元件庫。元素的繪製具有足夠的隨機性，沒有兩個效果圖是完全相同的，就像兩個獨立的手繪形狀一樣。值得一提的是該專案基於 Rough.js 和 Lit 構建。
react-spring（24.6k star）
一個基於彈簧物理學的 React 動畫庫，可以幫助你構建栩栩如生的應用。它非常靈活，幾乎涵蓋了所有的 UI 動畫需求，並提供了 render props 和 react hooks 兩種不同的 API。
vanilla-extract（6.9k star）
一個使用 TypeScript 作為“前處理器”的零執行時 CSS 框架，就像 Less 和 Sass 一樣在構建時生成所有樣式。
GoView（4.8k star）
一個使用 Vue3 搭建的低程式碼資料視覺化開發平臺，將圖表或頁面元素封裝為基礎元件，無需編寫程式碼即可完成業務需求，它的技術棧為：Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS。
react-use-wizard（368 star）
一個使用 React Hooks 構建的分步器，很簡單，聚焦在邏輯上，沒有任何 UI 限制，你可以使用在任何分步 UI（比如分步表單）中。
線上教程
現代 JavaScript 教程
該教程以最新的 JavaScript 標準為基準。通過簡單但足夠詳細的內容，為你講解從基礎到高階的 JavaScript 相關知識。
工具推薦
公版影像典藏計劃
收錄 1894 -1967 年的影像資料，包含電影、動畫片、紀錄片、珍貴史料四大類。除了影像本身，還對其進行多維度彙編，如：撰寫詞條、專業評論、收集電影或相關人物的精彩周邊、提供參考文獻等。
千億畫素看世界
一座城一幅圖，打造世界城市入口，該工具可以帶你身臨其境一般地探索世界和中國個大城市。
行業先驅
克利斯登·奈加特
克利斯登·奈加特（1926年8月27日－2002年8月10日），挪威電腦科學家，社會活動家，馮·諾伊曼獎和圖靈獎獲得者，Simula 的創始人，面向物件技術的先驅。
克利斯登·奈加特與奧利-約翰·達爾一道開發了最早的面向物件的程式設計語言 SIMULA-I（1961年—1965年）和 SIMULA-67，首次引入了面向物件程式設計語言的基本概念：物件、類、繼承、虛擬量、多執行緒等，這兩位先驅先後獲得諾伯特·維納獎、羅辛獎、約翰·馮諾依曼獎、圖靈獎等眾多獎項。
本週素材由達觀資料鍾慎恩、趙衛紅、沈琬婷、陳泳巨集、蘇玉春等同學提供。