Vite 构建流程详解：从命令到产物

// 插件示例
export default function myPlugin() {
  return {
    name: 'my-plugin',
    config(config, { command, mode }) {
      // command: 'build' | 'serve'
      // mode: 'development' | 'production' | 自定义模式

      if (command === 'build') {
        return {
          build: {
            rollupOptions: {
              // 修改 Rollup 配置
            }
          }
        }
      }
    }
  }
}

export default function myPlugin() {
  let config;

  return {
    name: 'my-plugin',
    configResolved(resolvedConfig) {
      // 保存配置供后续钩子使用
      config = resolvedConfig;

      console.log('构建模式:', config.command);
      console.log('是否生产环境:', config.isProduction);
      console.log('输出目录:', config.build.outDir);
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    options(options) {
      // 可以修改 Rollup 的 input 选项
      return {
        ...options,
        // 自定义配置
      }
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    buildStart(options) {
      console.log('构建开始');
      console.log('入口文件:', options.input);

      // 可以在这里做一些初始化工作
      // 例如：清理缓存、创建临时目录等
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    resolveId(source, importer, options) {
      // source: 导入的模块路径
      // importer: 导入该模块的文件路径
      // options: 解析选项

      if (source === 'virtual-module') {
        // 返回虚拟模块 ID
        return '\0virtual-module';
      }

      // 返回 null 让其他插件处理
      return null;
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    load(id) {
      // id: 模块的完整路径

      if (id === '\0virtual-module') {
        // 返回虚拟模块的代码
        return 'export default "This is a virtual module"';
      }

      // 返回 null 让其他插件或默认加载器处理
      return null;
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      // code: 模块的源代码
      // id: 模块的完整路径

      if (id.endsWith('.vue')) {
        // 转换 Vue 文件
        const transformedCode = someTransform(code);

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

      return null;
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    moduleParsed(moduleInfo) {
      console.log('模块 ID:', moduleInfo.id);
      console.log('模块依赖:', moduleInfo.importedIds);
      console.log('模块导出:', moduleInfo.exports);
      console.log('是否入口:', moduleInfo.isEntry);
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    renderStart(outputOptions, inputOptions) {
      console.log('开始生成输出文件');
      console.log('输出格式:', outputOptions.format);
      console.log('输出目录:', outputOptions.dir);
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    renderChunk(code, chunk, options) {
      // code: chunk 的代码
      // chunk: chunk 信息（文件名、模块列表等）
      // options: 输出选项

      console.log('处理 chunk:', chunk.fileName);
      console.log('chunk 包含的模块:', Object.keys(chunk.modules));

      // 可以修改代码
      const modifiedCode = code.replace(/console\.log/g, '');

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

export default function myPlugin() {
  return {
    name: 'my-plugin',
    augmentChunkHash(chunkInfo) {
      // 返回字符串会被添加到哈希计算中
      if (chunkInfo.name === 'main') {
        return 'custom-hash-input';
      }
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    generateBundle(options, bundle) {
      // bundle: 包含所有输出文件的对象

      for (const fileName in bundle) {
        const file = bundle[fileName];

        if (file.type === 'chunk') {
          console.log('Chunk 文件:', fileName);
          console.log('Chunk 大小:', file.code.length);
        } else if (file.type === 'asset') {
          console.log('资源文件:', fileName);
        }
      }

      // 可以添加新文件
      this.emitFile({
        type: 'asset',
        fileName: 'custom-file.txt',
        source: 'Custom content',
      });

      // 可以删除文件
      delete bundle['unwanted-file.js'];
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    writeBundle(options, bundle) {
      console.log('文件已写入磁盘');
      console.log('输出目录:', options.dir);

      // 可以执行后续操作
      // 例如：上传到 CDN、发送通知等
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    buildEnd(error) {
      if (error) {
        console.error('构建失败:', error);
      } else {
        console.log('构建成功完成');
      }

      // 清理临时资源
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    closeBundle() {
      console.log('构建流程完全结束');
      // 最终清理工作
    }
  }
}

export default function myPlugin() {
  return {
    name: 'my-plugin',
    apply: 'build', // 仅在构建时执行
    // apply: 'serve', // 仅在开发时执行
    // apply: (config, { command }) => command === 'build', // 自定义条件
  }
}

optimizeDeps: {
  esbuildOptions: {
    target: 'esnext', // 使用现代语法，减少转换
  }
}

// Gzip 和 Brotli 压缩
vite-plugin-compression

export default function myPlugin() {
  return {
    name: 'my-plugin',
    configResolved(config) {
      console.log('[my-plugin] 配置已解析');
    },
    buildStart() {
      console.log('[my-plugin] 构建开始');
    },
    transform(code, id) {
      if (id.includes('target-file')) {
        console.log('[my-plugin] 转换文件:', id);
      }
      return null;
    },
    generateBundle(options, bundle) {
      console.log('[my-plugin] 生成的文件数量:', Object.keys(bundle).length);
    }
  }
}

export default function myVitePlugin(options = {}) {
  // 插件内部状态
  let config;

  return {
    // 插件名称（必需）
    name: 'my-vite-plugin',

    // 应用模式：'build' | 'serve' | (config, env) => boolean
    apply: 'build',

    // 执行顺序：'pre' | 'post'
    enforce: 'post',

    // 配置解析前
    config(config, { command, mode }) {
      return {
        // 返回部分配置进行合并
      };
    },

    // 配置解析后
    configResolved(resolvedConfig) {
      config = resolvedConfig;
    },

    // 构建开始
    buildStart(options) {
      // 初始化操作
    },

    // 模块解析
    resolveId(source, importer, options) {
      // 返回模块 ID 或 null
      return null;
    },

    // 模块加载
    load(id) {
      // 返回模块代码或 null
      return null;
    },

    // 代码转换
    transform(code, id) {
      // 返回转换后的代码
      return {
        code,
        map: null,
      };
    },

    // 输出生成
    generateBundle(options, bundle) {
      // 修改、添加或删除输出文件
    },

    // 构建结束
    buildEnd(error) {
      // 清理资源
    },
  };
}

export default function addVersionPlugin(version) {
  return {
    name: 'add-version',
    renderChunk(code, chunk) {
      if (chunk.isEntry) {
        return {
          code: `/* Version: ${version} */\n${code}`,
          map: null,
        };
      }
    }
  };
}

export default function filterFilesPlugin(pattern) {
  return {
    name: 'filter-files',
    generateBundle(options, bundle) {
      for (const fileName in bundle) {
        if (pattern.test(fileName)) {
          delete bundle[fileName];
        }
      }
    }
  };
}

export default function buildReportPlugin() {
  return {
    name: 'build-report',
    generateBundle(options, bundle) {
      const report = {
        chunks: [],
        assets: [],
        totalSize: 0,
      };

      for (const fileName in bundle) {
        const file = bundle[fileName];
        const size = file.type === 'chunk'
          ? file.code.length
          : file.source.length;

        report.totalSize += size;

        if (file.type === 'chunk') {
          report.chunks.push({ fileName, size });
        } else {
          report.assets.push({ fileName, size });
        }
      }

      this.emitFile({
        type: 'asset',
        fileName: 'build-report.json',
        source: JSON.stringify(report, null, 2),
      });
    }
  };
}