Laravel Mix(webpack)からViteに移行してみる
はじめに
最新版のlaravelではデフォルトのフロントエンドビルドツールが、Laravel MixからViteに変更されています。
Laravel MixからViteへ、試験的に移行してみました。
結論、様々な理由からLaravel Mixを継続使用することに落ち着きましたが、所感や移行時に行ったことを書いてみます。
経緯
- webpackでのコンパイルが重くて業務に支障がでてきた
- npm run prodが3分くらいかかるサイトがある
- webpackはいまだにシェア率が高いけど、開発終了している
- 後継のTurbopackが開発中らしい
https://www.publickey1.jp/blog/23/javascriptwebpackturbopack.html
- 後継のTurbopackが開発中らしい
- Laravel最新バージョンのデフォルトのビルドツールがVite
- 読み方はVite(ヴィート)らしい
今回移行を断念した理由
- 現行webpackに画像圧縮の処理を含めていて、Laravelのblade内での画像表示タグにmixでの指定をしているため、blade内の変更箇所が多い。 (Viteに移行する場合は画像圧縮の処理はNode.jsのライブラリsharpを使用する予定で、パス指定は普通の書き方にする必要がある)
- cssファイル読込やjavascriptファイル読込の書き方も@vite()みたいな書き方に変更する必要がある
- javascriptのrequireが使えない。importに書き換える必要がある
- 上記すべて対応後のデバッグの必要がある
Vite導入してみて
設定ファイルが簡単。ほぼ触っていない。
(弊社docker開発環境はnginxでのリバースプロキシでの表示をしているので、それへの対応に少し詰まった)
コンパイル速度も改善された。
単独で、新規サイトや新規Laravelサイトの作成を行う場合は、ローカルサーバーも勝手に立ち上がるし、リアルタイムcss更新もあるので、Viteがよさそう。
バージョン
Vite移行前のバージョン
laravel version 9.11
node v14.17.6
npm -v 9.2.0
Vite移行後のバージョン
laravel version 9.11
node v18.17.1
npm -v 9.6.7
導入まとめ
1.(Laravelフレームワークを更新)
composer require laravel/framework:^9.11.0
2.nodeのバージョンアップ(voltaで更新)
volta install node
volta pin node@18.17.1
3.npmのバージョンアップ(voltaで更新)
volta pin npm@bundled
// plugin install
npm install --save-dev vite laravel-vite-plugin
4.設定ファイルvite.config.jsを、プロジェクトのルートディレクトリに新規作成
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
server: {
hmr: {
host: 'localhost',
},
host: true,
// port: 8080,
},
plugins: [
laravel([
// 'resources/css/app.css',
'resources/js/app.js',
]),
],
resolve: {
alias: {
'@': '/resources/js'
}
}
});
5.package.jsonのLaravel Mixコマンド部分をviteコマンドに書き換え
"scripts": {
"dev": "vite",
"build": "vite build",
},
.
.
6.npm install
npm i
7..envの編集
// 追記した
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
ASSET_URL=開発用ドメイン
VITE_SENTRY_DSN_PUBLIC=開発用ドメイン
このカテゴリの最新記事
2023.04.10
2023.09.04
2024.06.26
2023.11.22