大家好，我是 ConardLi，不知不覺中，2021 年已經接近尾聲了，不知道在 2021 這一年，你收獲了什么？又失去了什么呢？

又到了開始做年終總結的時候了，今天，我來給 JavaScript 做個年終總結，大家來跟我一起回顧一下，這魔幻的一年中，JavaScript 發生了哪些大事件。

2021.1.6 Snowpack 3.0 發布

Snowpack 是一個 JavaScript 構建工具，它利用了瀏覽器對 ESM 的支持，讓我們可以構建單個文件并將其發送到瀏覽器中。每一個被構建的文件都會被緩存，在我們每修改一個文件時，只有這一個文件會被 Snowpack 重新構建。

Snowpack 3.0 于 2021 年 1 月 6 日發布，這是它迄今以來最大的一次版本更新，包括很多非常重要的新特性，比如

• experiments.source：按需加載 npm 導入的新方法，可以完全跳過前端的 npm install 步驟。

• experiments.optimize：內置打包、預加載和資產最小化能力。

• experiments.routes：用于 HTML 回退和 API 代理的高級配置。

• import 'snowpack'：用于 Snowpack 集成的全新 JavaScript API。

2021.1.9 React 創始人離職

React 的創始人 jordwalke 離開了 Facebook，去追逐新的夢想，在 Facebook 的十年中，他曾創建了 React 和 ReasonML。

2021.2.2 npm 7.0 正式可用

npm 7.0 在 2020 年就發布了，直到2021年2月，才打上 latest 標簽，這意味著大家可以在正式環境中使用了，此次更新也帶來了非常多的變化

• 性能優化：npm 本身的依賴數量降低46%(npm6 有 123 個依賴 npm7 只有67個），提升了 17% 的代碼覆蓋率，在各種基準測試中有顯著的性能改進。

• 自動安裝 peerDependencies：在 npm7 之前，開發人員需要自己管理和安裝 peerDependencies

• yarn.lock 支持：npm7 (package-lock v2) 可以使用 yarn.lock 來記錄當前狀態下實際安裝的各個 npm package 的具體來源和版本號，還會保持更新。

• workspace：支持從單個頂級軟件包中管理多個子包。

2021.2.17 Vite 2.0 發布

Vite 1.0 雖然之前進入了 RC 階段，但在發布之前，Vite 團隊決定進行一次徹底的重構來解決一些設計缺陷，所以 Vite 2.0 其實是 Vite 的第一個穩定版本，帶來了大量的改進：

• 多框架支持：Vite 提供官方的 Vue、React、Preact、Lit Element 項目模版，而 Svelte 社區也在開發 Vite 整合方案。

• 全新插件機制和 API：采用了基于 Rollup 插件 API 的設計，可以在使用 Rollup 插件鉤子之外使用一些額外的 Vite 特有的 API 來處理一些打包中不存在的需求。

• 基于 esbuild 的依賴預打包：使用 esbuild 來減少模塊/請求數量、支持 CommonJS 依賴。

• 更好的 CSS 支持：支持CSS 代碼分割、強化路徑解析、自動 URL 改寫。

• 其他：服務端渲染支持、舊瀏覽器支持 ...

尤雨溪年初曾在一個回答里預言 2021 會有很多人從 Webpack 轉向 vite，如今來看，預言實現：

如今的 Vite ，已經有了非常完善的生態：

2021.3.4 V8 宣布加速發布周期

為了更快地向用戶提供新功能和錯誤修復，Chrome 加快了其發布周期。

為了配合 Chrome 的新發布節奏，V8 將開始每 4 周（之前是 6 周）標記一個主要發布分支。

2021.3.6 jQuery 3.6.0 發布

距離2020年5月發布的 jQuery 3.5.1 版本，jQuery 在2021年3月終于又發布了 3.6.0 版本，這個版本并沒有新功能，也不包括安全修復、主要是對 JSONP、Ajax 等 API 的問題修復。

jQuery 的一大優勢是升級不會帶來任何問題（因為升級主要是在修復問題），評論區還是有很多堅定的支持者：

2021.3.9 ECMAScript 2021 候選版本發布

其中包括一些我比較感興趣的新特性：

• 數字分隔符（_）：為了提高可讀性，新的 JavaScript 語言啟用了下劃線作為數字文字中的分隔符，例如：1_000_000_000_000。

• Promise.any：Promise.any 方法和 Promise.race 類似，只要給定的數組中的有一個 promise 成功，就采用第一個 promise 的值作為它的返回值，但與 Promise.race 的不同之處在于它會等到所有 promise 都失敗之后才返回失敗的值。

const?promises?=?[fetch('/endpoint-a').then(()?=>?'a'),fetch('/endpoint-b').then(()?=>?'b'),fetch('/endpoint-c').then(()?=>?'c'),
];
try?{const?first?=?await?Promise.any(promises);//?任何一個?Promise?為?fulfilled?狀態console.log(first);//?→???'b'
}?catch?(error)?{//?所有?Promise?都被?rejected?了console.assert(error?instanceof?AggregateError);//?reject?結果數組console.log(error.errors);
}

• 弱引用：在以前，WeakMap 和 WeakSet 是JS中創建弱引用對象的唯一方法，WeakRef 是一個更高級的 API，可以用來指定目標對象不脫離垃圾收集保留它的對象。如果未通過垃圾回收回收目標對象，則 WeakRefs 可以取消引用以允許訪問目標對象。另外還新增了 FinalizationRegistry 對象，可以在垃圾回收對象時請求回調。

const?ref?=?new?WeakRef(targetObject)
const?obj?=?ref.deref()const?registry?=?new?FinalizationRegistry([callback])
registry.register(target,?heldValue,?[unregisterToken])

• String.prototype.replaceAll：提供了一種簡便的方式來替換子字符串的所有匹配，而不再需要創建全局 RegExp 。

看下面的例子，以前你要把 queryString 中所有的 + 替換掉，需要創建一個全局的正則：

const?queryString?=?'q=query+string+parameters';
queryString.replace(/\+/g,?'?');

現在你只需要使用 replaceAll 方法：

queryString.replaceAll('+',?'?');

• 邏輯賦值運算符（&&=，||=，??=）：是一種新的復合賦值運算符，他可以把邏輯操作 &&，||或?? 與賦操作結合成一條命令。

x?&&=?y;
//?等同于?x?&&?(x?=?y)
x?||=?y;
//?等同于?x?||?(x?=?y)
x???=?y;
//?等同于?x????(x?=?y)

2021.3.17 Node.js 的下一個 10 年

Node.js 在它的前 10 年非常成功，這個項目正在努力使下一個 10 年變得更好，Node.js 官方發布了對 Node.js 未來十年的展望，并且啟動了 Next-10 工作：

2021.3.17 V8 9.0 發布

V8 9.0 是 V8 的一個主要版本，和 Chrome 90 Stable 一起發布，包括下面這些主要亮點：

• 正則匹配索引：從 v9.0 開始，開發者可以獲取正則表達式匹配中匹配的捕獲組的開始和結束位置的數組。當正則表達式帶有 /d 標志時，這個數組可以通過匹配對象上的 .indices 屬性獲得。

• 更快的 super 屬性訪問：通過使用 V8 的內聯緩存系統和 TurboFan 中優化的代碼生成，對 super 屬性(例如 super.x )的訪問進行了優化。

• 更快的 JS-to-Wasm 調用。

• 禁用 for ( async of 寫法。

詳情可以看文章：V8 9.0 版本都有哪些新東西？

2021.3.29 Deno 公司成立

Node.js 作者 Ryan Dahl 在博客中闡述了對 Deno 的未來愿景，以及 Deno 對于 Web 開發的意義。他們相信 JavaScript 將在未來很長一段時間內存在于互聯網，并且會是速度最快、最受歡迎且唯一具有工業標準化流程的語言。

他還提到了曾創建的 Node.js 項目，并表示它雖然取得了一定成功，但是服務器端 JavaScript 發展得如此的支離破碎，基礎設施也十分不完善，甚至未能跟上瀏覽器平臺的發展，所以服務器端 JavaScript 一直停滯不前。

為了積極推行這些想法，Ryan Dahl 和 Bert Belder 成立了 Deno 公司，并籌集到 490 萬美元的種子資金。他們會先用這筆投資組建專職的工程師團隊，以改進 Deno。

2021.4.13 中國首個 JavaScript 語言提案在 ECMA 進入 Stage 3

該提案是阿里巴巴前端標準化小組與淘系技術部門近期在 TC39 技術委員會上提出的《Error Cause》，將開始在 JavaScript 引擎中開始實現，并在瀏覽器、Node.js 實驗性實施。

async?function?doJob()?{const?rawResource?=?await?fetch('//domain/resource-a').catch(err?=>?{//?How?to?wrap?the?error?properly?//?1.?throw?new?Error('Download?raw?resource?failed:?'?+?err.message);//?2.?const?wrapErr?=?new?Error('Download?raw?resource?failed');//????wrapErr.cause?=?err;//????throw?wrapErr;//?3.?class?CustomError?extends?Error?{//??????constructor(msg,?cause)?{//????????super(msg);//????????this.cause?=?cause;//??????}//????}//????throw?new?CustomError('Download?raw?resource?failed',?err);})const?jobResult?=?doComputationalHeavyJob(rawResource);await?fetch('//domain/upload',?{?method:?'POST',?body:?jobResult?});
}await?doJob();?//?=>?TypeError:?Failed?to?fetch

Error Cause 2021.4.13 進入 Stage 3，也是我國首個進入在 ECMA 進入 Stage 3 的 JavaScript 語言提案。

2021.10.26 該提案已進入 Stage 4

2021.4.21 Node.js16 發布

Node.js 16 替代 Node.js 15 成為當前的主要發布版本，同時 Node.js 10 在這個月底止維護。

帶來以下主要更新：

• Timers Promises API：提供了另一組返回 Promise 對象的定時器函數，不再需要使用 util.promisify()。

• AbortController：基于 AbortController Web API 的穩定實現

• 標準 Web Crypto API 試驗性實現

• Stable Source Maps v3

• Node.js v16 中的 npm 版本升至 v7.10.0

• V8 更新至 V8 9.0

2021.5.28 React 18 alpha 發布

React 團隊在5月份宣布了 React 18 的發布計劃，并且發布了 React 18 的 alpha 版本（在11月份進入 beta 版本，后面就不寫了）。這個版本主要是增強了 React 應用的 并發渲染 能力。

你可以在 React 18 中嘗試體驗以下幾個新特性：

• 新的 ReactDOM.createRoot() API（替換 ReactDOM.render()）

• 新的 startTransition API（主要用于非緊急狀態更新）

• 渲染的自動批處理優化（主要解決異步回調中無法批處理的問題）

• 支持 React.lazy 的 全新 SSR 架構（支持 <Suspense> 組件）

• 詳細可以看：【第一批吃螃蟹】試用 React 18 ！

• 另外我還寫了一篇文章介紹 React 幾個主要階段的重點工作內容：React 框架運行時優化方案的演進

2021.6.17 Undici4 發布

在以前，request 是在 Node.js 中發送一個 HTTP 請求的首要選擇，但是這個包在 2020 年 2 月 11 日已經標記為棄用。

現在， Node.js 官方推薦 Undici4 作為在 Node.js 中發送 HTTP 請求的推薦選擇，它更快速、可靠且符合規范，下面是一個小 Demo：

import?{?request?}?from?'undici'const?{statusCode,headers,trailers,body
}?=?await?request('http://localhost:3000/code秘密花園')console.log('response?received',?statusCode)
console.log('headers',?headers)for?await?(const?data?of?body)?{console.log('data',?data)
}console.log('trailers',?trailers)

Undici4 使用 WASM 構建 llhttp，性能得到飛速提升。

2021.7.20 Node-RED 2.0 發布

Node-RED 是一個基于 Node.js 的低代碼編程工具，可以用新穎有趣的方式將硬件設備，API和在線服務連接在一起。

它提供了一個基于瀏覽器的編輯器，使得我們可以輕松地使用編輯面板中的各種節點將流連接在一起，只需單擊即可將其部署到其運行時。

現在，Node-RED 發布了 2.0 版本，這需要 Node.js 12.17.x 或更高版本，另外也帶來了非常多的新特性。

2021.8.3 Vue.js 被選作維基百科的前端框架

維基媒體基金會 (Wikimedia Foundation) 宣布正式采用 Vue.js 作為未來的 JavaScript 框架 —— 用于維基百科的底層引擎 MediaWiki。

2021.8.5 Vue 3.2 發布

8 月 5 日，Vue.js 作者尤雨溪在博客上宣布 Vue.js 3.2 版本正式發布。

以下為更新的主要內容：

• 新的 SFC 功能

  • <script setup> 是一種編譯時語法糖，能夠極大改善在 SFC 中使用 Composition API 時的開發者體驗。

  • <style> v-bind 用于在 SFC <style> 標簽中啟用組件狀態驅動的動態 CSS 值。

<script?setup>
import?{?ref?}?from?'vue'const?color?=?ref('red')
</script><template><button?@click="color?=?color?===?'red'???'green'?:?'red'">Color?is:?{{?color?}}</button>
</template><style?scoped>
button?{color:?v-bind(color);
}
</style>

• Web 組件：Vue 3.2 引入了新的 defineCustomElement 方法，可以使用 Vue 組件 API 輕松創建原生自定義元素：

import?{?defineCustomElement?}?from?'vue'const?MyVueElement?=?defineCustomElement({})customElements.define('my-vue-element',?MyVueElement)

• 運行時性能改進：

  • 更高效的 ref 實現（讀取速度提高約 260%，寫入速度提高約 50%）

  • 依賴項跟蹤速度提高約 40%

  • 內存使用量減少約 17%

• 編譯時性能改進

  • 創建普通元素 VNode 的速度提高約 200%

  • 更激進的持續 hoisting

2021.8.24 TypeScript 新官網上線

早在 2020 年 8 月份，TypeScript 團隊就對 TypeScript Web 現有整個構架進行了重新設計。其目的是記錄 TypeScript 提供新的基礎，重新組織其信息體系結構，通過一個內聚的設計將其包裝在一起，歷時一年，新官網上線。

2021.9.20 Node.js 發布 Corepack

Corepack 是一個處于實驗階段的工具，用于助你管理你本機 package manager 的版本。也就是用來管理「包管理工具（npm、yarn、pnpm、cnpm）」，即「包管理器的管理器」。

它為每個包管理工具都暴露了二進制代理，當 Corepack 被調用時，將讀取當前項目配置的包管理工具，用戶無需手動安裝，最后運行它時則不需要用戶額外操作。

2021.10.5 React 全新文檔發布

React 以前一直被吐槽官方文檔對新手不友好，而且舊文檔大部分還是基于 class components 進行的講解。

新的 React 官方文檔改版耗時 1 年，在 10 月份已完成站點相關改版，部分文檔已初步上線。

新文檔的內容該動：

• 所有示例都會用 Hooks 完成

• 加入大量交互示例和圖表

• 提供習題用來檢驗學習成果

文檔站的技術上做了如下該動：

• 框架從 Gatsby 替換為了 Next.js

• 引入了 tailwind

• 去除 Flow，全面 TypeScript 化

• 全新的交互設計

• 支持黑夜模式

2021.10.7 jQuery Mobile 棄用

jQuery Mobile 于 2010 年構思并發布，也就是 jQuery 推出三年后。當時，jQuery Mobile 宣布跨多個平臺、瀏覽器和版本的兼容性，可謂是一個跨時代的框架。

就在 10月7號，jQuery 官方團隊宣布了 jQuery Mobile 的完全棄用：

jQuery Mobile 棄用之后：

• 仍然可以下載使用

• Mobile 1.4 與新的 jQuery Core 不兼容

• Github Issues 將被關閉，只能通過 security@jquery.com 上報嚴重的安全問題

棄用 jQuery Mobile后，jQuery 官網推薦大家遷移至 jQuery UI，它將繼續提供移動端的支持。

了解更多：jQuery Mobile 宣布完全棄用！

2021.10.13 Parcel v2 發布

Parcel 是一個新型的 Web 應用打包器(bundler) ，與以往的開發人員使用的打包器有所不同。它利用多核處理提供極快的性能，并且你不需要進行任何配置。

10月13日，Parcel Team 發布了 Parcel v2 版本，延續了 Parcel 1 的零配置打包體驗，并使其擁有了強大的拓展能力以適應任何規模和復雜度的項目。

• 新的插件系統：為 Parcel 提供了完整的拓展能力，允許 Parcel 從小規模項目拓展到具有復雜構建要求的大規模生產環境的應用程序

• 默認開啟 Tree Shaking：包括 ES modules、CommonJS、dynamic import 和 CSS modules 的支持

• 巨大性能提升：包括用 Rust 寫的新的 JavaScript 編譯器和新的多任務并行架構，能夠利用所有的 CPU 內核并行執行

2021.10.19 Node.js 17 發布

在 Node.js16 發布的6個月后，Node.js v17.0.0 發布了。

下面是本次更新的主要內容：

• readline Promise API：你現在可以用下面的方式調用 readline：

import?*?as?readline?from?'node:readline/promises';
import?{?stdin?as?input,?stdout?as?output?}?from?'process';const?rl?=?readline.createInterface({?input,?output?});const?answer?=?await?rl.question('What?do?you?think?of?Node.js??');console.log(`Thank?you?for?your?valuable?feedback:?${answer}`);rl.close();

• 錯誤堆棧尾部增加 Node.js 版本信息，更方便調試問題：

file:///home/ConardLi/dev/demo/main.mjs:1
throw?new?Error("報錯了...");^Error:?Uncaught?exceptionat?file:///home/ConardLi/dev/demo/main.mjs:1:7at?ModuleJob.run?(node:internal/modules/esm/module_job:185:25)at?async?Promise.all?(index?0)at?async?ESMLoader.import?(node:internal/modules/esm/loader:281:24)at?async?loadESM?(node:internal/process/esm_loader:88:5)at?async?handleMainPromise?(node:internal/modules/run_main:65:12)Node.js?v17.0.0

• 支持 OpenSSL 3.0：特別是提供 QUIC 支持的 quictls/openssl

• JavaScript V8 升級到 v9.5

2021.11.27 Next.js 12 發布

10 月 27 日，Next.js 團隊官宣了 12 版本發布。

就像在 Next.js Conf 上宣布的那樣，Next.js 12 是 Next.js 有史以來最大的版本，更新概覽如下：

• 采用 Rust 編譯器：刷新速度提升 3 倍、構建速度提升約 5 倍的

• Middleware (beta)：通過配置代碼在 Next.js 中實現完全的靈活性

• React 18 支持：支持 Suspense、React Server Components 等新特性

• <Image />AVIF 支持：選擇縮小 20% 的圖像

• Bot-aware ISR Fallback：為網絡爬蟲優化 SEO

• 原生 ES 模塊支持：與標準化的模塊系統保持一致

• URL Imports (alpha)：支持從任何 URL 導入包（比如CDN），無需通過npm安裝

了解更多：Next.js 12 發布！迄今以來最大更新！

2021.11.4 Angular v13 發布

11 月 4 日，Angular 團隊宣布Angular 13 發布。

此版本核心更新包括不再支持舊編譯和渲染引擎 View Engine，全面支持新編譯和渲染引擎 lvy，以及不再支持 IE11，除此之外還有包括對 APF 以及 Angular CLI 等方面的更新和修改。

2021.11.17 TypeScript 4.5 發布TypeScript 4.5 發布

TypeScript 4.5 于 11.17 發布正式版，支持 ECMAScript Module、從 node_modules 加載 lib、新的內置工具類型 Awaited、通過 Node 的 realpathSync.native 實現更快的加載速度等等。

2021.11.24 Remix 開源

Remix 是一個由 React Router 開發團隊所開發的基于 React、 TypeScript ?和 Node 的全棧框架，以解決開發者在用 React 開發時面臨的一些棘手問題。

Remix 宣布關閉付費訂閱模式，正式開源，絕對可以算是 Next.js 的強勁對手。

去年 10 月，我們推出了 "支持者預覽版"，我們得到的支持讓我們感到非常激動。雖然我們可以從 Remix 的付費訂閱中獲得正常的開發者工資，但我們想更進一步。我們想讓所有人都能使用 Remix。我們相信，將 Remix 以開源的方式發布將推動項目的創新，并使其他框架也能從我們取得的進展中受益。我們急于向他人學習，并回饋給他人。— Remix 聯合創始人 Michael Jackson 和 Ryan Florence

2021.11.24 Pinia 正式成為 vuejs 的一員

Pinia 是 Vue.js 的輕量級狀態管理庫，最近很受歡迎。它的成功可以歸功于其管理存儲數據的獨特功能（可擴展性、存儲模塊組織、狀態變化分組、多存儲創建等）。

尤雨溪 11.24 在 Twitter 上宣布：Pinia 正式成為 vuejs 官方的狀態庫，意味著 Pinia 就是 Vuex 5 。

2021.12.4 JavaScript 26 歲了

12 月 4 日，是編程語言 JavaScript 面世 26 年的紀念日。

當天，Node.js 官方專門發文慶祝：“Happy 26th Birthday，JavaScript”。

2021.12.13 Deno 加入 TC39

Deno 將在 TC39 工作組中與其他 ECMA 成員和更廣泛的 JS 社區合作，討論 JavaScript 的下一次迭代，推動語言的功能和改進，使所有人受益，尤其是服務器端 JavaScript 的開發者用戶。

2021.12.14 Create React App 5.0 發布

Create React App 5.0.0 發布，這是一個主要版本。

包括以下支持：

• webpack 5

• Jest 27

• ESLint 8

• PostCSS 8

• Fast Refresh 改進和 bug 修復

• 支持 Tailwind CSS

• 改進的包管理器檢測

• 解除了所有的依賴關系，以便與其他工具更好地兼容

• 不再支持 Node 10 和 12

最后

不知道，上面這些事件和更新，你之前了解過多少呢？

另外，這一年 JavaScript 的變化，你怎么看？

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持～