为什么我选择create-vite@4.2.0

最近在学习React Client Side Render,需要使用React18。为什么是React18呢,因为React19中引入了大量的Server Side Render的部分,我觉得Server Side Render也会是未来React的主流,但是虽然Server Side Render可能未来成为主流,但是还是有很多功能必须通过client side render实现,比如登录状态,主题偏好的持久化这些功能,所以对于React开发者来说,Client Side Render是必备的技能。

关于Client Side Rendering,Code with Mosh给了一个很好的instructions,如果有实力可以直接购买他的课程(我买了一个月,之后没实力就没买了),如果囊中羞涩可以去B站免费看或者在咸鱼上购买他课程,咸鱼的链接就不给了一搜就有。

Mosh教程中使用的是create vite 4.1.0版本,这个版本有两个out-of-box的功能,很好用,而且我发现这两个功能在create-vite 4.2.0后的版本中没有了(或者需要配置,我没仔细研究过):

node_modules中的文件自动补齐

这里我想引入bootstrap中的某个文件,create-vite@4.2.0之前的版本支持自动补齐,之后的版本如create-vite@4.3.0就不支持了,像这样:

我在bootstrap后输入/没有任何的补齐提示。

implicit index.ts导入

比如在scr/utils/index.t有这段代码:

typescript 复制代码
function printHello() {
  console.log('hello')
}

export default printHello

在create-vite@4.2.0之前的版本,支持在自动导入的时候不用包含index.ts,之后的版本就变成explicit的了。 比如,在main.ts文件中我要import这个printHello:

自动导入implicit的importindex.ts中的变量,很酷的功能。而在create-vite@4.3.0中,自动导入就会加上这个index.ts,像这样:

可以看到,这里的自动补齐把index.ts文件名加上了。

总结

上面这两个功能,我很喜欢,加上我要写React18,所以如果你也要写React18的项目,使用create-vite@4.2.0创建项目是不错的选择,可以使用下面的命令:

bash 复制代码
pnpm create vite@4.2.0 --template react-ts
相关推荐
G等你下课3 小时前
你还在 import { Button } from './components'?
前端·react.js
挽淚3 小时前
AI对话+React 项目实战(半成品)
javascript·react.js
PineappleCoder3 小时前
React函数组件的"生活管家"——useEffect Hook详解
前端·react.js
G等你下课3 小时前
React 中的 Diff 算法:理解虚拟 DOM 的高效更新机制
前端·react.js
PineappleCoder3 小时前
当 useContext 牵手 useReducer,我悟了前端状态管理的「丝滑密码」
前端·react.js
十盒半价3 小时前
React 面试必问:JSX 中 map 的 key 为什么不能随便写?一文吃透原理与最佳实践
前端·react.js·trae
WildBlue3 小时前
React 路由守卫:前端安全与控制的魔法钥匙 🗝️
前端·react.js·前端框架
OEC小胖胖4 小时前
渲染篇(一):从零实现一个“微型React”:Virtual DOM的真面目
前端·react.js·前端框架·web
德育处主任Pro4 小时前
『React』条件渲染的7种方法
前端·react.js·前端框架
lichenyang45316 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript