סידור קבצים של SCSS אבל ב־JavaScript – ליצור Bundle מקבצי JS נפרדים תוך כדי תכנות

אם אתם מפתחי ווב לא מכירים את Prepros, אז הוא מוסר לכם היי.

תמסרו לו בחזרה.

וזו התחלה של ידידות מופלאה.

צילום מסך של התוכנה האהובה עליי לפיתוח ווב – Prepros
צילום מסך של התוכנה האהובה עליי לפיתוח ווב – Prepros

תוכנת Prepros יודעת לקחת את קבצי ה־Web שלנו ולקמפל אותם בזמן אמת ולהעלות לשרת, רק צריך ללחוץ CTRL+S והכל יתבצע ברקע.

זה כמו Webpack, אבל בלי לכתוב שורה אחת של קוד – הכל עם UI נעים ואינטואיטיבי.

מה התוכנה יודעת לעשות?

  • לקחת קבצי ווב (html, css,js ועוד) ולעשות להם Minify בזמן אמת.
  • לקמפל קובץ SCSS עם הסתעפות של הרבה קבצים ולחבר אותם לקובץ CSS אחד, נקי וקל־משקל.
  • להעלות לשרת FTP שתגדירו באופן אוטומטי מיד לאחר השמירה.
  • והיום גיליתי דבר נוסף – הוא יודע לקמל גם קבצי JavaScript. ארחיב על זה עכשיו.

בתור מפתח ווב, אני מתבייש לומר שעד לפני שבועיים הייתי יוצר קובץ JS אחד ארוך ומייגע.

זה אומר שאם הייתי רוצה לחפש שורת קוד או לחזור ולתקן משהו, זה היה מצריך חיפוש שלוקח (במקרה הטוב) דקה או שתיים, כשיש דרך טובה יותר לארגן את הפונקציות והקוד שלנו.

אם אתם מכירים SCSS, אתם בוודאי יודעים לאן אני חותר.

קבצי JS נפרדים!

כמה פשוט.

יוצרים קובץ main.js אחד שבתוכו יש imports לקבצים השונים והתוכנה של Prepros כבר תזהה את השינויים החדשים שלכם ותייצא לכם קובץ main.dist.js, ואם תגדירו כך, היא אפילו תעלה אותו לשרת שתרצו – וכל זה רק מלחיצה על CTRL+S באחד מקבצי ה־JS שנמצאים בעץ.

הנה הדרכה של Prepros על איך עושים זאת בדיוק.


אם מצאתם את זה מועיל, תשלחו את זה לחבר המתכנת שלכם (או החברה).

מאחל לנו להתייעל כל הזמן.

דברים שאני כותב, קוד ופיתוח אתרים, , , , , , , ,

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פוסט בהפתעה?