簡易モジュール構造(4)

fossa-hobby.hatenablog.com

使用環境

Name	Version
PHP	8.2.6
Laravel	10.11.0
Node.js	v18.16.0
Vue.js	3.3.4
Vite	4.3.9
Laravel Vite Plugin	0.7.8

Laravel Vite Plugin

今回は、Laravel Vite Pluginを使います。

Laravel Modulesのvite.config.js(vite.stub)を参考にしました。

Laravel Modulesのvite.config.js(vite.stub)

const dotenvExpand = require('dotenv-expand');
dotenvExpand(require('dotenv').config({ path: '../../.env'/*, debug: true*/}));

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

export default defineConfig({
    build: {
        outDir: '../../public/build-$LOWER_NAME$',
        emptyOutDir: true,
        manifest: true,
    },
    plugins: [
        laravel({
            publicDirectory: '../../public',
            buildDirectory: 'build-$LOWER_NAME$',
            input: [
                __dirname + '/Resources/assets/sass/app.scss',
                __dirname + '/Resources/assets/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

Modules/Admin/vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'node:path';

const currentPath = path.resolve();
//const basePath = path.join(currentPath, '..', '..');

export default defineConfig({
  build: {
    emptyOutDir: true,
    manifest: true,
  },
  plugins: [
    laravel({
      publicDirectory: '../../public',
      buildDirectory: 'build/admin',
      input: [
        path.join(currentPath, 'Resources/js/app.js'),
      ],
      refresh: true,
    }),
    vue(),
  ],
});

buildDirectoryは、上記の例だとpublic/build/adminを指しているのですが、上記の設定だと、わかりにくいなぁと思いました。

絶対パスで記述したかったのですが、Laravel Vite Pluginのソースを見ると、

path.join(config.publicDirectory, config.buildDirectory)

と書いてあり、仕様なので諦めました。

Laravelのpublic_path()、或いはpublic_path()に相当する内容をpublicDirectoryに設定したかったのですが、調べても見つかりませんでした。