web application bundler چیه‌ ؟

ده‌سپیك

كاتێك ده‌ته‌وێت ماڵپه‌رێك دروست بكه‌یت پێویستیت به‌ ٣ زمانی سه‌ره‌كیه‌ HTML,CSS,Javascript ئه‌مه‌ش راستبوو له‌ زوو یان كاتێك له‌ ئاستی سه‌ره‌تادایت،

به‌ڵام گه‌ر به‌وشیوازه‌ كۆد بنوسیت هه‌ر زوو هه‌ست به‌ چه‌ند كێشه‌یه‌ك ده‌كه‌یت بۆ نموونە هه‌ست ده‌كه‌یت كۆده‌كه‌ت رێكناكه‌ویت ئاڵۆزی تێده‌كه‌وێت ئه‌مه‌ش باش نییه‌ گه‌ر بته‌ویت له‌ داهاتوو گه‌شه‌ به‌و كۆده‌ بده‌یت بۆیه‌ كۆمه‌ڵێك بیرۆكه‌ دانران بۆ ئاسانكاری كاری گه‌شه‌پێده‌ران و جۆره‌ها لایبره‌ری و فره‌یمۆرك كه‌وتنه‌ ده‌ركه‌وتن له‌وانه‌ JQuery, ReactJS, Anguler,VueJs, Sass, Less, template engines وه‌ زۆرانی دیكه‌ ئه‌وانه‌ هه‌مووی ئامرازی زۆر به‌كه‌ڵكن به‌ڵام گه‌ر سه‌یری سه‌رچاوه‌ و شیوازی كۆد نوسینی هه‌ندیك له‌مانه‌ بكه‌یت ده‌بینیت كه‌ زۆر جیاوازن له‌وه‌ی كه‌ هه‌یه‌ ئه‌مه‌ش به‌هۆی ئه‌وه‌ی زۆربه‌ی ئه‌و لایبره‌ری و فره‌یمۆركانه‌ وه‌شانیكی زۆر نویتر به‌كارده‌به‌ن له‌وه‌ی كه‌ ویبگه‌ره‌كان به‌كاریده‌به‌ن لە ئەنجامدا ئەم جۆرە کۆدانە ناتوانن لەناو وێبگەراکاندا کاربکەن ، بۆیه‌ پیویستیه‌ك هاته‌ كایه‌وه‌ كه‌ ئامرازیك هه‌بیت بتوانیت هه‌موو ئه‌م سه‌رئیشه‌یه‌ چاره‌سه‌ر بكات و ئەم شێوازە کۆد نوسینە وەرگێرێتە سەر شێوازێکی کۆنتر کە وێبگەرەکان تێبگەن و هەم هەندێک ئاسانکاری دیکە بخەنە بەردەست بۆ گەشەپێدەر کە بتوانێت کرداری Debug کردن ئاسانتر بکات بەم جۆرە ئامرازانە دەگوترێت bundler.

سودی بەکارهێنانی Bundler چیە ؟

وەڵامی ئەم پرسیارە ئاسانە:

1.  ئەو کۆدەی دەینوسیت زۆر خێراتر دەگاتە ناو وێبگەر و بەمە ماڵپەرەکەت خێراتر دەبێت چوونکە هەموو کۆدەکانت دەکات بە یەک فایل و ناوی لێدەنێت Bundle.js.
2. دەتوانیت سوودی زۆر ببینیت لە جۆرەها لایبرەری و فرەیمۆرک کە لەوانەیە بە ستایلی نوێی جاڤاسکرپت نوسرابن
3. ئامرازی Live Reload زۆربەی بەندڵەرەکان ئەم تایبەتمەندیەیان هەیە واتە گەر کۆدێکت گۆڕی لەناو فالەکان گۆری وێبگەرەکە درکی پێدەکات
4. لەبەر ئەوەی لایبرەری و فرەیمۆرکی زیاتر بەکاردەبەیت کە لە شوێنی خۆیاندا زۆر تێست کراون و کێشەیان کەمە کەواتە کوالیتی کۆدەکەت بەرزدەبێتەوە.
5. لەبەر شێوازی کارکردنی بەندڵەرەکان ئاسانکاری زۆرمان بۆ دەکات کە بتوانینن فایلەکانمان بە شێوازێکی جوانتر دابرێژین و لەبەر ئەوەی ستایلی ES2015 ئامرازی زۆر دەخاتە بەردەست  وەک import کردنی فایلەکانی جاڤاسکریپت لەناو یەکتری وادەکات بتوانین خۆمان بەدوور بگرین لە  global variable ەکان کە لە زوو بەکاردەهاتن لەناو لایبرەریەکانی وەک JQuery ئەمەش تێگەشتن لە کۆدەکان قورستر دەکات و کرداری دۆزینەوەی کێشەکان ناخۆشتر دەکات کەواتە رێگەمان دەدات بە دانانی ئەندازەیەکی باشتر بۆ سیستەم و ماڵپەرەکانمان.

کردارەکانی Bundler ذەیکات چیە ؟

چوار کرداری سەرەکی دەکات ئەوانیش:

1. وەرگێران و کۆمپایل(ترانسپایڵ) کردنی زمانە بەرزەکان بۆ هەرسێ زمانی بنەرەتی وەک HTML, CSS, Javascript
   لە ‌HTML دا ئامرازی وەکو Pug و Haml هەن کە پێیان دەگوترێت templating engine:
   نموونەیەک
   
   لە CSS یشدا ئامرازی وەکو Sass,Less کە دوو ئامرازن نوسینی ستایل ئاسان دەکەن
   بە بەردەست کردنی هەندێت تایبەتمەندی وەک گۆراوەکان نموونە:
   
   لە زمانی جاڤاسکریپتیش ستایلی ES6 کە وەشانێکی نوێی جاڤاسکریپتە تاوەکو ئێستا  هەموو ستاندەرەکانی لە لایەن هەموو وێبگەرەکان بە تەواوی پشتگیری ناکرێ:تێبینی: بەکارهێنانی ئەم ئامرازانەی سەروە واتلێدەکات بە شێوازێکی زۆر خێراتر و باشتر کۆدبنوسیت و متمانەت بە کۆدەکەت هەبێت ?
2. ناردنی فایلەکانمان بۆ وێبگەر بە شێوازی ئاسایی کاتێک دوو کرتە لەسەر فایلێکی HTML دەکەیت راستەوخۆ لەناو وێبگەرەکە دەبێتەوە بەڵام ئەم رێگایە کێشەی ئەوەیە  وێبگەرەکە پرۆتۆکۆڵی file بەکاردەهێنیت بۆ وەرگرتن و نیشاندانی ئەو فایلە ئەوەش  مانای ئەوەیە کە پەرەکەمان ناتوانێت داواکاری AJAX بنێرێت بۆیە زۆربەی bundler ەکان فایلەکان لە رێگەی HTTP Server ێکەوە دەکەنەوە کە سەرئێشەیەکی زۆرمان لەکۆڵ دەکاتەوە.
3. ریلۆد کردنی وێبگەرەکەمان کاتێک فایلێک دەگۆرین، ئەم ریلۆد کردنە خێراترە لە ریفرێشی ئاسایی کە دەیکەین چوونکە بەس گۆرانکاری ئەو فایلە دەبینین کە گۆردراوە بەبێ ریفرێش کردنی وێبگەرەکە.
4. ئامادەکردن بۆ بڵاوکردنەوە لەبەر ئەوەی bundler ەکان کۆدەکەت دەکەن بە یەک فایل بۆ ئەوەی خێراتر بێت لە کاتی بڵاوکردنەوە چونکە تۆ کاتێك ماڵپەرێک یان سیستەمێک build دەکەیت گرنگی نادەیت بە دۆزینەوەی کێشەکان بەڵکو بە خێرای و وابکەیت bandwidth ێکی کەم ببات لە کۆتایدا کەمێک پاراستنی کۆدەکەت.
   بۆیە bundler سێ کردار ئەنجام دەدات:
   a. بچوک کردنەوەی فایلەکانت بە لابردنی سپەیس خەتی بەتاڵ و گۆرینی ناوی گۆراوەکان نموونە
   پێش بچووکردنەوە
   دوای بچوککردنەوە
   دەرئەنجامەکەی
   b. لێکدانی کۆدەکان زۆربەی جار پرۆجێکتەکەمان دەکەینە چەند فایلێک bundler ەکان هەمو کۆدەکەت دەکەن بە یەک فایل.
   

   c. تێکدان و ناشرینکردنی ستایلی کۆدەکەت بۆ ئەوەی تێگەشتنی لێی قورس بێت ئەوەش کەمێک لایەنی ئاسایشی باشتر دەکات
   نموونە
   

فێرکاری بەکارهێنانی ReactJS لەگەل Parceljs

سەرچاوەکان

1. Bundle and minify static assets in ASP.NET Core

2. Beginner’s Guide to Web Development: Supercharge your Productivity with a Bundler

3. To bundle and minify JavaScript files, can I just concatenate file content then minify

4. uglify-js