استفاده از Mix بجای Vite در لارول (Laravel)
به‌روزرسانی در 1402-10-30

استفاده از Mix بجای Vite در لاراول (Laravel)

در این مقاله شما می آموزید چطور از لاراول Vite به لاراول 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 #

میبایست اسکریپت های 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 ها از طریق JS #

اگر CSS ها از طریق JS استفاده میشوند، باید دستور زیر را حذف کنید:

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

حذف vite@ و افزودن ()mix #

میبایست Blade directive های vite@ رابا تگ های <script> و <link rel=“stylesheet”> و کمکی ()mix جایگذاری کنید:

				
					- @viteReactRefresh
- @vite('resources/js/app.js')
+ <link data-optimized="1" rel="stylesheet" href="https://modernandishan.ir/wp-content/litespeed/css/d4f9bbf5c3105be26712cdb837b0563d.css?ver=0563d">
+ <script data-optimized="1" src="https://modernandishan.ir/wp-content/litespeed/js/92077b85a0d7bf6ef2d5644b11efed89.js?ver=fed89" defer></script>
				
			

حذف پلاگین laravel-vite-plugin #

حال میتوانید Vite و laravel-vite-plugin را حذف کنید:

				
					npm remove vite laravel-vite-plugin

				
			

همچنین مسیر هایی که با حذف پلاگین دیگر استفاده نمیشوند را از gitignore. حذف کنید:

				
					- /bootstrap/ssr
- /public/build

				
			
نظر درباره این مستند؟

ثبت سفارش سریع پروژه شما

کمتر یک ساعت در ساعات کاری با شما تماس حاصل میشود. تنها پروژه ی خود را طور خلاصه شرح دهید یا اگر فایلی مرتبط با ان دارد باگذاری کنید.

ارتباط سریع

فرم زیر را تکمیل کنید. در ساعات کاری کمتر از یک ساعت پس از ارسال با شما تماس کرفته میشود.