最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

typescript - How to increase Vite verbosity? - Stack Overflow

programmeradmin4浏览0评论

I've been trying to migrate my MUI-based React app to Vite and I've already found something that successfully generates a minimized production ready js file. Now I've been working on a dev-time configuration, but for that I want Vite only to periodically output non-optimized JS file to a designated folder. By "periodically" I mean "on every change to any of the source files". Also, I don't need Vite's dev server, as I want my JS file to be hosted my my .NET app.

Here's the vite.config.js I've come up so far

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) {
                // Suppress "Module level directives cause errors when bundled" warnings
                if (warning.code === "MODULE_LEVEL_DIRECTIVE") return;
                // Suppress "A comment /*#__PURE__*/" contains an annotation... " warnings
                if (warning.code === "INVALID_ANNOTATION") return;

                warn(warning);
            },
        }
    }
})

In my package.json I've defined two scripts:

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

No issue with release - it just works. Regarding dev - it successfully generates the first version of the file, but then on any modification of any of the source files it fails with the following error message:

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

I've tried running it with $env:DEBUG="vite:*"; npm run dev but that didn't provide any extra diagnostic info.

My questions:

  • How can I configure Vite to provide me with more information about the error (e.g. which package is causing this)?
  • Is there a better way to achieve my goal (having a live watch searching for changes in source code)?

Versions I'm using:

  • Vite 6.1.0
  • React 18.2
  • @mui/material 5.15.15
  • TypeScript: 5.4.5
发布评论

评论列表(0)

  1. 暂无评论