博客站

自定义 Vite 插件可以通过定义一个包含一系列钩子函数的对象来实现。Vite 插件基于 Rollup 的插件机制，因此大多数 Rollup 插件钩子也可以在 Vite 中使用。以下是自定义 Vite 插件的详细步骤和示例：

1. 插件的基本结构

• 插件名称：每个插件必须有一个唯一的 name 属性。
• 钩子函数：插件可以包含多个钩子函数，这些钩子函数会在构建过程的不同阶段被调用。

2. 常用钩子函数

• config：在解析 Vite 配置之前调用。
• configResolved：在 Vite 配置解析完成后调用。
• configureServer：用于配置开发服务器。
• transform：用于转换单个模块的内容。
• buildStart：在构建开始时调用。
• buildEnd：在构建结束时调用。
• generateBundle：在生成最终打包文件时调用。

3. 创建自定义插件

• 示例：创建一个简单的自定义插件，用于在控制台输出构建开始和结束的信息。

  export default function myPlugin() {
    return {
      name: 'my-plugin', // 插件名称
      config(config) {
        console.log('Config resolved:', config);
      },
      configResolved(resolvedConfig) {
        console.log('Config resolved:', resolvedConfig);
      },
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          console.log('Request URL:', req.url);
          next();
        });
      },
      transform(code, id) {
        if (id.endsWith('.custom')) {
          return `export default ${JSON.stringify(code)}`;
        }
      },
      buildStart() {
        console.log('Build started');
      },
      buildEnd() {
        console.log('Build ended');
      },
      generateBundle(options, bundle) {
        console.log('Generate bundle:', bundle);
      },
    };
  }
  

4. 使用自定义插件

• 在 vite.config.js 中配置插件：

  import { defineConfig } from 'vite';
  import myPlugin from './myPlugin';
  
  export default defineConfig({
    plugins: [myPlugin()],
  });
  

5. 插件执行顺序

• 控制插件执行顺序：可以通过 enforce 选项控制插件的执行顺序，可选值有 'pre'（前置）和 'post'（后置）。
• 示例：

  export default defineConfig({
    plugins: [
      {
        ...myPlugin(),
        enforce: 'pre', // 前置插件
      },
      vue(),
    ],
  });
  

6. 插件钩子的详细说明

• config：在解析 Vite 配置之前调用，可以修改配置。

  config(config) {
    console.log('Config resolved:', config);
  }
  

• configResolved：在 Vite 配置解析完成后调用，可以读取最终配置。

  configResolved(resolvedConfig) {
    console.log('Config resolved:', resolvedConfig);
  }
  

• configureServer：用于配置开发服务器，可以添加中间件或监听服务器事件。

  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      console.log('Request URL:', req.url);
      next();
    });
  }
  

• transform：用于转换单个模块的内容。

  transform(code, id) {
    if (id.endsWith('.custom')) {
      return `export default ${JSON.stringify(code)}`;
    }
  }
  

• buildStart：在构建开始时调用。

  buildStart() {
    console.log('Build started');
  }
  

• buildEnd：在构建结束时调用。

  buildEnd() {
    console.log('Build ended');
  }
  

• generateBundle：在生成最终打包文件时调用。

  generateBundle(options, bundle) {
    console.log('Generate bundle:', bundle);
  }
  

示例：完整的自定义插件

以下是一个完整的自定义插件示例，包含多个钩子函数：

export default function myPlugin() {
  return {
    name: 'my-plugin',
    config(config) {
      console.log('Config resolved:', config);
    },
    configResolved(resolvedConfig) {
      console.log('Config resolved:', resolvedConfig);
    },
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        console.log('Request URL:', req.url);
        next();
      });
    },
    transform(code, id) {
      if (id.endsWith('.custom')) {
        return `export default ${JSON.stringify(code)}`;
      }
    },
    buildStart() {
      console.log('Build started');
    },
    buildEnd() {
      console.log('Build ended');
    },
    generateBundle(options, bundle) {
      console.log('Generate bundle:', bundle);
    },
  };
}

总结

自定义 Vite 插件通过定义包含钩子函数的对象来实现，可以在构建过程的不同阶段执行自定义逻辑。通过合理使用插件，可以增强 Vite 的功能，满足不同项目的需求。