通过源代码探索 Vite

在本文中，我们将扩展已在此处发布的概述，并检查 Vite 的源代码以提取有关其内部架构的一些见解。特别是，我们将探索 Vite 的模板和插件系统。到最后，你会更好地理解模板和插件的区别，以及 Vite 核心系统是如何连接到插件的。

现在事不宜迟，让我们用 Vite 创建一个应用程序。

使用 Vite 创建应用

出于本演示的目的，我们将使用以下命令创建一个 Vue 项目：

npm init vite@latest

（拥有者@latest将确保您npm install在这个新创建的项目中进行操作时始终获得最新版本。）

作为旁主，您可能已经看到了该init命令的弃用版本。

如您所见，其用警告告诉我们npm init vite改用它。

这个新命令基本上是以下的简写：

npx create-vite

这将安装并运行一个名为 的工具create-vite，它会提示您正在创建什么样的项目。您将选择一个名称和一个模板。

为您的项目选择一个您喜欢的名称。

并没有选择要使用的模板。

出于探索目的，您可以使用vanilla或vue。

接下来，我们将create-vite通过它在 GitHub 上面的源代码来探索这个工具。

探索 Vite 源代码

首先，访问 Vite 的 GitHub 页面github.com/vitejs/vite。

 

然后进入packages文件夹。

在这里，您可以看到create-app和create-vite。

create-app负责说“已弃用”的原始命令。我们在这里感兴趣的是create-vite文件夹。它托管用于项目创建的所有内置模板。

在packages文件夹内，我们还可以看到一些内置插件的插件文件夹。

现在是探索模板和插件之间差异以及它们如何在构建工具工作流程中协同工作的好时机。

模板

模板应该是一个容易理解的概念：它是新项目的起始代码。

在packages/create-vite文件夹内，您应该会看到十几个template-*文件夹。

/packages/create-vite