laravel7、8、9、10とフロントエンドの変遷(3) - laravel9、10と vite
の続き(最終回)
laravel9
この版では要求がphp8以上になっているのがまずあるのと、8.1以上じゃないと使えない機能がひっそりと含まれていたりもするがまあさておき。
package.json
ackage.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vite": "^4.0.0"
}
}この版からまずpackage.jsonが大幅に変更されlaravel mixが廃止されてもーた。という事はもうwebpackからの脱却である、とはいえ、やってる事はやってる事なので頑張ってwebpack + laravel mixを再構築する事もできるんだろーがやる意味はなさそうという事、こういうのは流れに乗ったもん勝ちだろう。
scriptsに注目すると
dev
build
だけになっているので、npm run prodとかnpm run productionというのは消滅しているからね！とりあえずそれ系の目的で使いたいならnpm run buildが正解って事になりますわね。
laravel breeze
composer require laravel/breeze --dev
./composer.json has been updated
Running composer update laravel/breeze
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
- Locking laravel/breeze (v1.19.2)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Downloading laravel/breeze (v1.19.2)
- Installing laravel/breeze (v1.19.2): Extracting archivephp artisan breeze:install
Which stack would you like to install?
blade ................................................................................................ 0
react ................................................................................................ 1
vue .................................................................................................. 2
api .................................................................................................. 3
❯
、というわけで、この版からbreeze:installはインタラクティブ的になったのであった。
php artisan breeze:install --help
Description:
Install the Breeze controllers and resources
Usage:
breeze:install [options] [--] <stack>
Arguments:
stack The development stack that should be installed (blade,react,vue,api)
Options:
--dark Indicate that dark mode support should be installed
--inertia Indicate that the Vue Inertia stack should be installed (Deprecated)
--pest Indicate that Pest should be installed
--ssr Indicates if Inertia SSR support should be installed
--composer[=COMPOSER] Absolute path to the Composer binary which should be used to install packages [default: "global"]
-h, --help Display help for the given command. When no command is given display help for the list command
-q, --quiet Do not output any message
-V, --version Display this application version
--ansi|--no-ansi Force (or disable --no-ansi) ANSI output
-n, --no-interaction Do not ask any interactive question
--env[=ENV] The environment the command should run under
-v|vv|vvv, --verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
つまり前のバージョンのdefault bladeが消滅したってことね。そろそろblade以外も使えよ、みたいなテンションを感じますナ。
buildしてみる
% npm run build
> build
> vite build
vite v4.4.9 building for production...
✓ 50 modules transformed.
public/build/manifest.json 0.26 kB │ gzip: 0.13 kB
public/build/assets/app-5488929d.css 26.74 kB │ gzip: 5.33 kB
public/build/assets/app-d5e6a928.js 143.48 kB │ gzip: 52.91 kB
✓ built in 2.19s
このように npm run buildするといくらでもビルドしてくれるので、とりあえず、やってみましょう
js周り
resources/js/app.js
import './bootstrap';
+
+import Alpine from 'alpinejs';
+
+window.Alpine = Alpine;
+
+Alpine.start();-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
/**
* We'll load the axios HTTP library which allows us to easily issue requests
@@ -6,7 +7,8 @@
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@@ -18,11 +20,16 @@
// import Echo from 'laravel-echo';
-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
// window.Echo = new Echo({
// broadcaster: 'pusher',
-// key: process.env.MIX_PUSHER_APP_KEY,
-// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-// forceTLS: true
+// key: import.meta.env.VITE_PUSHER_APP_KEY,
+// cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
+// wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+// enabledTransports: ['ws', 'wss'],
// });
requireが全面的に廃止され、importに書き変わっている
tailwind.config.js とかもフォントがちょっと差しかわったくらいすね
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require('@tailwindcss/forms')],
};
つわけでlaravel9になって一番の変更点はviteが(ほぼ)強制的に導入されたことくらいで(でも実際vite使った方がいいすよ)、記事が少ないのでlaravel10も見ていこう、というかlaravel9と10は方向性がまあ基本的には同じなので。
laravel10
resources/js/bootstrap.js
-import _ from 'lodash';
-window._ = _;こういったものが削除された。lodashはその役割を終えたようだ。
package.jsonの変更
{
"private": true,
+ "type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
@@ -9,8 +10,7 @@
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.1.2",
- "laravel-vite-plugin": "^0.7.2",
- "lodash": "^4.17.19",
+ "laravel-vite-plugin": "^0.8.0",
"postcss": "^8.4.6",
"tailwindcss": "^3.1.0",
"vite": "^4.0.0"
type: moduleが追記されており、これからはもうrequireしないからみたいな感じなんすかね。
tailwind.conf.js の変更
-const defaultTheme = require('tailwindcss/defaultTheme');
+import defaultTheme from 'tailwindcss/defaultTheme';
+import forms from '@tailwindcss/forms';
/** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
@@ -16,5 +17,5 @@
},
},
- plugins: [require('@tailwindcss/forms')],
+ plugins: [forms],
};
これもexport default形式に書き直されている。importとrequireについては…
まあ他にもあるんだろうけど、まとめ
laravel10とかでたとえば新たにサイトを起こす場合で、bladeを使う場合、一応推奨はtailwind cssを使ったコンポーネントベースで設計し、可能であればalpine.jsでjsの動きを書いてみ、って感じのようである。まあでもそこまでするならinertia.jsでreactとかvue3とか使ったら？みたいな感じもあるし、一方、laravel ui + bootstrap5 + jqueryみたいなレガシーなサイトも作る事ができる(ただし、一応非推奨であーる)
ちう事なので、せっかくalpine.jsが起動してるなら使わにゃならんかという事で、alpine.jsを次回はちょっと見てみよう(初心者ですが…)