install laravel mix

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام وقتتون بخیر من npm رو نصب کردم تمام چسز‌های مورد نیاز رو نصب کردم ولی فایل webpack.mix.js رو نمیبینم

ممنون میشم راهنمایی کنید و بفرمایید چطور باید نصب کینم

سلام،

از نسخه 9.19 به بعد vite جایگزین laravel-mix شده است.

برای مهاجرت به vite میتونید این لینک رو مطالعه کنید.

البته اگر ورژن جدید رو نصب کردید vite روی نسخه جدید نصب خواهد بود.

داخل وب در مورد vite مقالات زیادی نوشته شده است. (همچنین مقالات فارسی)

استاد ماندیس بحرینی ۲۷ تیر ۱۴۰۲، ۰۶:۱۹

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

گرگین ابتکار ۲۷ تیر ۱۴۰۲، ۰۹:۱۱

و اینکه داکیومنت اصلی خود لاراول رو هم از تاپیک‌های قبلی که بچه‌ها پرسیده بودند دیدم ولی زیاد متوجه نشدم

گرگین ابتکار ۲۷ تیر ۱۴۰۲، ۰۹:۲۵

من مقداری کار با vite رو یاد گرفتم ولی حین اجرای npm run dev به این ارور بر میخورم

> dev
> vite
file:///home/mohammadrasoul/video-share/node_modules/vite/bin/vite.js:7
    await import('source-map-support').then((r) => r.default.install())
    ^^^^^
SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)
    at async link (internal/modules/esm/module_job.js:42:21)

گرگین ابتکار ۲۷ تیر ۱۴۰۲، ۱۵:۵۹

node و npm رو به آخرین نسخه بروزرسانی کنید.

استاد ماندیس بحرینی ۲۸ تیر ۱۴۰۲، ۰۳:۴۴

به روزرسانی انجام شد

مشکل حل نشد?

گرگین ابتکار ۲۸ تیر ۱۴۰۲، ۰۳:۵۳

پروژتون رو بصورت کامل در گیتهاب قرار بدید یا زیپ کنید اینجا پیوست کنید تا بررسی کنم، شاید در فایل‌ها تغییراتی ایجاد کرده باشید.

استاد ماندیس بحرینی ۲۸ تیر ۱۴۰۲، ۰۷:۳۶

سلام خدمتتون

لینک

گرگین ابتکار ۲۸ تیر ۱۴۰۲، ۰۹:۴۰

یک سری نکات میارم جهت اصلاح؛

اول اینکه type در package.json روی module ست شده و این یعنی vite از ES Module برای import پکیج‌ها و فایل‌ها پیروی میکنه و تمام require‌ها باید تبدیل به import شود، برای مثال فایل app.js به این شکل خواهد بود:

import './bootstrap'
import '../css/style.css'
import '../css/responsive.css'
// etc...

فایل bootstrap.js به این شکل خواهد بود:

import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

نکته: از فایل vite.config.js لاین 3 ایمپورت source-map-support رو حذف کنید. (خودتون اضافش کردید)

اگر میخواید پکیجی ایمپورت کنید مثل jquery ابتدا نصبش کنید:

npm install jquery --save-dev

و بعد به فایل bootstrap.js اضافه میکنیم:

import $ from 'jquery';
window.jQuery = window.$ = $

این منطق برای تمام پکیج‌های دیگه هم میتونه استفاده بشه.مثل پکیج‌های چون bootstrap یا lodash یا ...

اگر پکیج jquery رو با npm نصب کردید از فایل‌های import ای که در app.js قرار داده بودید فایل دانلودی رو حذف کنید و به شکل بالا عمل کنید.

اگر فایل‌های پروژه رو میخواید import کنید یک سری پکیج رو هم نیاز به نصب دارید:

npm install ev-emitter desandro-matches-selector get-size fizzy-ui-utils outlayer

vite را در قسمت head قالب اضافه میکنیم:

@vite('resources/js/app.js')

همچنین خطاهای اجرا رو میتونید در تب console مرورگر هم مشاهده کنید.

استاد ماندیس بحرینی ۲۹ تیر ۱۴۰۲، ۰۴:۰۹

سلام متشکر از اقای موحد عزیز

با این روش مشکل خیلی کم تا حدودی برطرف شد ولی باقیش با کمک دوستان لاراولی برطرف کردم

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

لینک۲

آموزش ویدیویی

گرگین ابتکار ۲۹ تیر ۱۴۰۲، ۱۳:۵۵

موفق باشید.

در صورت حل مشکل تیک حل شده رو بزنید تا تاپیک از پیگیری خارج بشه.

بهترین پاسخ

مهندس آمنه خداپناهی ۳۰ تیر ۱۴۰۲، ۱۴:۵۳