主页 / coding / 问题 / 77859221
Accepted
Dimitrios Desyllas
Asked: 2024-01-22 18:39:05 +0800 CST

如何在我的 vite 配置中导入资源文件夹中的所有 js 和所有 css，而不需要一一定义它们？

  • 772

在我的 laravel 10 项目中，我将 js 加载为：

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

我的vite.config.js包含以下设置

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/*",
            ]
        }
    }
});

但是，如果我需要另一个 js 文件，我应该将其放入，vite.config.js从而使开发有点慢，因为我需要将任何新的 ccs 或 js 放入其中，vite.config.js由于开发的匆忙，我可能会忘记它。

有没有一种方法可以方便地让 vite 查看resources/css和resources/js文件夹中定义的任何文件？

javascript

2 个回答

  1. Best Answer

    Afaik 没有传递通配符 * 的选项。根据：文档。我们必须以编程方式执行此操作，也许像这样，它遍历文件夹并获取文件的路径，您可以将其传播...pageStyles到要插入文件路径的对象中。

    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. 正如@Burak Ayyildiz 所说，您需要手动遍历目录并将路径作为数组获取。但从docu定义的答案有一些问题：

    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'
}

    因此，对该函数的修复是：

    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;
}

    这也简化了代码。

    • 0

相关问题