前端周刊 | Chrome 101、Node 18.1、pnpm 7.0发布; Node.js 之父谈 JavaScript 容器

语言: CN / TW / HK

theme: orange

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

本文首发于微信公众号:前端充电宝

我的微信:CUG-GZ

科技趣闻

1. Node.js 之父谈 JavaScript 容器

Node.js 和 Deno 的创始人 Ryan Dahl 的文章《JavaScript Containers》提出了一种设想:未来将出现新的类似容器的抽象来简化服务器,大多数 Web 服务可通过 JavaScript 容器而非 Linux 容器进行简化。在这个新兴的服务器抽象层中,JavaScript 取代了 Shell。

Ryan Dahl 认为这种容器并不是为了解决 Linux 容器所针对的同样广泛的问题。它最大限度地减少了 Web 服务业务逻辑的样板,减少程序员需要了解的概念。Shell 是用于调用 Unix 程序的解释性脚本语言,它可以编写条件语句,循环语句等,但它能力有限,难以编程。而在 JavaScript 容器中,JavaScript 沙箱可以调用 Wasm,而不是像 Shell 那样调用 Linux 可执行文件。他们正在 Deno 中探索这些想法,尝试从根本上简化服务器抽象。

Deno 团队去年发布了 Deno Deploy 的首个 Beta 版本,这是由 Deno 团队从头开始构建的现代 serverless 云,用户可以使用它非常快速地将 JavaScript、TypeScript 和 WASM 服务部署到世界各地的数据中心。

原文:https://tinyclouds.org/javascript_containers

2. Unicode 标准新增5个新的行星符号

Unicode 技术委员会已批准在 Unicode 15.0 中加入五个新的行星符号,这些符号基于太阳系中新发现的跨海王星天体。按国际天文学联合会 (IAU) 的命名规则,在海王星轨道外绕太阳运行的天体需要以神话人物命名,因此这五个天体被命名为:

  • Orcus:伊特鲁里亚和罗马的冥界之神;
  • Haumea:夏威夷的生育女神;
  • Quaoar: 美国加州土著 Tongva 的神话人物;
  • Makemake:复活节岛拉帕努伊的创造神;
  • Gonggong:共工,中国神话的水神。

这五个新字符将加入 Unicode 标准版本 15.0 (预计在 2022 年 9 月发布)中的 149,180 个其他字符,分类在 2018 年 (Unicode 11.0) 及更早版本发布的行星物体组中,且可供世界上任何使用计算机或移动设备的用户访问。

详情:https://blog.unicode.org/2022/05/out-of-this-world-new-astronomy-symbols.html

3. Next.js 路由正在进行重大升级

Lee Robinson 在推特表示Next.js 的路由正在进行重大升级,包括嵌套路由、客户端和服务端路由、支持React 18的一些功能,服务器组件等。

更新详情

1. Chrome 101 正式发布

5月3日,Chrome 101正式发布。其主要更新如下:

  • 支持 hwb() 颜色,可以使用色调、白度和黑度来表示颜色;
  • 支持 fetchpriority 优先级,该属性开源用于调节资源的相对优先级,其值可以是 highlowauto
  • USBDevice 对象新增 forget() 方法,这使得忘记先前已授予权限的设备成为可能。

更新详情:https://developer.chrome.com/en/blog/new-in-chrome-101/#hwb

2. npm v8.9.0 正式发布

5月4日,npm v8.9.0 正式发布。

更新详情:https://github.com/npm/cli/releases/tag/v8.9.0

3. pnpm v7.0.0 正式发布

5月1日,pnpm v7.0.0 正式发布。其主要更新如下:

  • 不再支持 Node.js 12;
  • 使用 pnpm run <script> 时,脚本名称后的所有命令行参数现在都传递给脚本的 argv,甚至是--
  • 在运行pnpm-r exec | run | add 时,默认情况下会排除 root 包;
  • 按路径过滤由globs完成;
  • 默认情况下,embed-readme 设置为 false
  • ......

pnpm 是一个速度快、磁盘空间大的软件包管理器。pnpm 使用内容可寻址文件系统将所有模块目录中的所有文件存储在磁盘上。使用 npm 或 Yarn 时,如果你有 100 个项目使用 lodash,则磁盘上将有 100 个 lodash 副本。使用 pnpm,lodash 将存储在内容可寻址的存储中。

pnpm 的主要特点如下: - 快速: pnpm 是同类工具速度的将近 2 倍; - 高效: node_modules 中的所有文件均链接自单一存储位置 - 支持单体仓库: pnpm 内置了对单个源码仓库中包含多个软件包的支持 - 权限严格: pnpm 创建的 node_modules 默认并非扁平结构,因此代码无法对任意软件包进行访问

更新详情:https://github.com/pnpm/pnpm/releases/tag/v7.0.0

4. Node v18.1.0 正式发布

5月3日,Node v18.1.0 正式发布。其主要更新如下:

  • doc : 将 @kuriyosh 添加为协作者;
  • lib,src : 实现 WebAssembly Web API;
  • test_runner : 添加初始 CLI 运行器;
  • worker : 将 hasRef() 添加到 MessagePort。

更新详情:https://nodejs.org/en/blog/release/v18.1.0/

开源趋势

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

1. Spacedrive

Spacedrive 是一个开源的跨平台文件管理器,由用 Rust 编写的虚拟分布式文件系统 ( VDFS ) 提供支持。在一个地方组织多个设备上的文件。从云服务到离线硬盘,Spacedrive 将设备的存储容量和处理能力整合到一个个人分布式云中,使用起来既安全又直观。

Star⭐:8.4 k

本周Star⭐️:2082

Githubhttps://github.com/spacedriveapp/spacedrive

2. Wireit

Wireit 可以用来升级 npm 脚本,使它们更智能、更高效。

Star⭐:3.1 k

本周Star⭐️:851

Githubhttps://github.com/google/wireit

3. tmagic-editor

tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目,意在提供一个供开发者快速搭建可视化搭建平台的解决方案。

Star⭐:1 k

本周Star⭐️:715

Githubhttps://github.com/Tencent/tmagic-editor

4. Nginx Proxy Manager

nginx-proxy-manager 是一个用于管理 Nginx 代理主机的 Docker 容器,具有简单、强大的界面。其特点如下:

  • 基于Tabler的美观安全的管理界面;
  • 无需了解 Nginx 即可轻松创建转发域、重定向、流和 404 主机;
  • 使用 Let's Encrypt 的免费 SSL 或提供您自己的自定义 SSL 证书;
  • 主机的访问列表和基本 HTTP 身份验证;
  • 高级 Nginx 配置可供超级用户使用;
  • 用户管理、权限和审计日志。

Star⭐:7.4 k

本周Star⭐️:643

Githubhttps://github.com/NginxProxyManager/nginx-proxy-manager

5. JSON Hero

JSON Hero 提供了包含额外功能的干净美观的 UI,使阅读和理解 JSON 文件变得容易。

  • 以任何方式查看 JSON:列视图、树视图、编辑器视图等;
  • 自动推断字符串的内容并提供有用的预览;
  • 创建可用于验证 JSON 的推断 JSON 模式;
  • 快速扫描相关值以检查边缘情况;
  • 搜索您的 JSON 文件(键和值);
  • 可使用键盘;
  • 具有路径支持的可轻松共享的 URL。

Star⭐:2.5 k

本周Star⭐️:558

Githubhttps://github.com/jsonhero-io/jsonhero-web

工具推荐

下面来推荐几个热门的颜色选择器组件。

1. React Color

React Color提供了 13 种不同的颜色选择器,可以模拟流行网站和应用程序(如 GitHub、Photoshop、Chrome 和 Twitter)的 UI。不仅如此,还可以使用不同的组件来创建自定义颜色选择器。

GitHub:https://github.com/casesandberg/react-color

2. Vue Color

Vue Color 是一个适用于 Sketch、Photoshop、Chrome 等的 Vue (Vue2.0)颜色选择器。

GitHub:https://github.com/xiaokaike/vue-color

3. iro.js

iro.js 是一个用于 JavaScript 的模块化颜色选择器组件,支持多种颜色格式。

GitHub:https://github.com/jaames/iro.js

4. Colorjoe

colorjoe 是一个具有触控和 AMD 支持的可扩展颜色选择器。可以通过CSS 定义其实际尺寸和布局。通过这种方式,该组件非常适合响应式布局。

GitHub:https://github.com/bebraw/colorjoe

5. Huebee

Huebee 是一个一键式颜色选择器。它提供了友好的界面,用于显示一组颜色。颜色选择器会要求从一个点到另一个点的渐变中选择颜色。另外,Huebee 会根据设置的参数显示一组特定的颜色。

GitHub:https://github.com/metafizzy/huebee

6. React Colorful

React Colorful 是一个用于 React 和 Preact 应用程序的小型颜色选择器组件,使用 hooks 和函数组件构建。它使用严格的 TypeScript 编写,具有 100% 的测试覆盖率,压缩后仅 2,8 KB(比react-color轻小13 倍)。

GitHub:https://github.com/omgovich/react-colorful