0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-04-29

開発環境

  • Windows 10 Pro(64bit)
  • laravel/framework 10.10

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'])

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?