什么是Vite？什么是构建工具？在Docker上构建React X打字环境的步骤

谢谢您的辛勤工作。

正如我认为新年刚刚开始的那样，我对2月底的系统开发部门感到震惊。

这次，我想总结我工作中使用的“ Vite”。

当我触摸源代码时，我不会经常看到它，但是我偶尔使用Vite，并且由于我在不理解功能和机制的情况下使用了它，因此我会以新的学习体验将其留在博客上。

什么是Vite？

它于2020年首次发布，是一种旨在提供快速，精益发展的体验的构建工具，并发音为“ Vito ”。 （请参阅官方网站）

（请阅读有关构建工具的信息，因为稍后有一些这样的事情要解释）

它提供一个快速的开发环境并按需加载模块，因此，每当您更改源代码时，它都会反映在浏览器中。

另外，更新时，您只能更新更改，而不是整个页面。

它似乎是专门为JavaScript应用程序设计的构建工具。

什么是构建工具？

首先，近年来，我们的网络开发相对较大，我们没有手动将JavaScript文件加载到HTML中。 （非常感谢您，也许过去有必要加载它）

此外，随着开发项目的增长，JavaScript和CSS文件增加，在开发过程中，这些文件被分为角色，以提高可重复性和可读性。

但是，如果模块取决于另一个模块，则浏览器将需要正确加载执行顺序，并且可能会导致HTTP请求加载这些文件，这可能会降低显示速度。

构建工具是解决这些问题的原因。

角色包括束，压缩和跨载。

1. 捆绑：减少HTTP请求的数量并通过将多个文件组合在一起来提高加载速度
2. 压缩：删除不必要的空间和评论以减少文件大小
3. transpile：浏览器无法理解诸如TypeScript之类的语言，因此将其转换为JavaScript。

其他流行的构建工具似乎是构建WebPack和TSC Cli Esbuild等工具。

与其他构建工具的差异

• 它使用本机ES模块，并允许您通过单独管理模块在需要时将文件分开并加载文件。
• 它执行按需处理以在浏览器要求时仅转换所需的模块，从而在开发环境中特别方便。
• 传统构建工具在启动开发服务器时将整个项目捆绑在一起，但不在VITE中。

安装并查看Vite

这次，在Docker上构建

１．创建一个项目目录并在其下创建SRC目录

2．定义dockerfile和docker-compose.yml（*首先在doker-compose.yml文件中注释卷）

Dockerfile

docker-compose.yml

3．运行“ docker撰写构建”以创建图像并运行“ docker composs -d”

4．转到SRC目录，然后运行“ Docker CP Blog-Vite-1：/app/src/viteapp/。”

5．在docker -compose.yml中删除量，然后再次运行“ docker up -d”以应用音量设置。

访问相应的URL，这一切都完成了！呢呢就像我想的那样，我因无法连接而生气。

在进行了一些研究之后，我发现官方的Vite文档指出，默认情况下，只有“ Localhost”倾听并聆听公共地址，我必须将以下内容添加到“ vite.config.ts”文件中。
参考材料： https：//ja.vite.dev/config/server-options.html#server-host

添加上述内容后，我再次访问了URL，并安全显示了！

就这样。

这次，我介绍了Vite和环境构建的概述，但是如果有机会，我想实施Crud处理并撰写文章。

非常感谢。