آکادمی برنامه نویسی آی دی ئی جت

لاراول میکس در لاراول

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

ابتدا باید Laravel Mix را توسط npm نصب کنید:

دستور زیر در ترمینال وارد کنید


    npm install --save-dev laravel-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 application. By default, we are compiling the Sass
    | file for the application as well as bundling up all the JS files.
    |
    */

    mix.js("resources/js/app.js" , "public/js")
        .sass("resources/sass/app.scss" ,"public/css")
        .sourceMaps();

اسکریپت های 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=۱۰۰۰",
        +     "hot": "mix watch --hot",
        +     "prod": "npm run production",
        +     "production": "mix --production"
          }

برای استفاده از پیشوند MIX_ به جای VITE_، باید متغیرهای محیطی را که به صراحت در فایل‌های .env شما در معرض دید هستند، به‌روزرسانی کنید:


    - 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}"

اگر CSS خود را از طریق جاوا اسکریپت وارد می کنید، باید این عبارات را حذف کنید:


    - import "../css/app.css";

جایگزین @vite با mix()

شما باید دستورالعمل @vite Blade را با تگ های <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 و پلاگین لاراول می تونید حذف نصب کنید: