只需 5 分钟即可部署您的第一个 Vite React 项目
只需 5 分钟即可部署您的第一个 Vite React 项目
介绍
希望你喜欢阅读我的初学者文章—— “了解 Vite Js 的基础知识以及为什么要在项目中使用它。” 如果没有，我假设你已经对 Vite 有一个扎实的掌握。您现在一定很高兴尝试这个新的 Webpack，这是最新的技术改进。
在本文中，我们将在我们的 React Js 项目中介绍一个非常流行的构建工具，称为 Vite。
为什么选择维特？
Vite 是一个构建工具，旨在 加快现代 Web 项目的学习者开发。 众所周知，创建一个 React 项目需要一些时间，并且会减慢开发过程。但：-
- 快的 支持极快的热模块更换 (HMR) 运行您的项目，Vite 将使您的项目比平时快得多。
- 还 允许我们选择什么框架 我们想和它一起工作。
让我们看看如何使用 Vite 创建下一代项目。
开始你的第一个 Vite 项目：脚手架
所以要创建一个Vite应用程序。打开您的代码编辑器（Visual Studio）并在其中打开一个新终端并说：
使用 NPM：
$ npm 创建 [[email protected]](/cdn-cgi/l/email-protection)
用纱线：
$纱创建vite
键入您的项目名称。按回车键默认名称为 vite-项目
选择框架——React
选择一个变体——反应
$ cd vite-项目
$ npm 安装
$ npm 运行开发
您的项目当前在 localhost:3000 处于活动状态。
注意事项
- 你可能已经注意到，在一个 Vite 项目中， index.html 清楚地显示 而不是被置于公众之中。这是 故意做的 ;在开发您的应用程序时， Vite 充当服务器，您的入口点是 index.html。
- Index.html 作为源代码处理，是 Vite 模块图的一部分。它解决了
<script type="module" src="..."> - 排队
<script type="module">和通过引用的 CSS也可以从 Vite 特有的功能中受益。也不需要特殊的%PUBLIC URL% 占位符，因为 index.html 内的 URL 会自动重新定位。
结论
您可以像使用标准静态文件服务器一样编写代码（只是功能更强大！），因为源代码中的静态 URL 将使用项目根目录作为基础进行解析。 Vite 可以用于基于单存储库的架构中，因为 Vite 可以处理解析到根文件系统之外的位置的依赖项。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
