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

感谢你的辛勤工作。

感觉新年才刚刚开始，但实际上已经是二月底了，我感到很惊讶。我是系统开发部的Eita。

这次我想总结一下我在工作中用到的一种叫做“Vite”的东西。

我在处理源代码时并不经常看到 Vite，但我偶尔有机会使用它。由于我之前使用它时并没有真正理解它的功能或工作原理，所以我想在我的博客上写写它，以及我目前为止学到的东西。

Vite是什么？

Veeto 于 2020 年首次发布，是一款旨在提供快速、简化的开发体验的构建工具，发音为“ Veeto ”（参见官方网站）。

（关于构建工具，我稍后会解释，所以这里只是把它当作一个例子来理解。）

它提供快速的开发环境，并按需加载模块，因此源代码的更改会立即反映在浏览器中。

此外，更新时，您可以只刷新更改部分，而无需重新加载整个页面。

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

什么是构建工具？

首先，在最近相对大规模的网站开发中，我们不再需要手动将 JavaScript 文件一个一个地加载到 HTML 中。（幸好以前我们不得不这样做。）

此外，随着开发项目的增长，JavaScript 和 CSS 文件的数量也会增加，在开发过程中将这些文件分成功能部分可以提高可重用性并提高可读性。

但是，当一个模块被拆分成多个模块时，如果一个模块依赖于另一个模块，浏览器必须按正确的顺序加载它们，并且必须发出 HTTP 请求来加载这些文件，这可能会降低显示速度。

构建工具是解决这些问题的方案。

其职责包括打包、压缩和转译

1. 打包：将多个文件合并为一个文件可以减少 HTTP 请求的数量，提高加载速度。
2. 压缩：移除不必要的空格和注释以减小文件大小
3. 转译：像 TypeScript 这样的语言会被转换成 JavaScript，因为浏览器无法直接理解它们。

其他流行的构建工具似乎还有 Webpack、tsc CLI、esbuild 和其他构建工具。

与其他构建工具的不同之处

• 它使用原生 ES 模块，通过单独管理模块，您可以拆分文件并在需要时加载它们。
• 它执行按需处理，仅在浏览器请求时转换必要的模块，这使得它在开发环境中特别方便。
• 传统的构建工具在启动开发服务器时会将整个项目打包在一起，但 Vite 不会。

实际上安装 Vite 并显示它

这次我们将在 Docker 上构建一个 React x TypeScript 环境

１．创建项目目录，并在其中创建 src 目录。

2．定义 Dockerfile 和 docker-compose.yml 文件（*首先，注释掉 docker-compose.yml 文件中的卷）

Dockerfile

FROM node:22.13.1 # 设置工作目录 WORKDIR /app/src/viteapp # vite 应用的基本配置 RUN npm install -g create-vite && \ create-vite . --template react-ts --yes # 安装依赖 RUN npm install # 启动服务器 CMD ["npm", "run", "dev"]

docker-compose.yml

networks: vite-net: driver: bridge services: vite: build: context: . dockerfile: ./docker/node/Dockerfile # volumes: # - ./src/viteapp:/app/src/viteapp networks: - vite-net ports: - 5173:5173 tty: true

3．运行“docker compose build”创建镜像，然后运行“docker compose up -d”。

4．进入 src 目录并运行“docker cp blog-vite-1:/app/src/viteapp/ ”。（容器中的目录将在主机端创建副本。）

5．取消注释 docker-compose.yml 中的卷，然后再次运行“docker compose up -d”以应用卷设置。

我以为只要访问那个网址就万事大吉了！结果却出现错误提示，说我无法连接。

经过一番研究，我发现 Vite 官方文档指出，默认情况下它只监听“localhost”，要监听公网地址，我需要在“vite.config.ts”文件中添加以下内容。
参考： https://ja.vite.dev/config/server-options.html#server-host

export default defineConfig({ # 添加以下三行 server: { host: true }, plugins: [react()], })

添加上述内容后，我再次访问该网址，它显示成功了！

就这样。

这次我介绍了 Vite 的概述以及如何设置环境，但如果有机会，我想实现 CRUD 处理并写一篇相关的文章。

非常感谢。