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

17,464 阅读6分钟

发布时间:   2022.12.10

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

同步发布:   Github公众号(依赖注入)知乎掘金


行业资讯

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,首次引入了面向对象程序设计语言的基本概念:对象、类、继承、虚拟量、多线程等,这两位先驱先后获得诺伯特·维纳奖、罗辛奖、约翰·冯诺依曼奖、图灵奖等众多奖项。


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