前端周刊 | Next.js 发布新教程; 百万周下载量包作者供应链投毒; Deno 1.20 发布

2,376 阅读8分钟

新的一周,快来看看上周发生了哪些新鲜事吧!

我的微信:CUG-GZ

科技趣闻

1. Next.js 官方发布全新教程

近日,Next.js 发布了一个新的基础课程,涵盖了 React 的基本知识、它与 Next.js 的关系以及构建第一个 Next.js 应用程序。

Next.js 是一个用于服务器渲染的通用 JavaScript Web 应用程序的小型框架,该框架基于React、Webpack 和 Babel 构建,为该网站提供了强大的支持。

官方教程:nextjs.org/learn/found…

2. 以反战为名,百万周下载量 node-ipc 包作者进行供应链投毒

近日,不少开发者在使用到 vue-cli 中的 node-ipc 模块时,这个依赖项会在桌面以及其他位置创建一个叫做“WITH-LOVE-FROM-AMERICA.txt”的文件,不过打开这个文件是空的。据悉,该 package 每周下载量达到了百万。另外,使用 Yarn 的开发者也受到了影响。

开始有人以为只是个恶作剧,但事情并非如此简单。有开发者在对代码进行测试处理后发现,node-ipc 包的作者 RIAEvangelist 在投毒。他起初提交的是一段恶意攻击代码:如果主机的 IP 地址来自俄罗斯或白俄罗斯,该代码将对其文件进行攻击,将文件全部替换成 。该作者是个反战人士,还特意新建了一个 peacenotwar 仓库来宣传他的反战理念。

虽然作者删除了该段代码,但这仍然是一种恶劣的供应链投毒。这样的行为都严重破坏了开源生态中的信任。对此你怎么看?

更新速递

1. React 18.0.0-rc.2 正式发布

3月8日,React 18发布第一个候选版本,上周发布了第二个候选版本。距离正式版更近了一步。

2. Prettier 2.6 正式发布

3月16日,Prettier 2.6 正式发布,此版本主要更新如下:

  • 添加了新的 singleAttributePerLine 选项。这是在 Vue SFC 模板、HTML 和 JSX 中每行仅打印一个属性的选项;
  • 添加对 TypeScript 4.6 的支持;
  • 对于HTML,每行强制执行单个属性;
  • 对于JavaScript,将 waitForAsync 识别为 Angular 中的测试语句,在没有块的 if 语句之后保留行尾注释,JSX 中的内联await表达式,添加acorn解析器;
  • 在正则表达式中添加对 Unicode Set Notation 的支持;
  • 改进 Flow 和 TS 中类型别名中注释的打印;
  • 添加对私有字段解构的支持;
  • 支持装饰器自动访问器语法。

Prettier 是一个“有主见”的代码格式化工具,支持列表如下:

  • JavaScript,包括 ES2017
  • JSX
  • Flow
  • TypeScript
  • CSS、LESS 和 SCSS
  • JSON
  • GraphQL

简而言之,这个工具能够使输出代码保持风格一致。

更新详情:prettier.io/blog/2022/0…

3. Deno 1.20 发布

3月17日,Deno 1.20 正式发布,该版本的主要更新如下:

  • 更快地调用 Rust;
  • HTTP 响应正文的自动压缩;
  • 新的子命令:deno bench 和 deno task;
  • 用于升级 HTTP 连接的低级 API;
  • FFI API 支持只读全局静态;
  • 使用时跟踪操作deno test;
  • 支持AbortSignal.timeout();
  • 支持Typescript 4.6。

Deno 是 V8 上的安全 TypeScript 运行时。

  • 支持 TypeScript 开箱即用,使用 V8 引擎;
  • 无 package.json、npm,不追求兼容 Node;
  • 通过 URL 方式引入依赖而非通过本地模块,并在第一次运行的时候进行加载和缓存,并仅在代码使用--reload运行,依赖才会更新;
  • 可以控制文件系统和网络访问权限以运行沙盒代码,默认访问只读文件系统可访问,无网络权限。V8 和 Golang 之间的访问只能通过 protobuf 中定义的序列化消息完成;
  • 最终创建单一可执行文件;
  • 发生未捕捉错误时自动终止运行;
  • 支持 top-level 的 await;
  • 旨在兼容浏览器;
  • 可以作为库来引入,以轻松构建自己的 JavaScript runtime。

更新详情:deno.com/blog/v1.20

4. Faker 6.0 发布

早在今年一月份,开源库 faker.js 遭到破坏。它并不是被外人劫持的,而是其创建者为了拒绝白嫖而在软件库中故意引入了一个无限循环,导致它出现了故障。这个库的应用特别广泛,所以这个事件影响也特别深远。而随后,社区接管了该开源库。近日,该库发布了6.0版本。

Faker.js 用来为测试和开发生成大量模拟(但真实的)数据。

更新详情:github.com/faker-js/fa…

开源趋势

下面来看看本周GitHub上有哪些热门的前端项目吧!

1. Bhailang

Bhailang 是一个用 Typescript 编写的玩具编程语言。

Star⭐:2.9k

本周Star⭐️:2374

Github地址github.com/DulLabs/bha…

2. Reactive-Resume

Reactive-Resume 是一个免费和开源的简历生成器,旨在使创建、更新和共享简历的日常任务像 1、2、3 一样简单。使用此应用程序,可以创建多份简历,与招聘人员或朋友分享通过一个独特的链接并将其打印为 PDF,全部免费,无广告,无跟踪,不会丢失数据的完整性和隐私性。

Star⭐:5.4k

本周Star⭐️:1696

Github地址github.com/AmruthPilla…

3. mini-vue

mini-vue 实现了最简 vue3 模型,用于深入学习 vue3, 让你更轻松的理解 vue3 的核心逻辑。

4. plasticity

Plasticity 是一款面向概念艺术家的 3D 建模软件。由于独特的小工具、快捷方式和周到的工作流程,在 Plasticity 中的建模快速高效。不过目前 plasticity 仍处于早期 BETA 阶段。所以缺少许多功能,而且还不容易使用或安装。

image.png

Star⭐:1.5k

本周Star⭐️:750

Github地址github.com/nkallen/pla…

5. awesome-selfhosted

awesome-selfhosted 是一个可以在自己的服务器上托管的免费软件网络服务和 Web 应用程序列表。

Star⭐:80.6k

本周Star⭐️:760

Github地址github.com/awesome-sel…

工具推荐

下面来推荐5个用于React项目的延迟加载库。

1. react-lazyload

react-lazyload 可用于延迟加载 React 应用程序中的任何类型的组件。它是 React 社区中最流行的延迟加载库之一,支持装饰器和服务器端渲染。其特点如下:

  • 具有一组属性,使用户能够自定义组件的功能。
  • 提供诸如 forceCheck 之类的实用程序来显示隐藏的内容,这些内容在没有调整大小或滚动事件的情况下变得可见。
  • 开箱即用支持水平延迟加载。
  • 只为所有延迟加载的组件实现两个事件监听器,进一步优化性能。

GitHub:github.com/twobin/reac…

2. react-lazy-load

react-lazy-load 是一个 React 组件,可用于以可预测的方式延迟加载内容。它相对较快,具有最小的包大小(缩小为 6KB)。其特点如下:

  • 自动检测滚动容器,例如带有滚动条的
    ,因此甚至可以在滚动容器内使用。
  • 允许用户设置阈值以从视口的任何一侧开始内容加载,使用诸如 offsetVertical、offsetHorizontal、offsetTop、offsetBottom 等属性。
  • 在 IE8+ 中工作。
  • 具有对防抖功能的内置支持。

但是,与 react-lazyload 库相比,该组件的 props 数量非常有限,因此提供的灵活性较低。主要缺点是它不允许用户为延迟加载的组件应用占位符。

GitHub:github.com/loktar00/re…

3. react-lazy-load-image-component

react-lazy-load-image-component 是一个易于使用的库,用于延迟加载任何类型的组件。它支持 IntersectionObserver,可以确定元素何时离开和进入视口。其特点如下:

  • 这个库最重要的特性是它的 HOC,trackWindowScroll,它允许组件跟踪窗口滚动位置,而无需为每个元素使用滚动或调整大小事件侦听器。
  • 默认情况下,延迟加载的组件的偏移量为 100 像素。
  • 内置的可见效果(例如模糊、黑白和不透明过渡)有助于改善用户体验。
  • 服务器端渲染兼容。
  • 支持 TypeScript 声明。
  • 占位符默认提供与图像或组件相同的大小,但可以自定义。

Github:github.com/Aljullu/rea…

4. react-lazy-images

react-lazy-images 是一个灵活的库,它提供组件和实用程序来延迟加载 React 中的图像。它使用 render props.为调用者提供了完全的表现控制。其特点如下:

  • 使用 IntersectionObserver 和 polyfill 来提高性能。
  • 为禁用 SEO 和 JavaScript 的环境提供后备策略。
  • 支持服务器端渲染。
  • 支持背景图像并与水平滚动一起使用。

GitHub:github.com/fpapado/rea…

5. react-lazy-blur-image

react-lazy-blur-image 是将图像延迟加载到低分辨率占位符中的理想库。默认情况下,该组件显示一个轻量级的灰色占位符,并在组件即将到达视口时替换为实际占位符。仅当实际图像完全延迟加载时,才会替换此占位符。其特点如下:

  • 它为延迟加载图像提供了一种简约的方法,提供了完美的用户体验和性能平衡。
  • 该组件只接受两个自定义属性:**src **和 style。
  • 组件可以使用 **styled-components **从占位符转换图像。

GitHub:github.com/meienberger…