TypescriptをLaravelで使うとjsファイルが生成されない問題（開発時はOKだが本番反映時は設定必）

2025.07.14

Typescriptを使ったLaravelの開発で、本番用にビルドを実行すれば「public/build/assets/」にJSファイルが生成されるのだが、私の環境だとそれが機能していないにもかかわらず、TSは動いていた。

このあたりが少しややこしいので、form.tsを例にしてメモとして残しておく

Table of Contents

publicにjsがなくてもTS動く理由

理由は単純にsail npm run dev　で開発用にVite経由でビルドしているからだ。

この状態であればpublicは以下にform.jsがなくても、呼び出しもとのgallery.blade.phpなどにtsのパスを定義しておけば、動いてくれる

@push('scripts')
    @vite('resources/js/form.ts')
    {{-- vite.confugにform.tsを定義しておけば、本番でもビルド後に自動的にTS→JSとして変換・認識してくれる --}}
@endpush

しかし、これはあくまでもローカルでsailコマンドを使っている時だけ有効で、本番用に「npm run build」をすると表示エラーになるだろう。

「vite.configs.php」にて、下記を実行すればOKだ。

        laravel({
            input: ['resources/css/app.css', 'resources/js/form.ts'],
            refresh: true,
        }),

ここに、TSを個別に追加しないと、ローカルでは動いても本番用ビルドには反映されない。

この状態で「npm run build」を実行すれば、「public/build/assets/」にform.tsのが自動生成される。

ちなみに、laravelではform.jsのようにtsではなくjsでパスを指定する必要はない。

Laravel（正確には Laravel Vite プラグイン）が TypeScript（.ts）をすべて自動的に .js に変換・対応してくれるからだ。

こちら側は何もする必要はないのだ。この状態であれば、tsだけでも正常に動くはず。