reactjs - Multiple Vite processes overwriting each other's javascript variables - Stack Overflow

admin管理员组

文章数量:1279125

I have a Neos CMS project which has a small preact project inside of it. The bundled preact JS code should not always be rendered, but only when a specific element is rendered. For this reason, I can't bundle all my JavaScript into one and need two Vite processes.

Now the problem: The Vite processes of course don't know of each other and use the same function and variable names for the minification, which, of course, breaks everything.

This is my configuration:

import {defineConfig} from 'vite';
import FullReload from 'vite-plugin-full-reload';
import 'dotenv/config';

const sitePackageName = process.env.SITE_PACKAGE_NAME;

export default defineConfig(({command}) => {
    const base = command === 'build' ? `/_Resources/Static/Packages/${sitePackageName}/Build` : '';

    return {
        base: base,
        build: {
            manifest: false,
            rollupOptions: {
                input: [
                    `./DistributionPackages/${sitePackageName}/Resources/Private/JavaScript/main.js`,
                ],
                output: {
                    entryFileNames: `Assets/[name].js`,
                    chunkFileNames: `Assets/[name].js`,
                    assetFileNames: `Assets/[name].[ext]`,
                },
            },
            outDir: `./DistributionPackages/${sitePackageName}/Resources/Public/Build`,
            assetsDir: '',
        },
        publicDir: false,
        server: {
            strictPort: true,
            port: 3000,
            origin: 'http://localhost:3000',
        },
        plugins: [
            FullReload([
                `./DistributionPackages/${sitePackageName}/**/*.{fusion,css,js}`,
            ], {
                delay: 1000,
            }),
        ]
    };
});

The second configuration is this one for the preact project:

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import svgr from "vite-plugin-svgr";

export default defineConfig({
    plugins: [preact(), svgr()],
    build: {
        rollupOptions: {
            output: {
                entryFileNames: 'index.js',
                assetFileNames: 'index.css'
            },
        }
    }
});

This builds two javascript files, that, when included together, always throw errors, because they both use the same variable names.

本文标签： reactjsMultiple Vite processes overwriting each other39s javascript variablesStack Overflow