آموزش ویژگی های ECMAScript 6 (جلسه 29) : آموزش کار با Module - قسمت 2

همونطور که اطلاع دارید در جلسه قبل مقدماتی در مورد Module ها و کار با اونا بهتون توضیح دادیم. در این جلسه میخوایم این موضوع رو ادامه بدیم و مثالهای عملی و کاربردی رو براتون بزنیم تا بصورت کامل با اونا آشنا بشید.

مثالی ساده برای یادگیری Module

در جلسه قبل مقدماتی در مورد ماژول ها رو گفتیم. خب در اینجا میخوایم بصورت عملی کار با Module ها رو شروع کنیم. یک پوشه بنام module میسازیم و فایلهای index.html و utility.js و app.js رو به وجود میاریم. هدف اینه که کدها و توابعی رو درون فایل utility.js قرار بدیم و اونا رو export کنیم و در فایل app.js چیزایی که لازم داریم رو import کرده و ازشون استفاده کنیم. در نهایت هم فایل app.js رو در فایل index.html لود میکنیم تا بتونیم خروجی رو در مرورگر مشاهده کنیم.

خب در utility.js کدهای زیر رو قرار میدیم:

همونطور که دیدید 2 تابع generateRandom و sum رو به وجود آوردیم. تابع generateRandom برای ساخت یک عدد تصادفی و تابع sum برای جمع کردن دو عدد با یکدیگر به کار می رود. در خط آخر با استفاده از کلمه کلیدی export دو تابع رو استخراج کردیم. میبینید که نام توابع درون {} قرار گرفته است و با استفاده از کاما از هم جدا شده است. با اینکار این توابع قابل import شدن در فایلهای دیگر هستند.

خب حالا میخوایم درون فایل app.js از این توابع استفاده کنیم. درون app.js کدهای زیر رو قرار میدیم:

همونطور که میبینید در ابتدای کار و در خط اول با استفاده از کلمه کلیدی import توابع خروجی گرفته شده generateRandom و sum رو از utility وارد کردیم. اگر یه مقدار انگلیسی بلد باشید هم میفهمید که کدها خیلی خوانایی بالایی دارند و با خواندن اونا متوجه میشیم که چیکار میکنن. در خط اول utility خالی نوشته شده و js اون قرار نگرفته چون فرمت فایلها بصورت پیش فرض js در نظر گرفته شده است و دیگه لازم نیس اونا رو قرار بدین. همونطور که میبینید قبل از utility یک ./ قرار گرفته و به این معنا هست که این فایل در همین دایرکتوری که app.js هست، قرار داره. در خط 3 و 4 هم از توابع import شده، استفاده کردیم. خب تا همینجا میخوایم خروجی رو در مرورگر ببینیم. برای اینکار درون فایل index.html کدهای زیر رو قرار میدیم:

همونطور که میبینید با استفاده از تگ script فایل app.js رو قرار دادیم. حالا اگر index.html رو باز کنیم، در Console با ارور زیر مواجه خواهیم شد:

همونطور که میبینید ارور Unexpected token import نمایش داده شده.

همونطور که میبینید مرورگر کلمه import رو متوجه نمیشه و از اون پشتیبانی نمیکنه. مرورگرها تقریبا از همه ویژگی های ES6 پشتیبانی میکنن و هر روز هم پشتیبانی خودشون رو گسترش میدن. اخیرا مرورگرهای Chrome و Safari و ... از Module ها پشتیبانی میکنن و باید برای اینکار به تگ Script نوع یا type برابر با module رو نسبت بدین. در جلسات آینده در مورد این موضوع بیشتر توضیح خواهیم داد.

Bundle کردن کدها به وسیله Rollup

برای اینکه کدهامون درون مرورگرهای مختلف اجرا بشن، میتونیم از Module Bundler های مختلفی که وجود داره استفاده کنید. وظیفه این ابزارها این هست که کدهای مربوطه رو از فایلهای مختلف جمع آوردی کرده و همه اونا رو برای شما در یک فایل قرار بدن و میتونین از اونا استفاده کنید. ما در این جلسه برای Bundle کردن از ابزار Rollup استفاده میکنیم. این ابزار خیلی سریع هست و کدهای خروجی بسیار تروتمیزی رو در اختیارتون قرار میده.

نصب Rollup بصورت سراسری یا Global

خب برای شروع باید دستور npm install -g rollup رو در Command Prompt قرار بدین تا Rollup نصب بشه:

میبینید که این ابزار رو بصورت سراسری نصب کردیم. خب حالا با استفاده از دستور cd به مسیر دایرکتوری module میریم و دستور rollup app.js --o bundle.js --f es رو تایپ میکنیم. با اینکار Rollup کدهای درون app.js رو بررسی میکنه و کدهایی که باید import بشن رو جمع آوری میکنه و همه اونا رو درون فایل bundle.js قرار میده. در نهایت هم با گزینه --f فرمت اون رو es یا ES6 قرار دادیم تا متناسب با قواعد ماژول بندی ES6 خروجی به ما تحویل داده بشه.

حالا اگر دایرکتوری رو مشاهده کنید میبینید که یک فایل جدید بنام bundle.js ساخته شده و کدهای زیر درونش قرار گرفته:

میبینید که توابع مورد نظر از فایل utility.js استخراج شدن و درون bundle قرار گرفتن و همه کدها یکی شده اند. حالا اگر بجای app.js از bundle.js در index.html استفاده کنیم، کدها بصورت زیر میشه:

و اگر خروجی رو در مرورگر ببینیم، بصورت زیر خواهد بود:

میبینید که خروجی نمایش داده میشه و دیگه خبری از Error نیست.

نتیجه گیری

خب دیدید که Rollup کدهای مورد نظر رو از فایلهای مختلف جمع آوری میکنه و همه اونا رو درون یک فایل قرار میده و میتونیم از اون استفاده کنیم. Rollup توانایی های زیاد دیگه ای هم داره که خودتون میتونین اونا رو مطالعه کنید و یاد بگیرید. ما در جلسه بعد فقط در مورد خود مبحث Module ها در ES6 توضیح میدیم و دیگه در مورد Bundle کردن با استفاده از Rollup توضیح نمیدیم و خودتون باید این مراحل رو انجام بدین تا بتونین خروجی بگیرید.

موفق و پیروز باشید.

یا علی