---
url: https://sugarat.top/weekly/2023-07-22.md
description: >-
  ① killport - 优雅的结束占用端口的进程 ② 两个值得关注的stage3的提案 ③ Chrome 115 有哪些值得关注的新特性？ ④
  pkg-size - 在线分析npm包大小 ⑤ pnpm 下载量远超 yarn ⑥ Dan 即将从Meta React团队离职 ⑦ Meta 开源
  Llama 2 大模型
---

# 视野修炼第46期

欢迎来到第 46 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

**​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）**

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. killport](https://github.com/jkfran/killport) - 优雅的结束占用端口的进程

> 一个 Rust 语言写的命令行程序，可以杀死占用指定端口的进程。

通常我们在开发过程中，会遇到端口被占用的情况

常规方式需要如下两步(① 查找占用端口的进程 ② 杀死进程)

![](https://img.cdn.sugarat.top/mdImg/MTY5MDAzNTY3NzU4NA==690035677584)

使用 killport 可以一步到位，直接杀死占用端口的进程

![](https://img.cdn.sugarat.top/mdImg/MTY5MDAzNTgwNzI0NQ==690035807245)

工具安装也非常简单

```sh
curl -sL https://bit.ly/killport | sh
```

非常实用的工具，推荐大家使用，杠杠的提效

### 2. 两个值得关注的stage3的提案

![](https://img.cdn.sugarat.top/mdImg/MTY5MDAzNjIxNTIxMg==690036215212)

1. **Promise.withResolvers**

很多场景下我们希望在 `new Promise` 外部访问 `resolve` 和 `reject`，当下的方式是通过定义外部变量的形式解决

```js
let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
})

// 其它逻辑里调用 resolve 和 reject
```

我们可以使用 `Promise.withResolvers` 来更优雅的解决这个问题

```js
const { promise, resolve, reject } = Promise.withResolvers();
```

2. **Array Grouping**

从名称就很容易看出来是做数组分组的，目前我们大部分情况是通过 `reduce` 来实现分组

```js
const array = [1, 2, 3, 4, 5];
array.reduce((acc, num) => {
  const key = num % 2 === 0 ? 'even': 'odd';
  acc[key] = acc[key] || [];
  acc[key].push(num);
  return acc;
}, {});
```

通过这个提案可以更优雅的实现

```js
const array = [1, 2, 3, 4, 5];

Object.groupBy(array, (num, index) => {
  return num % 2 === 0 ? 'even': 'odd';
});
// =>  { odd: [1, 3, 5], even: [2, 4] }
```

大家现在也可在生产中通过 core-js 的 polyfill 实现使用这个特性

## 🔧开源工具&技术资讯

### [3. Chrome 115 有哪些值得关注的新特性？](https://mp.weixin.qq.com/s/2-4wqjdn32sKig1UFoKOJA)

扫了一眼，感觉 CSS display 多值语法挺有意思

允许分别指定内外两个 display 类型。

```css
/* 创建一个块级容器，具有 Flex 子元素。 */
.box {
    display: block flex;
}

/* 创建一个内联容器，具有 Flex 子元素。 */
.box2 {
    display: inline flex;
}
```

### [4. pkg-size](https://pkg-size.dev/) - 在线分析npm包大小

基于 WebContainers ，在浏览器环境下运行Node安装npm包，实现的包大小在线分析工具

![](https://img.cdn.sugarat.top/mdImg/MTY5MDAzNzczODA1NA==690037738054)

### [5. pnpm 下载量远超 yarn](https://npmtrends.com/pnpm-vs-yarn)

![](https://img.cdn.sugarat.top/mdImg/MTY5MDAzNzkwMTQ2MQ==690037901461)

2023了，除了迁移不动老项目，大部分项目都使用上pnpm了

又节省磁盘空间，安装依赖又快

### [6. Dan 即将从Meta React团队离职](https://twitter.com/dan_abramov/status/1682029195843739649)

**Dan Abramov**：`React.js 核心开发者`、`Redux 作者`

![](https://img.cdn.sugarat.top/mdImg/MTY5MDAzODE2MTY3OA==690038161678)

## 🤖AI工具&资讯

### [7. Meta 开源 Llama 2 大模型](https://ai.meta.com/llama/)

![](https://img.cdn.sugarat.top/mdImg/MTY5MDAzOTAzMTI3OQ==690039031280)

笔者目测未来2周，就会有平台提供免费试用此模型的服务

## 😛趣图

![](https://img.cdn.sugarat.top/mdImg/MTY5MDAzODM1MTc0Ng==690038351746)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://www.yuque.com/chencheng/mdh-weekly) - 前端资讯和分享
* [童欧巴：前端食堂](https://github.com/Geekhyt/weekly) - 你的前端食堂，吃好每一顿饭
* [rottenpen：FE News](https://rottenpen.zhubai.love/) - 分享前端，生活
* [知识星球：咲奈的平行时空](https://wx.zsxq.com/dweb2/index/group/15552285284822) - 前端前沿技术、资讯、方法论分享