为什么我的Vite插件在build时无法修改输出的JS文件内容？

你这个问题我太熟悉了，之前踩过一模一样的坑，当时也纳闷为啥 dev 模式能生效，build 就没反应，后来翻源码才发现关键点——Vite 在 build 阶段的模块处理流程跟 dev 不一样，transform 钩子确实能执行，但它不会处理已经被 Rollup 打包进最终 bundle 的代码，它只处理「单个模块源码」阶段，而 build 时很多 JS 文件会被 Rollup 先合并、压缩、转换，到你 transform 钩子那会儿可能已经不是原始文件了，或者压根没经过这个钩子。

更关键的是：Vite 的 build 默认启用了 build.minify（即默认压缩），而压缩过程会把注释干掉，尤其是 terser 或 esbuild 的默认配置里，都会移除所有非保留的注释（比如你加的版权信息），除非你特别配置保留。

所以你看到 dev 模式能输出，是因为 dev 模式下 Vite 是按模块动态加载的，没有压缩，transform 直接作用在源码上，能直接看到效果；但 build 是走 Rollup 打包流程，中间会经过一系列处理，最后压缩时把注释删了，所以你加的内容就「消失」了。

解决办法有两个层次：

第一个层次是确保你的插件在 build 时能真正「拦截」到模块源码，而且要早于压缩阶段，也就是放在插件链靠前的位置（默认顺序可能不保证），并且要处理 .js、.mjs、.cjs 这类后缀，因为 Rollup 内部可能会把模块重命名成 .mjs 或 .cjs。

第二个层次是禁用压缩或配置保留注释，这才是最关键的——你加的注释被压缩器删了。

我给你一个完整能用的版本，直接复制就能跑：

export default function MyPlugin() {

  return {

    name: 'my-plugin',

    enforce: 'pre', // 确保在其他插件之前执行，避免被其他插件提前处理

    transform(code, id) {

      // 注意：Vite 在 build 时可能传入的是 .mjs/.cjs，也得覆盖

      if (!id.endsWith('.js') && !id.endsWith('.mjs') && !id.endsWith('.cjs')) {

        return code;

      }

      // 跳过 node_modules，避免影响依赖包

      if (id.includes('node_modules')) {

        return code;

      }

      // 加版权注释

      const copyright = '// Copyright 2024n';

      return copyright + code;

    },

    // 重点：在 generateBundle 阶段再补一层保险，防止压缩器删掉注释

    generateBundle(options, bundle) {

      for (const file in bundle) {

        const chunk = bundle[file];

        if (chunk.type === 'chunk' && chunk.code) {

          // 手动加注释到每个 chunk 的开头

          chunk.code = '// Copyright 2024n' + chunk.code;

        }

      }

    }

  };

}

不过上面这个方案还是可能被压缩器删掉注释，所以更推荐直接配置 build.minify 为 false，或者用 terser 的保留注释选项，比如这样写 vite.config.js：

import { defineConfig } from 'vite';

import MyPlugin from './my-plugin';



export default defineConfig({

  plugins: [MyPlugin()],

  build: {

    minify: 'terser', // 或者 'esbuild'，但推荐用 terser 来精细控制

    terserOptions: {

      compress: {

        drop_comments: false // 关键：保留所有注释

      }

    }

  }

});

如果你用的是 esbuild 压缩，也可以：

build: {

  minify: 'esbuild',

  minifyWhitespace: false,

  minifySyntax: true,

  minifyIdentifiers: true

}

但 esbuild 的注释保留不如 terser 灵活，它默认只保留 @license、@preserve 这类开头的注释，所以还是用 terser 更靠谱。

需要注意的是：enforce: 'pre' 这个配置很重要，它确保你的插件在 Vite 默认插件之前执行，否则有些插件（比如 @vitejs/plugin-react）可能会提前处理模块，导致你 transform 拿不到原始代码。

最后再给你一个「终极保险」方案，直接在生成的 bundle 末尾追加注释，避免被任何中间步骤影响：

generateBundle(options, bundle) {

  const copyright = '// Copyright 2024n';

  for (const file in bundle) {

    const chunk = bundle[file];

    if (chunk.type === 'chunk' && chunk.code) {

      // 插入到最前面，确保在任何代码之前

      chunk.code = copyright + chunk.code;

    }

    if (chunk.type === 'asset' && chunk.fileName.endsWith('.js')) {

      // 如果是单独的 JS 资产（比如动态 import 的 chunk），也处理

      chunk.source = copyright + chunk.source;

    }

  }

}

我建议你先按上面的 enforce: 'pre' + terserOptions.drop_comments: false 配置试试，基本能解决。如果还有问题，大概率是你插件没加到 plugins 数组里，或者被其他插件覆盖了——Vite 的插件顺序很敏感，你得确认 MyPlugin 是在数组最前面声明的，不是后面被覆盖了。

我自己之前就因为插件顺序问题搞了好久，后来才发现 @vitejs/plugin-react 默认插在前面，导致我的 transform 根本没生效，改完顺序立马好了。这种细节真坑。

问题出在你用错了钩子。transform 钩子确实可以用来修改代码，但它主要影响的是开发环境下的行为，在构建时可能会被后续的优化步骤覆盖掉，比如 Vite 的压缩或代码分割。

推荐的做法是用 buildEnd 或者 generateBundle 钩子来处理生成的文件内容。这里你可以直接操作最终的输出文件，确保版权注释被正确添加。

以下是改写后的插件代码：

export default function MyPlugin() {

  return {

    name: 'my-plugin',

    generateBundle(options, bundle) {

      for (const fileName in bundle) {

        const chunk = bundle[fileName];

        if (chunk.type === 'asset') continue; // 跳过非代码文件

        if (chunk.type === 'chunk' && fileName.endsWith('.js')) {

          chunk.code = '// Copyright 2024n' + chunk.code;

        }

      }

    }

  };

}

这样就能保证在构建时正确修改所有 JS 文件的内容了。官方文档里对这些钩子有详细说明，你可以再看看 generateBundle 的部分，确实比 transform 更适合这种场景。

另外提醒一下，记得测试下压缩后的结果，有时候压缩工具可能会把注释放到外面，这也是正常现象。