如何在Vite Library Mode打包文件中添加特定注释？

直接在入口文件加注释不生效，是因为Vite的打包流程会对源码做处理——哪怕关闭压缩，一些编译优化步骤也可能把入口的注释清掉。要在最终打包文件顶部加带版本的注释，有两种简单可行的方法：

方法一：用现成的Vite插件（推荐） #

用vite-plugin-banner插件，专门用来给打包产物加顶部注释，支持自动读取package.json里的版本信息：

1. 先安装插件：

npm install vite-plugin-banner --save-dev
# 或者用yarn
yarn add vite-plugin-banner -D

2. 在vite.config.ts里配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import banner from 'vite-plugin-banner';
import pkg from './package.json'; // 导入package.json内容

export default defineConfig({
  plugins: [
    react(),
    banner(`/**
 * 组件库名称: ${pkg.name}
 * 版本: ${pkg.version}
 * 发布日期: ${new Date().toLocaleDateString()}
 * 版权声明: 此处可添加你的版权信息
 */`)
  ],
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'YourComponentLib',
      fileName: (format) => `your-lib.${format}.js`
    },
    // 不管是否开启压缩，插件都会在最终产物顶部加注释
    minify: true
  }
});

打包后，所有输出的js、css文件顶部都会带上你定义的注释内容，版本号会自动从package.json读取。

方法二：自定义Vite插件（无额外依赖） #

如果不想添加新依赖，可以自己写一个简单的Vite插件，在打包完成阶段修改产物文件：

import { defineConfig, Plugin } from 'vite';
import react from '@vitejs/plugin-react';
import pkg from './package.json';

// 自定义添加注释的插件
const addBannerPlugin = (): Plugin => {
  return {
    name: 'add-banner',
    generateBundle(_, bundle) {
      // 遍历所有打包输出的文件
      Object.values(bundle).forEach((file) => {
        // 拼接注释内容
        const banner = `/**
 * 组件库名称: ${pkg.name}
 * 版本: ${pkg.version}
 * 发布日期: ${new Date().toLocaleDateString()}
 */\n`;
        
        // 处理静态资源类型的js/css文件
        if (file.type === 'asset' && (file.fileName.endsWith('.js') || file.fileName.endsWith('.css'))) {
          file.source = banner + file.source;
        }
        // 处理代码chunk类型的文件
        if (file.type === 'chunk') {
          file.code = banner + file.code;
        }
      });
    }
  };
};

export default defineConfig({
  plugins: [react(), addBannerPlugin()],
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'YourComponentLib',
      fileName: (format) => `your-lib.${format}.js`
    }
  }
});

这个插件会在Vite的generateBundle钩子（所有打包产物生成完成后触发）里，给每个js和css文件的开头插入注释，版本号同样从package.json读取。

两种方法都能实现你的需求，第一种更简单省心，第二种适合不想加依赖的场景，按需选择即可。

内容的提问来源于stack exchange，提问作者sebazelonka