Vite能否排除指定代码片段？开发保留构建时移除

如果你需要实现类似Webpack里用注释标记包裹代码，让代码仅在dev阶段运行、build时不打包的需求，有两种实用方案：

方案一：用Vite内置环境变量做条件编译（推荐） #

Vite自带import.meta.env.DEV环境变量，开发环境下这个值为true，生产构建时会被替换为false，并且Tree Shaking会自动剔除死代码。直接把需要仅在dev运行的代码放在条件判断里就行：

if (import.meta.env.DEV) {
  // 这里的代码只会在dev阶段执行，build时会被完全剔除
  console.log('仅开发模式可见的调试代码');
  // 其他开发专属逻辑，比如模拟接口数据、调试工具初始化等
}

这种方式不需要额外插件，是Vite官方推荐的写法，比注释标记更规范可靠。

方案二：自定义Rollup插件处理注释标记 #

如果一定要用###SOMETHING和###END_SOMETHING这类注释标记来包裹代码，可以写一个简单的自定义Rollup插件，在生产构建时把对应代码块删掉。

在vite.config.js里添加这个插件：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    {
      name: 'strip-dev-only-code',
      transform(code) {
        // 只在生产构建阶段处理代码
        if (process.env.NODE_ENV === 'production') {
          // 匹配// ###SOMETHING到// ###END_SOMETHING之间的所有内容（非贪婪匹配）
          // 如果你的注释是多行注释/* ###SOMETHING */，可以调整正则表达式
          return code.replace(/\/\/ ###SOMETHING[\s\S]*?\/\/ ###END_SOMETHING/g, '');
        }
        // 开发环境原样返回代码
        return code;
      }
    }
  ]
});

注意调整正则匹配规则，匹配你实际使用的注释格式。比如如果是用多行注释包裹：

/* ###SOMETHING */
console.log('开发专属代码');
/* ###END_SOMETHING */

那正则可以改成：

code.replace(/\/\* ###SOMETHING \*\/[\s\S]*?\/\* ###END_SOMETHING \*\//g, '');

这个插件会在Vite执行build时，自动把标记内的代码块从打包产物中移除，开发环境完全不影响代码运行。

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