如何通过源代码探索Vite

热门技术勘探工
183 阅读4分钟

Exploring Vite Through its Source Code

你可能已经听说了，前端生态系统有一个新的酷孩子：一个叫做Vite的构建工具。虽然它是由Evan You（他也创建了Vue.js）创建的，但它并不针对框架，所以你可以将Vite用于Vue.js、React.js、Svelte.js，甚至是vanilla JavaScript。

在这篇文章中，我们将在这里已经发表的概述的基础上进行扩展，并检查Vite的源代码，以提取一些关于其内部架构的洞察力。特别是，我们将探讨Vite的模板和插件系统。到最后，你会对模板和插件的区别有更好的理解，以及Vite的核心系统是如何与插件连接的。

现在不再多说，让我们用Vite创建一个应用程序。

用Vite创建一个应用程序

为了这个演示的目的，我们将使用这个命令来创建一个Vue项目。

npm init vite@latest

(有了@latest ，就能确保你在这个新创建的项目里做npm install ，都能得到最新的版本。)

顺便提一下，你可能已经看到了init 命令的废弃版本。

@vitejs/create-app is deprecated

正如你所看到的，弃用警告告诉我们要使用npm init vite 。

这个新命令基本上是一个速记。

npx create-vite

这将安装和运行一个叫做create-vite 的工具，它给你提示你要创建什么样的项目。你将选择一个名字和一个模板。

为你的项目选择一个你喜欢的名字。

Select a project name

并选择一个模板来使用。

Select a template

出于探索的目的，你可以选择vanilla 或vue 。

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

探索Vite的源代码

首先，进入Vite的GitHub页面：github.com/vitejs/vite。

Vite's GitHub repo

然后进入packages 文件夹。

Inside the packages folder

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

create-app 是负责最初的命令，上面写着 "已废弃"。我们在这里感兴趣的是 这个文件夹。它承载了所有用于创建项目的内置模板。create-vite

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

现在是探索模板和插件之间区别的好时机，以及它们如何在构建工具工作流程中一起工作。

模板

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

在packages/create-vite 文件夹内，你应该看到有一打template-* 文件夹。

📁**/packages/create-vite**

Inside the create-vite folder

正如你所看到的，Vite支持各种不同框架的模板（以及它们的TypeScript对应物）。

你可以在create-vite 提示中选择vanilla 。

Select a template

如果你选择vanilla，它基本上会把packages/template-vanilla 文件夹中的文件克隆为你的新项目。

📁/packages/template-vanilla

Inside the template-vanilla folder

你也可以在提示中选择vue 。

Select vue from the prompt

如果你选择vue ，它将克隆packages/template-vue 文件夹中的文件作为你的新项目。

📁/packages/template-vue

Inside the template-vue folder

从vue模板生成的项目将具有你所期望的Vue项目的标准文件夹结构。

所以这就是模板。现在让我们来谈谈插件。

插件

正如我提到的，Vite并不针对框架。由于它的插件系统，它能够为各种框架创建项目。

开箱即用，Vite为Vue、Vue with JSX和React提供插件。

你可以在packages 文件夹中检查每个内置插件的代码。

📁/packages

Various plugins

注意：plugin-legacy 是针对不支持本地ESM的传统浏览器。

这些插件最常见的使用方式是通过其相应的模板。例如，Vue模板需要使用Vue插件，而React模板则需要使用React插件。

作为赤裸裸的选择，用vanilla模板创建的项目不知道如何服务Vue的单文件组件（SFC）文件。但用Vite创建的Vue项目将能够处理SFC文件类型。而且它还知道如何将整个Vue项目捆绑起来用于生产。

如果我们比较一下Vue模板和vanilla模板各自的package.json 文件，我们就可以很容易地看出这一点。

📁/packages/template-vanilla/package.json

Vanilla package.json

📁**/packages/template-vue/package.j**son

Template-vue package.json

template-vue 包含了 的所有内容，外加三个额外的包。template-vanilla

📁/packages/template-vue/package.json

"dependencies": {
    "vue": "^3.2.6" // 1
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.1", // 2
    "@vue/compiler-sfc": "^3.2.6", // 3
    "vite": "^2.5.4"
  }
  • vue 是在运行时运行的主库
  • @vitejs/plugin-vue 是负责服务和捆绑Vue项目的插件
  • @vue/compiler-sfc 是编译SFC文件时需要的

所以可以说，这三个包让Vite项目有能力理解Vue代码。@vitejs/plugin-vue 包是连接Vite的核心系统和Vue.js框架的 "桥梁"。

继续阅读SitePoint上的《通过源代码探索Vite》。

avatar
文章
阅读
粉丝