为什么我选择create-vite@4.2.0

DevinJohw2025-04-01 17:04

最近在学习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