如何设置Laravel Vite在引用供应商目录JS文件时使用实时刷新/重新加载?

jrcvhitl  于 2023-06-30  发布在  其他
关注(0)|答案(1)|浏览(114)

我有一个Laravel 10应用程序,它需要一堆我通过Composer构建的Laravel包。在本地工作时,我将所有这些软件包都放在同一级别的目录中,以便composer可以通过它们的路径安装它们并设置符号链接。
这是伟大的,使我的包的变化反映,而不必不断做 composer 更新。
起初,我有一个Vite构建过程,每个包,并设法让这个工作与现场刷新。然而,随着我的包库的增长,它失去了控制,必须运行10+ vite dev服务器。
我决定将我的Vite构建过程移动到Laravel应用程序,然后配置它在供应商目录中查找每个包的每个主JS文件。这是有效的,但只有在运行npm run build时才有效。如果我运行npm run dev,我会遇到节点模块的问题。

这是我的Laravel应用的vite.config.js:

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

export default defineConfig({
    optimizeDeps: {
        include: [
            'flowbite',
            'alpinejs',
        ],
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'vendor/foobar/dashboard/resources/js/dashboard.js',
                'vendor/foobar/customer-portal/resources/js/customer-portal.js',
                'vendor/foobar/payments-stripe/resources/js/payments-stripe.js',
            ],
            refresh: true,
            valetTls: 'foobar.test',
        }),
    ],
});

这里是我的dashboard.js文件的开始,作为示例:

import {initFlowbite} from "flowbite";
import Alpine from "alpinejs";

npm run build和我没有问题。npm run dev和我在访问加载dashboard.js文件的页面时得到以下内容:

Uncaught TypeError: Failed to resolve module specifier "flowbite". Relative references must start with either "/", "./", or "../".

我试过使用optimizeDeps,包括和排除。更改节点模块的引用路径等,但没有成功。
有什么想法吗
谢谢

brccelvz

brccelvz1#

您可以尝试server.watch选项:
https://vitejs.dev/config/server-options.html#server-watch
Laravel可能会忽略vendor,所以你可以用!覆盖它:

server: {
    watch: {
      ignored: ['!**/vendor/foobar/**/*.js'],
    }
}

相关问题