使用vite编译多个模块的资源

Question

我正在使用 laravel 构建一个网站。网站有很多模块，每个模块都有自己的js和scss。我想每次输入“npm run build”时编译所有模块的所有js、scss。

下面是我的代码。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import glob from 'glob';

const modules = ['Admin', 'Blog'];

export default defineConfig({
    plugins: modules.map((module) => {
        const inputFiles = [
            ...glob.sync('./Modules/${module}/Resources/assets/js/*.js'),
            ...glob.sync('./Modules/${module}/Resources/assets/sass/*.scss'),
        ];
        
        return laravel({
            input: inputFiles,
            publicDirectory: 'public/build/',
            buildDirectory: module,
            refresh: true,
        });
    }),
});

上面的代码只构建了Admin模块而忽略了Blog，请告诉我哪里出错了。非常感谢。

Answer 1

从 Laravel 模块 v11 开始，以下步骤将起作用。

首先发布 vite-module-loader.js

php artisan vendor:publish --provider="Nwidart\Modules\LaravelModulesServiceProvider" --tag="vite"

修改您的主 vite.config.js 文件，如下所示：

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import collectModuleAssetsPaths from './vite-module-loader.js';

async function getConfig() {
    const paths = [
        'resources/css/app.css',
        'resources/js/app.js',
    ];
    const allPaths = await collectModuleAssetsPaths(paths, 'Modules');

    return defineConfig({
        plugins: [
            laravel({
                input: allPaths,
                refresh: true,
            })
        ]
    });
}

export default getConfig();

然后修改你的 Modules vite.config.js 如下所示：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';


export const paths = [
   'Modules/ModuleName/resources/assets/sass/app.scss',
   'Modules/ModuleName/resources/assets/js/app.jsx',


];

export default defineConfig({
    build: {
        outDir: '../../public/build-ModuleName',
        emptyOutDir: true,
        manifest: true,
    },
    plugins: [
        laravel({
            publicDirectory: '../../public',
            buildDirectory: 'build-ModuleName',
            input: paths,
            refresh: true,
        }),
        react()
    ],
    server: {
        watch: {
          usePolling: true
        }
    },
});

请参阅文档了解更多信息

确保您的服务器具有权限访问Modules目录中的文件，否则，当您运行npm run build时，模块文件将不会添加到清单文件中