后端开发者也能读懂的 Vite 开发环境启动原理

前端

2024-01-23 21:52:51

手撸 Vite 插件，读完这篇文章，再也不是新手！

Vite 作为当今流行的构建工具，以其闪电般的构建速度和完善的开发体验而备受青睐。但是，对于后端开发者来说，理解 Vite 启动过程及其内部工作原理可能会是一个挑战。

本文旨在用通俗易懂的语言，手把手带你剖析 Vite 的开发环境启动过程，即使是后端开发者也能轻松理解。

揭秘 Vite 的幕后黑手：vite devServer

当我们使用 Vite 运行开发服务器时，它会在后台启动一个名为 vite devServer 的工作进程。这个服务器就像一个默默无闻的管家，负责协调整个开发过程。

vite devServer 内部有一个精心设计的流水线，也就是我们所说的插件系统。这些插件就像一个个关卡，当用户向 Vite 请求资源时，请求会依次经过这些关卡，最终生成响应。

深入插件系统：庖丁解牛

Vite 的插件系统为我们提供了无限的可能，我们可以通过编写插件来扩展 Vite 的功能，定制开发体验。插件的作用就像是在流水线上增加新的关卡，可以对请求进行各种处理。

举个例子，如果你想在每个请求中都打印一个日志，你只需要编写一个简单的插件，在流水线中插入一个打印日志的关卡即可。

手撸 Vite 插件：从小白到大神

现在，让我们动手写一个 Vite 插件吧！

// vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'my-plugin',
      apply: 'serve', // 指定在 "serve" 模式下应用此插件
      transformIndexHtml: {
        // 修改 index.html 文件
        tag: 'body',
        attrs: {
          'data-my-plugin': 'true',
        },
      },
    },
  ],
});