Início / coding / Perguntas / 77859221
Accepted
Dimitrios Desyllas
Asked: 2024-01-22 18:39:05 +0800 CST

Como posso importar todos os js e todos os css que residem na pasta de recursos, na configuração do meu vite, sem necessidade de defini-los um por um?

  • 772

No meu projeto laravel 10 eu carrego um js como:

@vite(['resources/js/myjs.js'])

E my vite.config.jscontém as seguintes configurações

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/style.css',
                'resources/css/another-style.css',

                'resources/js/main.js',
                'resources/js/my.js',
                'resources/js/myjs.js',

                'node_modules/jquery/dist/jquery.js',
                'node_modules/bootstrap/dist/css/bootstrap.css',
                'node_modules/@fortawesome/fontawesome-free/css/all.css'
            ],
            refresh: true,
        }),
        inject({
            $: 'jquery',
            jQuery: 'jquery',
            'common_functions':'resources/js/common_functions.js',
        }),
    ],
    build: {
        rollupOptions: {
            external: [
                "js/modules/*",
            ]
        }
    }
});

Mas se eu precisar de outro arquivo js, ​​devo colocá-lo, vite.config.jstornando o desenvolvimento um pouco lento, porque preciso colocar qualquer novo ccs ou js no vite.config.jsque, devido à pressa do desenvolvimento, posso esquecê-lo.

Existe uma maneira conveniente de o vite procurar quaisquer arquivos definidos em resources/csse resources/jspastas?

javascript

2 respostas

  1. Best Answer

    Afaik não há opção de passar curinga *. De acordo com: documento . Temos que fazer isso de forma programática, talvez assim, onde ele percorre as pastas e obtém o caminho dos arquivos, você poderia apenas espalhar ...pageStylesno objeto, onde deseja inserir os caminhos dos arquivos.

    function getFilesFromDir(dir, fileTypes) {
    const filesToReturn = [];

    function walkDir(currentPath) {
        const files = readdirSync(currentPath);
        for (let i in files) {
            const curFile = resolve(currentPath, files[i]);
            if (readdirSync(curFile, { withFileTypes: true }).some(dirent => dirent.isDirectory())) {
                walkDir(curFile);
            } else {
                if (fileTypes.indexOf(curFile.split('.').pop()) !== -1) {
                    filesToReturn.push(curFile);
                }
            }
        }
    }

    walkDir(resolve(__dirname, dir));
    return filesToReturn;
}
    • 0

  2. Como diz @Burak Ayyildiz, você precisa percorrer manualmente o diretório e obter os caminhos como um array. Mas a resposta definida no documento tem alguns problemas:

    node:fs:1513
  const result = binding.readdir(
                         ^

Error: ENOTDIR: not a directory, scandir '/var/www/html/resources/css/fa-check.css'
    at readdirSync (node:fs:1513:26)
    at walkDir (file:///var/www/html/test.mjs:41:17)
    at getFilesFromDir (file:///var/www/html/test.mjs:51:5)
    at file:///var/www/html/test.mjs:55:20
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async loadESM (node:internal/process/esm_loader:28:7)
    at async handleMainPromise (node:internal/modules/run_main:120:12) {
  errno: -20,
  code: 'ENOTDIR',
  syscall: 'scandir',
  path: '/var/www/html/resources/css/my.css'
}

    Portanto, uma correção para a função é:

    import { readdirSync,lstatSync } from 'fs';
import { resolve } from 'path';

function getFilesFromDir(dir, fileTypes) {
    const filesToReturn = [];

    function walkDir(currentPath) {

        if(lstatSync(currentPath).isFile()){
            filesToReturn.push(currentPath);
            return;
        }

        const files = readdirSync(currentPath);
        for (let i in files) {
            const curFile = resolve(currentPath, files[i]);
            if(lstatSync(curFile).isDirectory()){
                walkDir(curFile);
                continue;
            }
            filesToReturn.push(curFile);
        }
    }

    walkDir(resolve(__dirname, dir));
    return filesToReturn;
}

    Isso também simplifica o código.

    • 0

relate perguntas