Vite+React集成Winston构建报错：debuglog未被__vite-browser-external导出

方案1：手动补全util模块的polyfill #

• 安装浏览器兼容的util polyfill包：

  npm install util-browserify --save-dev
  

• 修改vite.config.js，强制让项目使用polyfill版本的util：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        util: 'util-browserify'
      }
    },
    optimizeDeps: {
      include: ['util-browserify']
    }
  });
  

• 如果仍报错，添加rollup-plugin-inject手动绑定debuglog：
  先安装插件：

  npm install rollup-plugin-inject --save-dev
  

  再更新配置：

  import inject from 'rollup-plugin-inject';
  
  export default defineConfig({
    // 保留原有配置
    build: {
      rollupOptions: {
        plugins: [
          inject({
            debuglog: ['util-browserify', 'debuglog']
          })
        ]
      }
    }
  });
  

方案2：精简Winston的浏览器适配配置 #

Winston v3支持Web，但默认配置可能依赖Node.js核心模块，调整后减少不必要的依赖：

• 修改Winston初始化代码，只使用浏览器兼容的传输层：

  import { createLogger, format, transports } from 'winston';
  
  const logger = createLogger({
    level: 'info',
    format: format.combine(
      format.json(),
      format.prettyPrint()
    ),
    transports: [
      new transports.Console({
        format: format.simple()
      })
    ],
    exitOnError: false
  });
  

• 在vite配置里排除不需要的Node.js模块：

  export default defineConfig({
    // 保留原有配置
    build: {
      rollupOptions: {
        external: ['fs', 'path'],
        output: {
          globals: {
            fs: 'fs',
            path: 'path'
          }
        }
      }
    }
  });
  

方案3：替换为维护中的polyfill插件 #

rollup-plugin-node-polyfills已停止维护，换用更适配Vite的现代插件：

• 卸载旧插件：

  npm uninstall rollup-plugin-node-polyfills
  

• 安装新插件：

  npm install @esbuild-plugins/node-modules-polyfill --save-dev
  

• 更新vite.config.js：

  import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
      esbuildOptions: {
        plugins: [NodeModulesPolyfillPlugin()]
      }
    }
  });
  

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