如何在Vite构建Vue3库时自动移除指定JS调试代码？

完全可以通过Vite配置实现需求，不用手动写Node脚本，下面给你两种可行方案：

方案一：使用现成Rollup插件 #

Vite底层基于Rollup，所以可以用rollup-plugin-strip-code插件精准移除指定注释包裹的代码块。

1. 安装插件

npm install rollup-plugin-strip-code --save-dev

2. 配置vite.config.js
   仅在生产环境启用该插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import stripCode from 'rollup-plugin-strip-code'

export default defineConfig(({ mode }) => {
  const plugins = [vue()]
  
  // 生产构建时添加代码移除插件
  if (mode === 'production') {
    plugins.push(
      stripCode({
        start_comment: '------------test----------',
        end_comment: '------------test----------'
      })
    )
  }
  
  return {
    plugins
  }
})

方案二：自定义Vite转换钩子（无需额外插件） #

不想装第三方插件的话，直接在Vite配置里写个自定义transform钩子，用正则匹配移除目标代码块：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      // 仅生产环境启用代码移除逻辑
      mode === 'production' && {
        name: 'strip-debug-code',
        transform(code) {
          // 匹配特定注释包裹的多行代码块
          const debugCodeRegex = /\/\* ------------test---------- \*\/[\s\S]*?\/\* ------------test---------- \*\//g
          return code.replace(debugCodeRegex, '')
        }
      }
    ].filter(Boolean) // 过滤非生产环境的无效项
  }
})

注意事项 #

• 两种方案都只在npm run build生产构建时生效，开发环境会保留调试代码，不影响日常调试。
• 构建完成后可以打开打包产物文件，确认调试代码已被移除。

内容的提问来源于stack exchange，提问作者Kaki Master Of Time