vite 插件钩子详解

import { Plugin } from 'vite';

export default function aliasPlugin(): Plugin {
  return {
    name: 'alias-plugin',
    resolveId(source) {
      // 如果是以 "@/components" 开头的模块路径，则解析为自定义路径
      if (source.startsWith('@/components')) {
        const resolvedPath = source.replace('@', '/src/components');
        return resolvedPath;
      }

      // 对于其他模块，返回 null，交给下一个插件处理
      return null;
    }
  };
}

import { Plugin } from 'vite';

export default function virtualModulePlugin(): Plugin {
  return {
    name: 'virtual-module-plugin',
    resolveId(source) {
      // 如果导入的是虚拟模块 "virtual-module"，返回一个自定义路径
      if (source === 'virtual-module') {
        return 'virtual:/my-virtual-module.js';
      }

      return null; // 其他路径交给 Vite 默认的解析处理
    },

    load(id) {
      // 当 Vite 请求虚拟模块时，提供该模块的内容
      if (id === 'virtual:/my-virtual-module.js') {
        return `export default 'This is a virtual module.';`;
      }
      return null;
    }
  };
}

import { Plugin } from 'vite';
import path from 'path';

export default function customFileTypePlugin(): Plugin {
  return {
    name: 'custom-file-type-plugin',
    resolveId(source) {
      // 假设我们自定义支持 `.txt` 文件的导入
      if (source.endsWith('.txt')) {
        const resolvedPath = path.resolve(__dirname, 'assets', source);
        return resolvedPath;
      }

      return null;
    },

    load(id) {
      // 读取文本文件内容
      if (id.endsWith('.txt')) {
        return `export default ${JSON.stringify('This is a text file.')};`;
      }

      return null;
    }
  };
}

import { Plugin } from 'vite';

export default function virtualModulePlugin(): Plugin {
  return {
    name: 'virtual-module-plugin',

    resolveId(source) {
      if (source === 'virtual-module') {
        return 'virtual:/my-virtual-module.js';
      }
      return null;
    },

    load(id) {
      if (id === 'virtual:/my-virtual-module.js') {
        // 返回虚拟模块的内容
        return `export default 'This is a virtual module.';`;
      }
      return null;
    }
  };
}

import { Plugin } from 'vite';
import path from 'path';
import fs from 'fs';

export default function textFilePlugin(): Plugin {
  return {
    name: 'text-file-plugin',

    resolveId(source) {
      // 如果是以 .txt 结尾的路径，则进行自定义解析
      if (source.endsWith('.txt')) {
        return path.resolve(__dirname, 'src', source);
      }
      return null;
    },

    load(id) {
      // 如果是自定义解析的 .txt 文件，读取文件内容并返回
      if (id.endsWith('.txt')) {
        const content = fs.readFileSync(id, 'utf-8');
        return `export default ${JSON.stringify(content)};`;
      }
      return null;
    }
  };
}

import { Plugin } from 'vite';

export default function modifyJSPlugin(): Plugin {
  return {
    name: 'modify-js-plugin',

    load(id) {
      // 如果是 JavaScript 文件，可以对其进行修改
      if (id.endsWith('.js')) {
        return `console.log('This is modified by the plugin');\n` + fs.readFileSync(id, 'utf-8');
      }
      return null;
    }
  };
}

import { Plugin } from 'vite';

export default function jsWithSourceMapPlugin(): Plugin {
  return {
    name: 'js-with-source-map-plugin',

    load(id) {
      if (id.endsWith('.js')) {
        const code = `console.log('Modified JS');`;
        const map = {
          version: 3,
          file: id,
          sources: [id],
          names: [],
          mappings: 'AAAA'
        };
        return { code, map };
      }
      return null;
    }
  };
}

import { Plugin } from 'vite';

export default function jsTransformPlugin(): Plugin {
  return {
    name: 'js-transform-plugin',

    transform(code, id) {
      if (id.endsWith('.js')) {
        // 在所有 JavaScript 文件的顶部插入一行代码
        const transformedCode = `console.log('Transformed by js-transform-plugin');\n` + code;
        return transformedCode;
      }
      return null;
    }
  };
}

import { Plugin } from 'vite';

export default function tsTransformPlugin(): Plugin {
  return {
    name: 'ts-transform-plugin',

    transform(code, id) {
      if (id.endsWith('.ts')) {
        // 对 TypeScript 代码做一些简单的替换
        const transformedCode = code.replace(/console\.log/g, 'console.debug');
        return transformedCode;
      }
      return null;
    }
  };
}

import { Plugin } from 'vite';

export default function transformWithSourceMapPlugin(): Plugin {
  return {
    name: 'transform-with-source-map-plugin',

    transform(code, id) {
      if (id.endsWith('.js')) {
        // 修改代码内容
        const transformedCode = `console.log('Modified JS with source map');\n` + code;

        // 返回带有 source map 的转换结果
        const map = {
          version: 3,
          file: id,
          sources: [id],
          names: [],
          mappings: 'AAAA'
        };

        return {
          code: transformedCode,
          map
        };
      }
      return null;
    }
  };
}

import { Plugin } from 'vite';

export default function ssrTransformPlugin(): Plugin {
  return {
    name: 'ssr-transform-plugin',

    transform(code, id, options) {
      if (options.ssr) {
        // 如果是 SSR 模式，做一些不同的转换
        return code.replace('window', 'globalThis');
      }
      return code;
    }
  };
}

import { Plugin } from 'vite';

export default function injectScriptsPlugin(): Plugin {
  return {
    name: 'inject-scripts-plugin',

    transformIndexHtml(html) {
      return html.replace(
        '</head>',
        `
          <script src="https://cdn.example.com/some-library.js"></script>
          <link rel="stylesheet" href="https://cdn.example.com/style.css">
        </head>`
      );
    }
  };
}

import { Plugin } from 'vite';

export default function modifyTitlePlugin(): Plugin {
  return {
    name: 'modify-title-plugin',

    transformIndexHtml(html) {
      return html.replace(
        /<title>(.*?)<\/title>/,
        `<title>Custom Title - ${process.env.VITE_APP_NAME}</title>`
      );
    }
  };
}

import { Plugin } from 'vite';

export default function envInjectPlugin(): Plugin {
  return {
    name: 'env-inject-plugin',

    transformIndexHtml(html, { env }) {
      if (env.MODE === 'production') {
        return html.replace(
          '</body>',
          `<script>console.log('Production mode activated');</script></body>`
        );
      } else {
        return html.replace(
          '</body>',
          `<script>console.log('Development mode');</script></body>`
        );
      }
    }
  };
}

import { Plugin } from 'vite';

export default function injectHeadAndBody(): Plugin {
  return {
    name: 'inject-head-body-plugin',

    transformIndexHtml(html) {
      return {
        html,
        inject: {
          head: `<meta name="description" content="My Custom Vite App">`,
          body: `<script>console.log('Injected after body!');</script>`
        }
      };
    }
  };
}

import { Plugin } from 'vite';

export default function dynamicHtmlPlugin(): Plugin {
  return {
    name: 'dynamic-html-plugin',

    transformIndexHtml(html) {
      const version = process.env.npm_package_version;
      return html.replace(
        '<body>',
        `<body><h1>Welcome to my app! Version: ${version}</h1>`
      );
    }
  };
}

import { Plugin } from 'vite';

export default function myHmrPlugin(): Plugin {
  return {
    name: 'my-hmr-plugin',

    handleHotUpdate(ctx) {
      const { file, server, modules } = ctx;

      // 判断文件是否是某个特定模块
      if (file.endsWith('.css')) {
        console.log(`CSS file updated: ${file}`);
        // 在 HMR 更新时执行自定义的处理逻辑
        // 例如，重新加载相关的模块或清理缓存

        // 可以通过 `ctx.modules` 向 Vite 提供模块信息，以便触发 HMR 更新
        return modules;
      }

      // 对于其他类型的更新，可以做类似的处理
      if (file.endsWith('.js')) {
        console.log(`JavaScript file updated: ${file}`);
        return modules; // 返回需要更新的模块
      }

      return []; // 如果不需要处理这个文件，可以返回空数组
    }
  };
}

import { Plugin } from 'vite';

export default function forcePageReloadPlugin(): Plugin {
  return {
    name: 'force-page-reload-plugin',

    handleHotUpdate(ctx) {
      const { file, server } = ctx;

      // 强制更新 `index.html` 或其他关键资源时刷新页面
      if (file.endsWith('index.html')) {
        console.log('index.html updated, reloading the page...');
        // 通过 server.reload 强制刷新页面
        server.ws.send({
          type: 'full-reload',
          path: file
        });
      }

      return [];
    }
  };
}

import { Plugin } from 'vite';

export default function customHmrPlugin(): Plugin {
  return {
    name: 'custom-hmr-plugin',

    handleHotUpdate(ctx) {
      const { file, server } = ctx;

      // 如果是某个特殊的文件，进行特殊处理
      if (file.endsWith('.vue')) {
        // 在更新 Vue 文件时，做一些特定的操作，比如清除缓存、强制重新渲染组件等
        console.log('Vue component updated:', file);

        // 手动触发某个模块的更新
        return [server.moduleGraph.getModuleById(file)];
      }

      return [];
    }
  };
}