通过其源代码探索VITE

Evan，您的创新构建工具，是框架 - 敏捷的，支持vue.js，react.js，svelte.js和plain javaScript。本文深入研究了表面级别的概述，探索Vite的源代码以了解其模板和插件系统。我们将阐明模板和插件之间的区别，并检查Vite的Core与插件之间的相互作用。>

密钥概念：

vite的框架独立性源于其模板和插件体系结构，从而使项目生成各种框架。

• > Vite利用主要捆绑和Esbuild的汇总，用于模块的兼容性和优化，从而产生了出色的速度。
• 创建一个Vite项目涉及使用
>工具选择项目名称和模板。 特定于框架的模板依赖于相应的插件，该插件是使用基于钩子的体系结构构建的。
• create-vite
>使用VITE构建Vue应用

为了说明，让我们创建一个vue项目：

（使用

>确保您始终拥有最新版本。

>此启动

npm init vite@latest

，提示您获取项目名称和模板。选择一个名称，然后选择“香草”或“ vue”作为模板。

> @latest

npx create-vite

create-vite

>探索vite源代码：

> >导航到Vite的github存储库（github.com/vitejs/vite）并检查

>目录。

（已弃用）和是关键。 包含内置的项目模板。 您还可以找到用于内置插件的插件目录。

>

packages>模板与插件：create-appcreate-vite create-vite

模板：新项目的入门代码。 它们位于>内，它们提供了特定于框架的文件结构（例如，

）。

• packages/create-vite template-vue> template-vanilla插件：
启用Vite的框架不可知论。 在

>目录（例如，

，）中找到，它们处理特定于框架的处理。

>

• 模板经常使用插件。 例如，VUE模板需要@vitejs/plugin-vue插件来处理VUE单文件组件（SFCS）。

  比较

  >和package.json的文件template-vanilla> template-vue揭示了这种依赖性：

  

  

  template-vue包括vue，@vitejs/plugin-vue，@vue/compiler-sfc，启用Vue支持。 @vitejs/plugin-vue>充当Vite的核心与Vue.js.

  之间的桥梁

  vue插件：

  @vitejs/plugin-vue处理Vue项目捆绑，通过钩子委派汇总。 这些挂钩定义了插件代码执行的点。

  packages/plugin-vue/src/index.ts的摘要显示挂钩实现：

  >

  npm init vite@latest

  > vite的核心（例如，packages/vite/src/node/build.ts）使用汇总，并入这些插件。>

  汇总与Esbuild： Vite 使用汇总（主要捆绑）和Esbuild（模块转换和优化 - “依赖性预捆绑”）。 Esbuild的GO速度使其非常适合这一关键绩效任务。

  摘要：

  >此探索揭示了Vite的体系结构：管理模板；使用基于挂钩的系统的框架特定插件通过汇总与Vite的Core集成，并通过Esbuild优化模块处理。 这种组合提供了Vite的速度和灵活性。

  >

  create-vite常见问题（常见问题解答）：

  > （原始常见问题解答已经写得很好，不需要更改。

  以上是通过其源代码探索VITE的详细内容。更多信息请关注PHP中文网其他相关文章！