Início / coding / Perguntas / 79297922
Accepted
boszlo
Asked: 2024-12-21 01:02:22 +0800 CST

Renomear arquivos de saída com base no nome do diretório

  • 772

Estou migrando meu aplicativo Laravel multisite do Mix para o Vite. Com o Mix, eu estava renomeando ativos com base no nome do diretório. É possível com o Vite?

Meu código Mix:

const { readdirSync, statSync } = require("fs");
const { join } = require("path");

const dirs = (p) =>
  readdirSync(p).filter(
    (f) => statSync(join(p, f)).isDirectory();
  );

let brands = dirs("./brands");

brands.forEach((brand) => {
    mix.js(
      `brands/${brand}/resources/scripts/app.js`,
      `public/scripts/${brand}.js`
    ).vue();

    mix.sass(
      `brands/${brand}/resources/styles/app.scss`,
      `public/styles/${brand}.css`
    );
});
laravel

1 respostas

  1. Best Answer

    Você pode fazer isso no Vite configurando dinamicamente seus pontos de entrada com base na estrutura do seu diretório. O Vite permite personalização por meio de seu vite.config.jsarquivo, onde você pode configurar programaticamente arquivos de entrada para a compilação.

    Passos a seguir:

    1. Instalar dependências Certifique-se de ter o Vite e todos os plugins necessários instalados, como @vitejs/plugin-vuepara suporte ao Vue.

      npm instalar vite @vitejs/plugin-vue

    2. Crie o script de entrada dinâmico Atualize seu vite.config.jspara configurar dinamicamente as entradas para o build.rollupOptions.inputcampo, semelhante ao que você fez com o Mix.

    3. Análise dinâmica de diretórios no Vite Veja como você pode configurar o Vite para lidar com a lógica de renomeação com base em diretórios:

      import vue from '@vitejs/plugin-vue';
import { readdirSync, statSync } from 'fs';
import { join, resolve } from 'path';

// Helper function to get directories
const dirs = (path) =>
  readdirSync(path).filter((file) => statSync(join(path, file)).isDirectory());

// Get all brand directories
const brands = dirs('./brands');

// Build the input object for Vite
const input = brands.reduce((entries, brand) => {
  entries[`scripts/${brand}`] = resolve(__dirname, `brands/${brand}/resources/scripts/app.js`);
  entries[`styles/${brand}`] = resolve(__dirname, `brands/${brand}/resources/styles/app.scss`);
  return entries;
}, {});

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input, // Dynamically generated inputs
      output: {
        entryFileNames: 'scripts/[name].js',
        assetFileNames: 'styles/[name].css',
      },
    },
  },
});

    4. Detalhes principais

    • dirsFunção: Lê diretórios para identificar pastas específicas da marca.

    • inputObjeto: Mapeia cada marca app.jse app.scsscomo arquivos de entrada para o Rollup (usado pelo Vite nos bastidores).

    • Nomenclatura de saída personalizada: use entryFileNamese assetFileNamespara rollupOptions.outputcontrolar a estrutura do arquivo de saída.

    1. Crie o projeto Execute o comando Vite build para gerar os ativos.

      npm executar compilação

    • 1

relate perguntas