搜索

2021 年 JavaScript 大事记

全栈前端精选

共 11358字，需浏览 23分钟

 ·

2022-01-20 15:13

不知不觉中，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 架构（支持 组件）

  • 详细可以看：【第一批吃螃蟹】试用 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 功能