Cara Migrasi Dari Laravel Mix Ke Vite

Tim Laravel mengumumkan bahwa Vite sekarang menjadi bundler aset frontend default. Juga, tim Laravel meluncurkan plugin vite resmi

Mengapa Vite

Vite adalah generasi baru alat pembuatan frontend yang menyediakan lingkungan pengembangan yang sangat cepat dan menggabungkan kode Anda untuk produksi. Dokumen resmi mengapa vite memiliki detail mendalam.

Migrasi dari Laravel Mix ke Vite

Kami akan memigrasi panel admin Dasar kami dari Laravel Mix ke Vite. Migrasi melibatkan langkah-langkah di bawah ini. Plugin Laravel Vite resmi menyertakan panduan migrasi mendalam.

1. Instal Vite dan Plugin Laravel
2. Konfigurasikan Vite
3. Perbarui skrip NPM
4. Ganti kebutuhan untuk mengimpor
5. Perbarui variabel lingkungan
6. Ganti mix() dengan @vite
7. Hapus Campuran Laravel
8. Konfigurasikan Tailwind
9. Menggunakan Layar
10. Hapus cache
11. Hot Refresh

1. Instal Vite dan Plugin Laravel

Pertama, Anda perlu menginstal Vite dan Laravel Vite Plugin menggunakan npm

npm install --save-dev vite laravel-vite-plugin

Jika Anda menggunakan Vue atau bereaksi, plugin Vite tambahan perlu diinstal untuk proyek Anda

npm install --save-dev @vitejs/plugin-vue
	npm install --save-dev @vitejs/plugin-react

2. Konfigurasikan Vite

Buat file vite.config.js di root proyek Anda

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

3. Perbarui skrip NPM

Perbarui skrip NPM Anda di package.json

"scripts": {
-     "dev": "npm run development",
-     "development": "mix",
-     "watch": "mix watch",
-     "watch-poll": "mix watch -- --watch-options-poll=1000",
-     "hot": "mix watch --hot",
-     "prod": "npm run production",
-     "production": "mix --production"
+     "dev": "vite",
+     "build": "vite build"
  }

4. Ganti `require` untuk `import`

Vite hanya mendukung modul ES, jadi jika Anda memutakhirkan aplikasi yang ada, Anda perlu mengganti pernyataan require() dengan import. Anda dapat merujuk ke permintaan tarik ini sebagai contoh.

resources/js/app.js

-require('./bootstrap');
+import './bootstrap';import Alpine from 'alpinejs';

resources/js/bootstrap.js

-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 @@ window._ = require('lodash');
  * 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,15 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';// import Echo from 'laravel-echo';-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;

5. Perbarui variabel lingkungan

Buka file .env Anda dan di lingkungan hosting seperti Forge untuk menggunakan awalan VITE_ alih-alih MIX_

- MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Anda juga perlu memperbarui referensi ini dalam kode JavaScript Anda untuk menggunakan nama variabel baru dan sintaks Vite:

resources/js/bootstrap.js

-    key: process.env.MIX_PUSHER_APP_KEY,
-    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+    key: import.meta.env.VITE_PUSHER_APP_KEY,
+    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,

6. Ganti `mix()` dengan `@vite`

Kita perlu menggunakan direktif @vite Blade alih-alih helper mix(). Ini akan secara otomatis mendeteksi apakah Anda menjalankan dalam mode serve atau build dan menyertakan semua <script> dan <link rel="stylesheet"> yang diperlukan untuk Anda

resources/views/layouts/app.blade.php

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
         <!-- Scripts -->
-        <script src="{{ asset('js/app.js') }}" defer></script>
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased">
         <div class="min-h-screen bg-gray-100">

Semua titik masuk harus cocok dengan yang digunakan di vite.config.js Anda.

7. Hapus Campuran Laravel

Paket Laravel Mix sekarang dapat dihapus

npm remove laravel-mix

Dan Anda dapat menghapus file konfigurasi Mix Anda

rm webpack.mix.js

8. Konfigurasikan Tailwind

Kami menggunakan Tailwind, jadi kami perlu membuat file postcss.config.js. Tailwind dapat menghasilkan ini untuk Anda secara otomatis

npx tailwindcss init -p

Atau, Anda dapat membuatnya secara manual:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Jika Anda menggunakan plugin PostCSS lain, seperti postcss-import, Anda harus memasukkannya ke dalam konfigurasi Anda.

9. Menggunakan layar

Kami menggunakan Sail, jadi kami perlu mengaturnya untuk meneruskan port yang Anda gunakan ke wadah. Perbarui our docker-compose.yml untuk menambahkan port 5137.

ports:
    - '${APP_PORT:-80}:80'
    - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'

Server pengembangan akan berjalan di dalam wadah. Untuk menginstal dependensi, gunakan sail npm ci. Kemudian sail run dev untuk memulai server.

Konfigurasikan Vite untuk mendengarkan 0.0.0.0 jika Anda menggunakan Windows dengan WSL, juga diperlukan host. Lihat masalah https://github.com/laravel/vite-plugin/issues/49

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

10. Hapus cache

Jika Anda mendapatkan layar di atas setelah menjalankan npm run dev Coba saja setelah menghapus cache aplikasi

php artisan optimize:clear

11. Hot Refresh Dengan Vite

Paket vite-plugin Laravel versi terbaru akan memuat ulang halaman penuh saat Anda mengedit template blade. Juga, mereka menyediakan opsi konfigurasi untuk menambahkan file dan folder.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Catatan: Konfigurasi refresh bila disetel ke true, plugin Laravel Vite akan menyegarkan halaman saat Anda memperbarui file di jalur berikut:

routes/**
resources/views/**

Anda dapat mengonfigurasi file dan folder Anda

refresh: [
    'resources/routes/**',
    'routes/**',
    'resources/views/**',
],

Lihat selengkapnya Bekerja dengan Blade & Rute dalam dokumentasi resmi untuk detail lebih lanjut tentang opsi konfigurasi.

Jika Anda menggunakan Sail di windows, coba opsi tontonan server

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Akhirnya kita telah berhasil memigrasikan panel Admin kita dari Laravel Mix ke Vite.