laravel-vite-pluginを用いてJavaScriptのモジュールをバンドルする #Laravel

1.モジュールを入れるmodulesディレクトリをresources/jsディレクトリ内に作成する

2.modulesディレクトリ内に以下の3ファイルを作成する

a.js

export default (function(){
	alert("a.js");
})();

b.js

export default (function(){
	alert("b.js");
})();

c.js

export default (function(){
	alert("c.js");
})();

3.app.jsを開いて、以下に書き換える

app.js

import "./modules/a";
import "./modules/b";
import "./modules/c";

4.プロジェクトのルートディレクトリ上で以下のコマンドでビルド

npm run build

5./public/build/assetsディレクトリ内に、ファイルが作成されています。ファイル名は、app-以降については、開発環境によって違うと思います。

app-CTGd6Hn6.js

(function(){alert("a.js")})();(function(){alert("b.js")})();(function(){alert("c.js")})();

6.使用するには、bladeテンプレート内のheadタグ内やbodyタグの末尾に、以下のように@viteディレクティブを挿入します。

@vite(['resources/js/app.js'])

laravel-vite-pluginを用いてJavaScriptのモジュールをバンドルする