Yarn 3.0 发布、Visual Studio Code 支持查看 Element/Network 等信息 | 淘系前端架构周刊 210802 期

1261

🗞 News

Yarn 3.0 发布

Breaking Change:

  1. 不再支持 Node 10
  2. PnP 钩子由 .pnp.js 更改为 .pnp.cjs
  3. 虚拟文件夹由 $$virtual 更改为 __virtual__
  4. 编辑器 SDK 被移动至 @yarnpkg/sdks
  5. 等等……

Feature:

  1. 支持 exports 字段
  2. 性能优化(部分场景下甚至快于 pnpm)
  3. 采用新的 node_modules 链接器
  4. 改进 Shell(采用 Yarn 提供的 Shell 解释器替换系统的 Shell)
  5. 支持 ESBuild
  6. 引入新的插件 API
  7. 等等……

完整的 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 {Clifrom 'clipanion';
​
import {HelloCommandfrom './HelloCommand';
​
const [node, app, ...args] = process.argv;
​
const cli = new Cli({
   binaryLabel`Command Line Interface`,
   binaryName`${node} ${app}`,
   binaryVersion`1.0.0`,
   enableColorstrue,
})
​
cli.register(HelloCommand);
cli.runExit(args, Cli.defaultContext);
​
// src/HelloCommand.ts
import {CommandOptionfrom 'clipanion';
​
export class HelloCommand extends Command {
 name = Option.String({requiredtrue});
​
 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((ab) => a + b)
}),
​
 b.add('Reduce five elements', () => {
  ;[1, 2, 3, 4, 5].reduce((ab) => 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 的重大架构升级内容,同时通过访谈的方式深入技术细节,对此次架构升级的详细内容进行讨论。

原文链接:React Native迎来重大架构升级,性能将大幅提升