🗞 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 的重大架构升级内容,同时通过访谈的方式深入技术细节,对此次架构升级的详细内容进行讨论。