ارور در اجرای دستور watch در وب پک
وقتی واچ میکنم پشت هم بدون توفق کامپایل میکنه و وقتی صد درصد شد دوباره و دوباره اینکار رو میکنه نمیدونم مشکل از کجاست!
اینم کانفیگ من
https://gitlab.com/-/snippets/2014456اینم پکیج های نصبی:
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"autoprefixer": "^9.8.6",
"babel-loader": "^8.1.0",
"css-loader": "^4.2.2",
"file-loader": "^6.1.0",
"jquery": "^3.5.1",
"mini-css-extract-plugin": "^0.11.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^3.0.0",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"uglify-js": "^3.10.4",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}اینم ویدیو 2 مگی از لوپ شدن:
http://uupload.ir/view/3xfl_record_2020_09_13_00_58_44_863.mp4/گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
@imaniy
حقیقتش درکی از دستوری که فرستادید ندارم و نمی‌تونم راجع بهش نظری بدم. از چه ماژول بیلدری استفاده میکنید؟ webpack؟
پیشنهاد میکنم اگر laravel-mix استفاده نمی‌کنید حتما امتحانش کنید. معمولا کانفیگ کردن فایل webpack.js کار خیلی دشوار و ریسکی هست. نمونه اش همین دستورهای عجیب و غریبی که شاید دقیقا ندونیم کاربردشون چیه.
laravel-mix با همین دغدغه اومده و یک لایه روی webpack ایجاد کرده با دستور ها و سینتکس های خیلی تمیز تر. خوبیش اینه که استفاده ازش هم کاملا مستقل از پروژه تون هست و نباید حتما پروژه ی لاراولی باشه. مثل یک npm package نصب میشه و تمام.
👇👇👇
https://laravel-mix.com/
سلام دوست عزیز؛
اگر یک سرچ در گوگل بکنید می‌بینید که افراد زیادی قبلا با همین مشکل شما روبرو شده بودند و علت و راهکارهای متفاوتی هم ارائه شده. یکی از رایج ترین هاش نوع خاصی از ایمپورت کردن FontAwesome هست. و یا اشکال در نحوه آدرس دهی به فایل ها و یا عنوان فایل. به همین خاطر نمیشه اینجوری نظر قطعی داد.
یک سری به چند پیوند زیر بعنوان نمونه بزنید. راهکارش رو خودتون پیدا خواهید کرد:
https://dean.codes/laravel-mix-webpack-watch-command-causes-infinite-loop/
https://github.com/JeffreyWay/laravel-mix/issues/228
https://github.com/JeffreyWay/laravel-mix/issues/1942
https://stackoverflow.com/questions/50707646/laravel-mix-infinite-loop-when-using-npm-run-watch-l5-6/50713599
@mhyeganeh
محسن جان صدردصد سرچ کردم و به جواب نرسیدم که اینجا پرسیدم :)
بله منم گزینه های بالا همه رو تقریبا دیدم منم مشکلم دقیقا با فایل های scss هستش دقیقا هر فایل scss که اضافه میکنم میره تو loop نمیدونم چه کنم.
وقتی build میکنم هیچ مشکلی نست فقط وقتی واچ میکنم به مشکل میخورم.
@imaniy
اگر یک پروژه خام جدید هم ایجاد بکنید و قبل از اضافه کردن هر dependency جدید، آیا باز هم مشکل وجود داره...؟
اگر نه، باید دونه دونه پکیج ها رو فاکتور بگیرید و تست کنید تا به پیکجی برسید که داره چنین مشکلی براتون ایجاد میکنه. (طبق تجربه قبلی ها و مطابق لینک هایی که بالا فرستادم FontAwesome پر تکرارترینشون بود)
اگر از پکیج ها خاطر جمع شدید که مشکلی از اون سمت نیست باید برید سراغ فایل های SCSS تون و دونه دونه شون رو از مدار خارج کنید و دوباره تست کنید. وقتی به فایل مخرب رسیدید هم باز تکه تکه کدها رو کامنت کنید تا به خط کد مشکل زا برسید. احتمالا نحوه خاصی از آدرس دهی به فایل یا ... در یکی از فایل هاتون وجود داره که مسبب این معضل شده.
این راه هایی بود که مطابق لینک های بالا به نظرم من می‌رسه. نمیدونم خودتون قبلا انجام دادید یا نه... امیدوارم که مشکلتون زودتر حل بشه.
ضمنا کوچیک شما محمدحسنم :)
@mhyeganeh
ببخشید محمدحسن جان :)
فقط یه چیزی ایا دستور زیر استباه هستش چون اگه دستور پایین کامنت نباشه حتی وقتی واچ نکنم و فقط بخام بیلد کنم هم باز میرم تو لوپ.
watch: true,
watchOptions: {
ignored: ['build', '/\*\*\/*.html/', 'node_modules/**']
}@imaniy
حقیقتش درکی از دستوری که فرستادید ندارم و نمی‌تونم راجع بهش نظری بدم. از چه ماژول بیلدری استفاده میکنید؟ webpack؟
پیشنهاد میکنم اگر laravel-mix استفاده نمی‌کنید حتما امتحانش کنید. معمولا کانفیگ کردن فایل webpack.js کار خیلی دشوار و ریسکی هست. نمونه اش همین دستورهای عجیب و غریبی که شاید دقیقا ندونیم کاربردشون چیه.
laravel-mix با همین دغدغه اومده و یک لایه روی webpack ایجاد کرده با دستور ها و سینتکس های خیلی تمیز تر. خوبیش اینه که استفاده ازش هم کاملا مستقل از پروژه تون هست و نباید حتما پروژه ی لاراولی باشه. مثل یک npm package نصب میشه و تمام.
👇👇👇
https://laravel-mix.com/
@mhyeganeh
شنیدم برای یک اند کارهاست همونطور که از اسمش معلومه پس اگه عمومی هستش و استفاده ازش آسونه مبرم سمتش.
@imaniy
خیر. صرفا مختص فرانت اند کارهاست 😊
چون اساس کارش کمک به ما برای کامپایل کردن JS و CSS هست که یک حوزه کاملا در سمت فرانت محسوب میشه.
شعارش هم اینه:
An elegant wrapper around Webpack for the 80% use case.
و با دستور npm install laravel-mix --save-dev نصب میشه.
@mhyeganeh
اقا این میکس عجب چیزی بود ازش قافل شدیم با تشکر از شما تو پروژه تستی خوب بود حالا امیدوارریم تو پروژه واقعی هم خوب باشه و اذیت نکنه مثالا برای اضافه کردن prefixer و babel js و...
فقط یه چیز عجیب تو صفحه اصلی یه علامت تعجب (!) قرار میگیره خودش و کار من نیست :)
مبارکه 💪
عمده مواردی هم که اشاره کردید مثل prefix ها و babel و ... رو هم خودش هندل میکنه و کار خاصی نیاز نیست شما خودتون انجام بدید. سر فرصت داکیومنت هاش رو یک بررسی بکنید کامل دستتون میاد.
علامت تعجبه هم قطعا یکجایی وسط کدهاتون اشتباها تایپ شده. روش inspect بگیرید جای دقیقش رو مکان یابی کنید و مطابق با ساختار پروژه تون دنبالش بگردید. حتما پیدا میشه. نشد از گزینه سرچ در کل پروژه یا دایرکتوری IDE تون استفاده کنید و «!» رو سرچ کنید.
@mhyeganeh
با تشکر از پیگیری شما اره خیلی عجیبه معمولا خیلی چیزها رو خودش هندل میکنه ولی یه چیز عجیب داشتم داکیومنت رو میخوندم گفته بود مثالا با کمک postcss میاد prefixer ها رو خودکار هندل میکنه ولی برای من کاری نکرد پس باید بیام postcss رو نصب کنم و کانفیگ کنم تا اینکار رو بکنه؟
من تو وب پک باید postcss و postcss-loader و auto prefixer رو باید نصب میکردم و کانفیگ کردم تا کار می‌کرد.
@imaniy
خیر نیاز به نصب مورد جدیدی از سمت شما نیست و همه این موارد جزو dependency های خودش محسوب میشن و خودش قضیه رو باید به شکل کامل هندل بکنه.
پیشنهاد میکنم با هدف یادگیری با یک مثال خیلی ساده و ترجیحا نمونه کدها و کانفیگ خودش شروع و آزمایش کنید تا به مرور همه چیزش دستتون بیاد.
کامیونیتی قوی ای هم نسبتا داره و مشکلاتتون رو میتونید سرچ کنید. احتمالا پاسخش به وفور وجود داشته باشه.