前端技术双周刊 2022-12-10：Vite 正式发布 4.0

[olivewind]

发布时间：   2022.12.10

本周内容：   行业资讯x2、开源项目x6、在线教程x1、工具推荐x2、行业先驱x1

同步发布：   公众号（依赖注入）、知乎、掘金

---

行业资讯

Vite 正式发布 4.0

Vite 是一个全新的前端开发与构建工具，区别于传统工具的设计，基于 unbundled 的设计让它的拥有极速的服务启动后和热更新。目前 Vite 在 npm 每周下载超过 250 万次，在昨日，Vite 正式发布了 4.0 版本，主要有如下更新：

1. 升级至 Rollup 3.x

Rollup 3.0 在今年 10 月份正式发布，具体更新可以参考更新日志。

2. 为 React 提供多个插件选择

Vite 团队认为 SWC 现在是 Babel 的成熟替代品，尤其是在 React 项目中。SWC 的 React Fast Refresh 实现比 babel 快很多，对于一些项目来说，它现在是一个更好的选择。从 Vite 4 开始，将官方提供两个插件以供选择。

• @vitejs/plugin-react：基于 esbuild 和 Babel 的插件，以较小的包占用空间和 Babel 的灵活性实现快速 HMR。
• @vitejs/plugin-react-swc：基于 SWC 的插件，在构建过程中使用 esbuild，但在开发过程中将 Babel 替换为 SWC。对于不需要非标准 React 扩展的大型项目，冷启动和 HMR 可以明显加快。

3.浏览器兼容性

构建 Safari14 默认以更广泛的 ES2020 兼容性为目标。这意味着现在可以使用 BigInt，并且不再转译 nullish 合并运算符。如果您需要支持旧版浏览器，可以使用 @vitejs/plugin-legacy。

4. CSS 作为字符串导入

在 Vite 3 中，导入 .css 文件的默认导出可能会导致 CSS 的双重加载。

import cssString from './global.css'

这种双重加载可能会发生，因为 .css 将生成样式文件，并且 CSS 字符串也可能会被应用程序代码使用。从 Vite 4 开始，.css 默认导出已被弃用，可以使用 ?inline 进行行内导入，并且不会生成样式文件。

import stuff from './global.css?inline'

5. 环境变量

Vite 现在使用 dotenv16 和 dotenv-expand9（之前是 dotenv14 和 dotenv-expand5）。如果变量值包含 # 或 `，则需要用引号将它们括起来。

-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"

6. 其它更新

• CLI 增加 h 命令以查看全部
• 预构建支持 patch-package
• 更简洁的构建日志输出
• 改进 SSR 期间的错误信息
• 缩小包体积，比 Vite3 小 23%

npm 上线安全相关重要功能

1. 细粒度 Token

npm 此前一直无法创建具有最小特权模型的令牌，以限制意外或故意滥用令牌的影响。新的细粒度访问令牌允许你细粒度控制访问权限，包括：

• 控制有效时间
• 控制 IP 白名单
• 控制具体组织或具体包的访问权限

2. 在线查看代码

在线查看代码此前一直是一项付费功能，多年来一直供团队和专业用户使用，现在 npm 将其改进并开放给所有人使用。这是一个令人激动的进步，因为在此之前，开发者都需要安装到本地之后才可以查看 npm 实际安装包代码的构成，然而因为有 npm install 钩子的存在使得安装过程并不是安全的。

开源项目

Rough.js（17.7k star）

一个小型 (<9 kB) 图形库，可让您绘制草图、类似手绘的风格。该库定义了绘制直线、曲线、圆弧、多边形、圆和椭圆的基元。它还支持绘制SVG 路径。

wired-elements（9.2k star）

手绘风格、粗略外观的 web component 组件库。元素的绘制具有足够的随机性，没有两个效果图是完全相同的，就像两个独立的手绘形状一样。值得一提的是该项目基于 Rough.js 和 Lit 构建。

react-spring（24.6k star）

一个基于弹簧物理学的 React 动画库，可以帮助你构建栩栩如生的应用。它非常灵活，几乎涵盖了所有的 UI 动画需求，并提供了 render props 和 react hooks 两种不同的 API。

vanilla-extract（6.9k star）

一个使用 TypeScript 作为“预处理器”的零运行时 CSS 框架，就像 Less 和 Sass 一样在构建时生成所有样式。

GoView（4.8k star）

一个使用 Vue3 搭建的低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可完成业务需求，它的技术栈为：Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS。

react-use-wizard（368 star）

一个使用 React Hooks 构建的分步器，很简单，聚焦在逻辑上，没有任何 UI 限制，你可以使用在任何分步 UI（比如分步表单）中。

在线教程

现代 JavaScript 教程

该教程以最新的 JavaScript 标准为基准。通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。

工具推荐

公版影像典藏计划

收录 1894 -1967 年的影像资料，包含电影、动画片、纪录片、珍贵史料四大类。除了影像本身，还对其进行多维度汇编，如：撰写词条、专业评论、收集电影或相关人物的精彩周边、提供参考文献等。

千亿像素看世界

一座城一幅图，打造世界城市入口，该工具可以带你身临其境一般地探索世界和中国个大城市。

行业先驱

克利斯登·奈加特

克利斯登·奈加特（1926年8月27日－2002年8月10日），挪威计算机科学家，社会活动家，冯·诺伊曼奖和图灵奖获得者，Simula 的创始人，面向对象技术的先驱。

克利斯登·奈加特与奥利-约翰·达尔一道开发了最早的面向对象的程序设计语言 SIMULA-I（1961年—1965年）和 SIMULA-67，首次引入了面向对象程序设计语言的基本概念：对象、类、继承、虚拟量、多线程等，这两位先驱先后获得诺伯特·维纳奖、罗辛奖、约翰·冯诺依曼奖、图灵奖等众多奖项。

---

本周素材由达观数据钟慎恩、赵卫红、沈琬婷、陈泳宏、苏玉春等同学提供。