پخش کردن کدهای زیاد یک برگه به چند برگه با کمک bundler و compiler و task runner ها

13 تیر 1400

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

برای تکه تکه کردن کدها در Nodejs راحت میتوان از require و module.exports استفاده کرد. برای فرانت اند چطور؟ برای جاوااسکریپت های سمت کاربر میتوان همانند Nodejs عمل کرد یا بهتر از آن از import استفاده کرد که در ES6 رونمایی شده است.

اما راه حل به اینجا ختم نمیشود. فقط با import from و export نمیتوان بخشی از کدهای یک برگه صد خطی را به برگه ای دیگر انتقال داد تا راحت تر توسط همکاران برنامه نویسی که بعد از ما آن را میخوانند, قابل درک باشد. باید از یک bundler بهره برد. مثل webpack یا  rollup.js ! (تفاوت این دو چیست؟)

تاکنون نام compiler های جاوااسکریپت را شنیده اید؟ مثلا babel.js ! آیا یک compiler همان کاری را میکند که یک bundler انجام میدهد؟ خیر! اینطور نیست!

منظور از bundler یعنی جمع آوری تمام کدها از تمام فایل های import شده و تولید یک فایل بزرگ! اما compiler فقط قاعده نوشتاری ES6 و ES7 و … را به ES5 تبدیل میکند تا در موتور بروزر خوانا باشد. موتور بروزر نمیتواند ES6 یا ES7 را بخواند. فقط ES5 را میتواند بخواند. بخاطر همین از compiler استفاده میکنیم.

هنگامی که از یک bundler مانند rollup.js و webpack یا نمونه های دیگر مانند gulp.js و grunt.js استفاده میکنید, میتوانید یک compiler مانند babel.js را در فایل تنظیمات bundler اضافه کنید. بنابراین bundler ها میتوانند همزمان با bundle کردن, compile هم بکنند. کدهای ES6 و ES7 را به ES5 تبدیل کنند و همه تبدیل شده ها را بصورت یک فایل خروجی دهند.

تسک رانر های gulp و grunt میتوانند علاوه بر باندل کردن کدهای جاوااسکریپت در امور css و html هم دخالت کنند بخاطر همین به آنها task runner میگویند.