مهاجرت از Vite به Laravel Mix

بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ
الْحَمْدُ لِلّٰه

مهاجرت از Vite به Laravel Mix

نصب کن Laravel Mix رو

اول از همه، تو به نصب mix با ماژول npm رو داری :

npm install --save-dev laravel-mix

تنظیم کن Mix رو

یک فایل ‍ webpack.mix.js توی ریشه پروژه ات بساز:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

اسکریپتای npm رو عوض کن

اسکریپتای npm رو در package.json عوض کن:
(علامت - منفی منظورش اینه که فلان خط برداشته شه و علامت + مثبت نشون میده که فلان خط اضافه شه)

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

Inertia (اگه داریش)

Vite یک تابع کمکی نیاز داره واس وارد کردن عناصر صفحه که با Laravel Mix نیاز نمیشه. میتونی طبق پایین پاک کنی:

- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

  createInertiaApp({
      title: (title) => `${title} - ${appName}`,
-     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+     resolve: (name) => require(`./Pages/${name}.vue`),
      setup({ el, app, props, plugin }) {
          return createApp({ render: () => h(app, props) })
              .use(plugin)
              .mixin({ methods: { route } })
              .mount(el);
      },
  });

متغیرای environment رو عوض کن

باید اون متغیرایی که رو به طور صریح و تابلو داخل فایلهای

.env

و متغیرای هاست های میزبانی مثل Forge پر شده اند رو برای استفاده، پیشوندشون رو از

VITE_

به

MIX_

عوض کنی:

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

همچنین باید اونجاهایی توی کد جاوااسکریپتت که اونا رو میگیری (منظورم مقادیر متغیرای environment هست) از نام متغیر جدید و سینتکس node، استفاده کنی:

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

ایمپورت های Css رو از راه(ها) ی جاوااسکریپتت حذف کن

اگر داری Css ها رو از طریق جاوا اسکریپتت استفاده میکنی، باید این چنین دستورات رو بپاکی:

- import '../css/app.css';

عوض کن @vite رو با mix()

باید Blade directive های

@vite

رو با تگ های

<script>

و

<link rel="stylesheet">

و کمکی

mix()

، جایگذاری کنی:

- @viteReactRefresh
- @vite('resources/js/app.js')
+ <link rel="stylesheet" href="{{ mix('css/app.css') }}">
+ <script src="{{ mix('js/app.js') }}" defer></script>

حذف کن Vite و Laravel Plugin رو

Vite و Laravel Plugin می تواند حذف شود:

npm remove vite laravel-vite-plugin

بعد، ممکنه بخوای فایل کانفیگ Vite ات رو حذف کنی:

rm vite.config.js

همچنین ممکنه که بخوای مسیرایی رو که دیگه استفاده نمیشه از

.gitignore

پاک کنی:

- /bootstrap/ssr
- /public/build

منبع : https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix
اگه بشه اینو جزو مقالات کنین که بدرد بخورهست ;)