🗞 News
Yarn 3.0 发布
Breaking Change：
- 不再支持 Node 10
- PnP 钩子由
.pnp.js更改为.pnp.cjs - 虚拟文件夹由
$$virtual更改为__virtual__ - 编辑器 SDK 被移动至
@yarnpkg/sdks下 - 等等……
Feature：
- 支持
exports字段 - 性能优化（部分场景下甚至快于 pnpm）
- 采用新的
node_modules链接器 - 改进 Shell（采用 Yarn 提供的 Shell 解释器替换系统的 Shell）
- 支持 ESBuild
- 引入新的插件 API
- 等等……
完整的 Changelog：CHANGELOG.md
原文链接：Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ...
Visual Studio Code 支持查看 Element/Network 等信息
在此之前想要在 Visual Studio Code 中调试 Web 页面，需要借助 Chrome Debugger 或者 Microsoft Edge Debugger extension 这两款插件，且仅支持控制台。
更新后的 Visual Studio Code 内置了调试能力，并将其进行了拓展，支持了几乎所有 Chrome DevTools 支持的调试能力。
原文链接 & 教程：Easier browser debugging with Developer Tools integration in Visual Studio Code
📦 Open Source
Windows 11 in React
使用 React 还原 Windows 11。
Preview：Windows 11 in React
GitHub Repo：blueedgetechno/windows11
Clipanion
一个类型安全的 CLI 库，没有运行时依赖，采用面向对象的方式开发 Command Line Interface（CLI）。
Demo：
// src/app.ts
import {Cli} from 'clipanion';
import {HelloCommand} from './HelloCommand';
const [node, app, ...args] = process.argv;
const cli = new Cli({
binaryLabel: `Command Line Interface`,
binaryName: `${node} ${app}`,
binaryVersion: `1.0.0`,
enableColors: true,
})
cli.register(HelloCommand);
cli.runExit(args, Cli.defaultContext);
// src/HelloCommand.ts
import {Command, Option} from 'clipanion';
export class HelloCommand extends Command {
name = Option.String({required: true});
async execute() {
this.context.stdout.write(`Hello, ${this.name}!\n`);
}
}
当我们使用 ts-node 运行 app.ts 或将其编译为 JavaScript 后使用 node 运行，即可在控制台查看输出：
$ ts-node src/app TaobaoFED
Hello, TaobaoFED!
GitHub Repo：arcanis/clipanion
Node.js CLI Apps Best Practices
使用 Node.js 构建体验良好的 Node.js Command Line Interface（CLI）的最佳实践。
GitHub Repo：lirantal/nodejs-cli-apps-best-practices
Sandpack
CodeSandbox 开源的浏览器端打包方案。
GitHub Repo：codesandbox/sandpack
Infima
从 Docusaurus 2 中诞生的样式框架，为内容驱动的网页提供现代化的样式方案。
Official Website：Infima
GitHub Repo：facebookincubator/infima
Benny
一个非常简单的 Benchmark 框架。
Demo：
// benchmark.js
const b = require('benny')
b.suite(
'Example',
b.add('Reduce two elements', () => {
;[1, 2].reduce((a, b) => a + b)
}),
b.add('Reduce five elements', () => {
;[1, 2, 3, 4, 5].reduce((a, b) => a + b)
}),
b.cycle(),
b.complete(),
b.save({ file: 'reduce', version: '1.0.0' }),
b.save({ file: 'reduce', format: 'chart.html' }),
)
$ node benchmark.js
Running "Example" suite...
Progress: 100%
Reduce two elements:
153 067 277 ops/s, ±0.11% | fastest
Reduce five elements:
119 100 958 ops/s, ±1.86% | slowest, 22.19% slower
Finished 2 cases!
Fastest: Reduce two elements
Slowest: Reduce five elements
Saved to: benchmark/results/reduce.json
Saved to: benchmark/results/reduce.chart.html
GitHub Repo：caderek/benny
📑 Article
Next.js 是怎么做预渲染的
文章详细介绍了 Next.js 提供的预渲染方案，深入浅出地分析了各种预渲染方案的优劣，并针对不同类型的场景提出了方案选择上的建议，非常值得学习！
原文链接：Next.js 是怎么做预渲染的
从 Prompt 来看微前端路由劫持原理
文章从业务方反馈的问题入手，深入浅出地讲解了微前端路由的劫持原理。
原文链接：从 Prompt 来看微前端路由劫持原理
React Native 迎来重大架构升级，性能将大幅提升
文章简单介绍了 React Native 的重大架构升级内容，同时通过访谈的方式深入技术细节，对此次架构升级的详细内容进行讨论。
