如何提升Vite日志详细度？MUI React项目监听构建异常排查

背景 #

我正尝试将基于MUI的React应用迁移至Vite，生产环境已能正常生成压缩后的就绪JS文件。现在需要配置开发环境，让Vite在源码文件变更时自动输出未优化的JS文件到指定目录，且不需要启用Vite的开发服务器，因为JS文件将由我的.NET应用托管。

当前配置 #

vite.config.js #

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

export default defineConfig({
    base: "/",
    plugins: [react()],
    define: {
        'process.env.NODE_ENV': JSON.stringify('production'),
        'process.env.REACT_APP_CLIENT': JSON.stringify('true'),
    },
    build: {
        outDir: "../myIISServer/wwwroot",
        emptyOutDir: true,
        rollupOptions: {
            input: "src/index.tsx",
            output: {
                entryFileNames: "main.min.js",
            },
            onwarn(warning, warn) {
                // 屏蔽特定警告
                if (warning.code === "MODULE_LEVEL_DIRECTIVE") return;
                if (warning.code === "INVALID_ANNOTATION") return;

                warn(warning);
            },
        }
    }
})

package.json 脚本 #

"scripts": {
  "dev": "vite build --watch",
  "release": "vite build"
}

问题现象 #

release脚本运行正常，但dev脚本首次构建成功后，修改源码文件会触发报错：

build started...
✓ 3 modules transformed.
[commonjs] Cannot read properties of undefined (reading 'resolved')

尝试通过$env:DEBUG="vite:*"; npm run dev运行，未获取到更多诊断信息。

疑问 #

1. 如何配置Vite以获取更多错误信息（例如定位到导致问题的包）？
2. 有没有更合理的方式实现源码变更监听并输出文件的需求？

使用版本 #

• Vite 6.1.0
• React 18.2
• @mui/material 5.15.15
• TypeScript 5.4.5

解决方案 #

1. 获取更详细的错误信息 #

• 开启Rollup调试日志：在vite.config.js的rollupOptions中添加logLevel: 'debug'，输出Rollup构建过程的详细日志，包括模块处理细节，有助于定位Commonjs插件的问题：

  rollupOptions: {
    // ...其他配置
    logLevel: 'debug'
  }
  

• 禁用Commonjs插件缓存：watch模式下Commonjs插件的缓存可能引发异常，可在配置中禁用缓存（Vite内置该插件，无需额外安装）：

  import commonjs from '@rollup/plugin-commonjs';
  
  export default defineConfig({
    // ...其他配置
    build: {
      rollupOptions: {
        plugins: [
          commonjs({ cache: false })
        ]
      }
    }
  })
  

• 升级依赖版本：检查Vite及相关插件的版本兼容性，尝试升级Vite到最新稳定版，部分版本的内置Commonjs插件存在watch模式下的bug。

2. 优化开发环境的监听与输出方案 #

核心思路是区分开发和生产构建配置，避免强制使用生产环境参数导致watch模式异常：

修改后的vite.config.js

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react';

export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';

  return {
    base: "/",
    plugins: [react()],
    define: {
      'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development'),
      'process.env.REACT_APP_CLIENT': JSON.stringify('true'),
    },
    build: {
      outDir: "../myIISServer/wwwroot",
      emptyOutDir: isProduction, // 仅生产构建清空目录，避免watch时频繁删除文件
      minify: isProduction, // 开发模式不压缩代码
      sourcemap: !isProduction, // 开发模式生成sourcemap便于调试
      rollupOptions: {
        input: "src/index.tsx",
        output: {
          entryFileNames: isProduction ? "main.min.js" : "main.js", // 开发输出未压缩文件名
        },
        onwarn(warning, warn) {
          if (warning.code === "MODULE_LEVEL_DIRECTIVE") return;
          if (warning.code === "INVALID_ANNOTATION") return;
          warn(warning);
        },
        logLevel: isProduction ? 'warn' : 'debug', // 开发模式开启调试日志
      }
    }
  }
})

修改后的package.json脚本

"scripts": {
  "dev": "vite build --mode development --watch",
  "release": "vite build --mode production"
}

这样调整后，开发模式下会生成未压缩、带sourcemap的JS文件，watch模式也会更稳定，同时避免了强制设置NODE_ENV=production带来的兼容性问题。

内容的提问来源于stack exchange，提问作者LA.27