湖中剑 前端周刊 #18 | 动态图片、Chrome 97、依赖注入、Web IDE、Monorepo

周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。

📖 文章

动态图片生成方案

在业务需求中，根据返回数据动态生成图片分享是很常见的场景。比如在起点读书小程序中，每本书都需要生成一个动态图片，包含：书名、作者、类别和当前页面小程序码，这几个内容都是会动态改变的。

那如何抽象化&高性能的实现这一类需求呢？下面我们一起来探讨动态图片的生成方案。

https://mp.weixin.qq.com/s/0dWfL3ChIceH6rQ8-Oh6pg

Chrome 97 发布 WebTransport，QUIC 协议小试牛刀

2022年1月4日正式发布的Chrome 97，带来了哪些新特性呢？

https://mp.weixin.qq.com/s/upOra3ONzP98ZqXxHYo4Sg

ES6 以上版本代码要不要转码成 ES5?

为了兼容老的浏览器，尤其是IE系列，使用ES6以上规范的前端代码往往使用Babel等转码工具转码成ES5的代码。

距离发布ES6的2015年已经过去了6年了，现在浏览器对于ES6的兼容性如何呢？

https://mp.weixin.qq.com/s/fSRpl25Pi0ladeWRXHLGZA

前端 CI/CD 上如何保证依赖安装速度达到优解？

前端应用在构建部署时长上，通常受代码拉取速度、以及机器配置高低等因素影响。排除这些我们往往不可控的因素外，仍可以通过对 npm 依赖安装方式进行优化，来达成更快的构建速度。

以项目存在 50 个以上生产依赖包，最优秀的依赖安装方式比最差的安装方式，往往能够节省 20s 以上的时间。

安装依赖的命令行有：npm install、npm ci 。在进行真正测试前，先了解下这两命令行的差异，进而明白他们为啥安装速度差异这么大。

https://xie.infoq.cn/article/675a4b724b9b504fe17f42eb6

2022 年的 CSS

随着 2021 年的结束，让我们一起来看看 2022 年，我们可以期待哪些 CSS 特性将会在浏览器中出现。

https://juejin.cn/post/7048260643589193765

2021 JavaScript Rising Stars

2021年度 JavaScript Rising Stars 报告出来了，去年Star数量增加最多的项目竟然是zx！

https://risingstars.js.org/2021/en

聊聊 nestjs 中的依赖注入

在使用 nestjs 过程中会发现 nest 框架和后端同学使用的 Springboot 以及前端三大框架之一的 Angular 都有很多相似之处。没错这三个框架都有相似的设计，并都实现了依赖注入，本文就围绕依赖注入这个话题，展开讨论一下依赖注入是什么？以及在 nestjs 中详细的实现过程。

https://juejin.cn/post/7049504750257045540

🛠 工具、软件

molecule

一个轻量的 Web IDE UI 框架。

Molecule 是一款受 VSCode 启发，使用 React.js 构建的 Web IDE UI 框架。我们设计了类似 VSCode 的扩展（Extension)机制，可以帮助我们使用 React 组件快速完成对 Workbench 的自定义

核心功能：

• 内置 React 版本的 Visual Studio Code Workbench UI
• 基本兼容 Visual Studio Code 的 ColorTheme
• 支持使用 React 组件自定义 Workbench UI 样式
• 内置 Monaco Editor Command Palette、Keybinding等模块，并支持扩展
• 支持 i18n，简体中文、English 、한국어 3 种语言
• 内置一个简单的 Settings 模块，支持在线编辑修改以及扩展
• 内置默认的 Explorer, Search 等组件，并支持扩展
• Typescript 支持

在线预览地址：https://dtstack.github.io/molecule-examples/#/

https://github.com/DTStack/molecule

Monorepo 工具集

Turborepo 推荐的 monorepo 工具集，在此可以找到每个子领域的推荐方案和备选方案。多看别人的依赖推荐开阔下思路，还可以避免自己造低级轮子。

https://turborepo.org/docs/guides/complimentary-tools

---

周刊首发于GitHub，欢迎订阅：

我的周刊