سلام من از vite دارم برا ی پروژه استفاده می کنم ی مشکل دارم اینکه من دارم ی سری دیتا رو از طریق ajax از می گیرم (از ی کنترل و اونم از دیتابیس) و تو select لیست می کنم که کاربر بتونه انتخاب کنه وقتی کاربر هرکدوم از این دیتاها رو انتخاب کنه ی فانکشن دیگه باید اجرا بشه .
وقتی از دستور npm run dev استفاده می کنم همه چی اکیه و همه چی اجرا می شه هر دو تابع (تابعی که وظیفه گرفتن دیتا بصورت ajax رو داره و تابعی که موقع انتخاب این دیتاها باید اجرا بشه) ولی وقتی dev استفاده نمی کنم و build می کنم دیگه تابع دومیه اجرا نمی شه و تو console این ارور رو برمی گردونه
Uncaught ReferenceError MakeChangeOnData is not defined at HTMLSelectElement.onchange
برای اون select از onchange استفاده کردم برای اینکه تابع دوم رو فراخونی کنه ولی تابع دومم که MakeChangeOnData رو نمی شناسه
Update:
من الان فایل کامپایل شده رو نگاه کردم اصن اون تابع تو فایل نهایی که بیلد می شه وجود نداره و اونو انگار حذف کرده و مینیفای یا کامپایل نمی کنه
مشکل پیدا کردم کجاس
vite وقتی میاد build می کنه فایل های js رو میاد فانکشن و متغیرهایی که ازش استفاده نشده حذف می کنه ( انگار ما بیکاریم کد اضافه بنویسیم که ازش استفاده نکنیم !!!) برای اینکه حذف نشه اون فانکشن باید تو اون فایل js ازش استفاده بشه
تو کد های من توی onchange تابع MakeChangeOnData استفاده کردم ولی توی استرینگ تمپلیت ( داخل
) تابع رو اسم بردم اگه ان رو توی ' ' می ذاشتم چون تابع استفاده شده دیگه حذفش نمی کنه
حالا ایا راهی هست که ب vite بگیم این حذف کردن رو اجرا نکنه؟
و مورد بعدی اینکه تو NWidart ماژول چجوری اون فایل vite.config رو بیارم توی کار که دیگه فایل های js css رو از vite.config اصلی برنامه فراخوانی نکنم اتوماتیک برای هر ماژول vite.config اون ماژول کارهای کامپایل رو انجام بده . برای من کامپایلی صورت نمی کنه وقتی بیلد میز نم جایی ساخته نمی شه
@Arshiamohammadei
دوست عزیز دقیقا مشکل همینه که بعد از build این فانکشن از فایل ساخته شده حرف می شه حتی توی vite.config من minify: false
قرار دادم گفتم شاید تو فرایند minify این مشکل بوجود میاد ولی دیدم فایله که ساخته شده باز اون فانکشن رو نداره
کد هامم چیز خیلی پیچیده نیست:
typeRoomsSelect.addEventListener('change', e => {
e.preventDefault();
let typeRoom = typeRoomsSelectEl.value;
guestSelectionBox.innerHTML = '';
axios.post('/reserve/get-room', {'type': typeRoom},
{
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'Content-Type': 'application/json'
}
}
).then(function (response) {
let rooms = response.data.data;
if (rooms.length > 0) {
let options = `<option value="" disabled selected> انتخاب</option>`;
rooms.forEach(room => {
options += `<option value="${room.title}">${room.title}</option>`
});
roomSelectionBox.innerHTML = `
<label class="block font-medium text-sm text-gray-700 dark:text-gray-100" for="roomSelection">انتخاب</label>
<select title="انتخاب نوع مکان اقامت" onchange="MakeChangeOnData(this.value)" name="room" required id="roomSelection" class="bg-white dark:bg-slate-600 dark:text-gray-200 border border-slate-200 px-3 py-2 rounded-lg focus:outline-2 focus:outline-blue-500 block w-full">${options}</select>`;
}
}).catch(function (err) {
console.log(err)
roomSelectionBox.innerHTML = '<p class="font-bold text-red-800">مشکلی بوجود آماده است لفا دوباره صفحه را بارگزاری کنید و اطلاعات را دوباره وارد نمایید. با تشکر</p>'
}).finally(() => {
WaitEl.innerHTML = '';
});
})
function MakeChangeOnData (room) {
let guestSelectionBox = document.getElementById('guestSelection')
guestSelectionBox.innerHTML = '';
axios.post('/reserve/get-guest', {'room': room},
{
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'Content-Type': 'application/json'
}
}
).then(function (response) {
let data = response.data.data;
let options = ``;
for (let i = 0; i <= data.guestCapacity; i++) {
options += `<option value="${i}">${i}</option>`
guestSelectionBox.innerHTML = `
<label class="block font-medium text-sm text-gray-700 dark:text-gray-100" for="guestSelection">تعداد مهمان</label>
<select name="guests" required id="guestSelection" class="bg-white dark:bg-slate-600 dark:text-gray-200 border border-slate-200 px-3 py-2 rounded-lg focus:outline-2 focus:outline-blue-500 block w-full">${options}</select>`;
}
}).catch(function (err) {
console.log(err)
guestSelectionBox.innerHTML = '<p class="font-bold text-red-800">مشکلی بوجود آماده است لفا دوباره صفحه را بارگزاری کنید و اطلاعات را دوباره وارد نمایید. با تشکر</p>'
}).finally(() => {
WaitEl.innerHTML = '';
});
}
حالا وقتی بیلد می کنم فقط
typeRoomsSelect.addEventListener('change', e => {
e.preventDefault();
let typeRoom = typeRoomsSelectEl.value;
guestSelectionBox.innerHTML = '';
axios.post('/reserve/get-room', {'type': typeRoom},
{
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'Content-Type': 'application/json'
}
}
).then(function (response) {
let rooms = response.data.data;
if (rooms.length > 0) {
let options = `<option value="" disabled selected> انتخاب</option>`;
rooms.forEach(room => {
options += `<option value="${room.title}">${room.title}</option>`
});
roomSelectionBox.innerHTML = `
<label class="block font-medium text-sm text-gray-700 dark:text-gray-100" for="roomSelection">انتخاب</label>
<select title="انتخاب نوع مکان اقامت" onchange="MakeChangeOnData(this.value)" name="room" required id="roomSelection" class="bg-white dark:bg-slate-600 dark:text-gray-200 border border-slate-200 px-3 py-2 rounded-lg focus:outline-2 focus:outline-blue-500 block w-full">${options}</select>`;
}
}).catch(function (err) {
console.log(err)
roomSelectionBox.innerHTML = '<p class="font-bold text-red-800">مشکلی بوجود آماده است لفا دوباره صفحه را بارگزاری کنید و اطلاعات را دوباره وارد نمایید. با تشکر</p>'
}).finally(() => {
WaitEl.innerHTML = '';
});
})
توی خروجی بهم می ده و فانکشن MakeChangeOnData حذف شده
این مورد تو چنتا فایل دیگه هم دارم که همین اتفاق براشون می افته
مشکل پیدا کردم کجاس
vite وقتی میاد build می کنه فایل های js رو میاد فانکشن و متغیرهایی که ازش استفاده نشده حذف می کنه ( انگار ما بیکاریم کد اضافه بنویسیم که ازش استفاده نکنیم !!!) برای اینکه حذف نشه اون فانکشن باید تو اون فایل js ازش استفاده بشه
تو کد های من توی onchange تابع MakeChangeOnData استفاده کردم ولی توی استرینگ تمپلیت ( داخل
) تابع رو اسم بردم اگه ان رو توی ' ' می ذاشتم چون تابع استفاده شده دیگه حذفش نمی کنه
حالا ایا راهی هست که ب vite بگیم این حذف کردن رو اجرا نکنه؟
و مورد بعدی اینکه تو NWidart ماژول چجوری اون فایل vite.config رو بیارم توی کار که دیگه فایل های js css رو از vite.config اصلی برنامه فراخوانی نکنم اتوماتیک برای هر ماژول vite.config اون ماژول کارهای کامپایل رو انجام بده . برای من کامپایلی صورت نمی کنه وقتی بیلد میز نم جایی ساخته نمی شه
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟