CodeIgniter 4 + Vite 5 - 独学者Fossa

使用環境

Name	Version
PHP	8.2.13
CodeIgniter	4.4.2
Vite	5.0.7

Vite 5

Vite 5のデフォルトだと、manifest.jsonが.viteディレクトリに格納されるようになりました。

build.manifest欄を、下記のように変更すると、今まで通り使えそうです。

Laravel Vite Plugin v0.8.1も同じように設定すると、暫定的にVite 5で使えたりします。*1

Modules/Admin/vite.config.js

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

const currentPath = path.resolve();

export default defineConfig({
  build: {
    outDir: '../../public/build/admin',
    emptyOutDir: true,
    manifest: 'manifest.json',
    rollupOptions: {
      input: path.join(currentPath, 'Resources/js/main.js'),
    },
  },
  plugins: [
    vue(),
  ],
});

view_cell

CodeIgniter 4には、view_cellがあるので、試してみました。

App\Cells\Vite::script

指定した場所で生成されたmanifect.jsonを読みこむ
css欄の文字を取り出し、Helperのlink_tagで、linkタグを出力する*2
file欄の文字を取り出し、 Helperのscript_tagで、scriptタグを出力する

この方法で良いのかどうか、現時点では、わからないので、ソースコードは掲載しません。

Vite 4から、Vite 5にしましたが、変更する必要はなさそうです。

Modules/Admin/Views/index.php

Laravelフレームワーク内の@viteディレクティブぽい感じにしました。

下記の一行を<head>タグ内に入れます。

<?= view_cell('Vite::script', ['Resources/js/main.js', 'build/admin']); ?>

*1:v1.0.0で、Vite5に対応しました

*2:css欄が存在しない場合もあります