Vite系列课程 | 4Vite 脚手架和 Vite，5Vite 启动项目初体验

4. 你必须要理解的 Vite 脚手架和 Vite

4.1 Vite 项目搭建过程：从 create-vite 开始

在 Vite 官网提供的教程中，推荐使用以下命令来搭建 Vite 项目：

npm create vite@latest my-vite-project --template vue # 或者其他模板，例如 react, vue-ts, etc.
# 或者使用 yarn / pnpm
yarn create vite my-vite-project --template vue
pnpm create vite my-vite-project --template vue

这个命令背后发生了什么？

1. 执行 create vite： 这会直接调用 create-vite 工具。create-vite 是 Vite 官方提供的脚手架工具，用于快速创建 Vite 项目模板。
2. 选择模板： create-vite 会提示你选择一个项目模板，例如 vue、react、vue-ts、react-ts、vanilla、vanilla-ts 等。这些模板预配置了相应框架或技术的必要设置。
3. 生成项目： create-vite 会根据你选择的模板，在指定目录下生成一个包含基本项目结构的文件夹，包括必要的配置文件、依赖和示例代码。

4.2 Vite 与 create-vite 的关系：分工明确

很多人容易混淆 Vite 和 create-vite 的概念。它们之间的关系非常重要：

• create-vite 是脚手架： 它是一个项目初始化工具，负责搭建项目的基础结构，类似于 Vue CLI 或 Create React App。它并不参与实际的代码构建和打包过程。
• Vite 是构建工具： Vite 才是负责代码编译、热更新、打包等核心构建任务的工具。

create-vite 的作用是帮助我们快速创建一个已经集成了 Vite 和相关配置的新项目，让我们能够立即开始开发，而无需手动配置各种依赖和工具。

类比： 就像购买房子一样，create-vite 相当于提供精装修的样板房，你只需要拎包入住；而 Vite 则是房子本身的框架和各种基础设施，保证房子的正常运行。

4.3 Vite 项目搭建的类比：毛坯房与精装修

• 毛坯房（手动搭建）： 你需要自己安装 Vite、Vue/React 等框架、PostCSS、Babel 等各种依赖，并手动配置它们之间的关系。这个过程比较繁琐，需要对各种工具的配置有深入的了解。
• 精装修房（create-vite）： create-vite 提供的模板就像是精装修的房子，已经为你准备好了一切，你只需要根据自己的需求进行一些简单的修改和添加代码即可。

4.4 Vue 团队的目标：简化开发流程

Vue 团队开发 create-vite 的目标是简化开发者的项目搭建过程，降低上手 Vite 的门槛。通过提供预配置的模板，开发者可以更快地开始项目开发，而无需花费大量时间在配置构建工具上。

虽然 create-vite 提供了便捷的快速搭建方式，但在学习 Vite 时，我们仍然需要深入理解 Vite 的工作原理和核心概念，才能更好地利用它的优势。

4.5 总结：各司其职，相辅相成

• create-vite 是一个脚手架工具，用于快速创建预配置的 Vite 项目。
• Vite 是一个构建工具，负责项目的编译、热更新和打包等核心任务。
• create-vite 内置了 Vite 和相关的最佳实践配置，方便开发者快速启动项目。
• Vite 更关注现代开发体验和构建效率，create-vite 则提供了快速搭建的便利。

理解 create-vite 和 Vite 之间的关系，有助于我们更清晰地了解项目搭建过程中使用的工具及其职责。

5. Vite 启动项目初体验

5.1 开箱即用 (Out of Box)：快速上手

Vite 的一个显著特点是“开箱即用”。通过简单的命令，Vite 就能自动配置好项目所需的一切，避免了繁琐的手动配置。

5.2 ES Module 导入的路径问题：历史原因

在 ES Module 中，导入资源的路径通常使用相对路径 (./foo.js) 或绝对路径 (/src/bar.js)。

为什么 ES Module 不默认搜索 node_modules 呢？这主要是历史原因：

• 早期 JavaScript 没有模块系统。
• node_modules 是 Node.js 特有的目录结构，最初并没有纳入 ES Module 的规范中。
• 自动搜索 node_modules 可能存在安全风险和性能开销。

现在，浏览器和 Node.js 都支持从当前文件目录向上查找 node_modules 目录来解析模块导入。

5.3 Vite 解决路径问题：简化导入

Vite 针对 ES Module 的路径问题提供了解决方案：

• node_modules 自动处理： 当你导入一个不以 ./ 或 / 开头的模块名时（例如 import { vue } from 'vue'），Vite 会自动从 node_modules 中查找该模块并正确解析。

这使得在 Vite 项目中导入 npm 包变得非常简单，无需手动指定路径。

5.4 Vite 如何提升开发体验：快速、高效

• 即时响应： Vite 采用快速的热更新机制 (HMR)，修改文件后几乎立即就能在浏览器中看到效果，极大地提升了开发效率。
• 无缝集成： Vite 自动处理 node_modules 的模块查找和编译，开发者只需关注业务代码，无需关心工具链的细节。

5.5 总结：专注于代码编写

Vite 的“开箱即用”特性和对模块导入路径的优化，让开发者能够更专注于编写代码，而不是花费大量时间在配置和构建工具上。

5.6 补充

• 生产环境： Vite 在生产环境下使用 Rollup 进行打包，生成优化的静态资源。虽然开发阶段不需要，但生产构建仍然是 Vite 的重要组成部分。所以安装的时候使用 yarn add vite -D 或者 npm install vite --save-dev (或者 pnpm add vite -D)，将其作为开发依赖安装。
• 模板选择： 使用 create vite 时，选择合适的模板非常重要，这能为你省去大量配置时间。