برنامه نویسی 218 بازدید

در بخش قبلی از این سری مقالات آموزش جامع ری‌اکت در مورد روش استایل‌دهی این اپلیکیشن‌ها صحبت کردیم. در این بخش با Babel و Webpack که به بسته‌بندی و آماده‌سازی کد اپلیکیشن‌های ری‌اکت برای توزیع کمک می‎کنند آشنا خواهیم شد.

Babel

Babel ابزاری جذاب است که مدت‌ها از زمان معرفی آن می‌گذرد و امروزه تقریباً همه توسعه‌دهندگان جاوا اسکریپت از آن بهره می‌گیرند. این وضعیت همچنان در آینده نیز تداوم خواهد داشت زیرا Babel اینک بخشی جدایی‌ناپذیر از جاوا اسکریپت محسوب می‌شود و مشکل بزرگی را برای افراد زیادی حل کرده است.

مشکل چیست؟

این مشکلی است که هر توسعه‌دهنده وب حتماً داشته است. برخی از ویژگی‌های جاوا اسکریپت در جدیدترین انتشار یک مرورگر اضافه شده‌اند؛ اما در نسخه‌های قبلی وجود ندارند یا مثلاً احتمالاً کروم و فایرفاکس آن را پیاده سای کرده‌اند؛ اما Safari iOS و Edge هنوز آن را ندارند.

برای نمونه در ES6 مفهوم جدیدی به نام تابع Arrow معرفی شده است:

که اینک از سوی همه مرورگرهای مدرن پشتیبانی می‌شود. IE11 هنوز از آن پشتیبانی نمی‌کند و Opera mini نیز وضعیت مشابهی دارد. اینک سؤال این است که چگونه می‌توان این وضعیت را حل کرد؟ آیا باید به کار خود ادامه دهیم و آن کاربرانی که مرورگرهای قدیمی/ناسازگار دارند را فراموش کنیم یا باید کد قدیمی جاوا اسکریپت بنویسیم تا همه کاربران از ما راضی باشند؟

پاسخ مشکل در Babel است. Babel یک کامپایلر است که کد نوشته شده به یک استاندارد را می‌گیرد و آن را به کدی نوشته شده به استاندارد دیگر transpile می‌کند.

می‌توان Babel را طوری پیکربندی کرد که کد جاوا اسکریپت مدرن ES2017 را به ساختار کد جاوا اسکریپت ES5 تبدیل کند:

این کار باید در زمان Build رخ دهد و از این رو باید گردش کاری طراحی کنید که این وضعیت را برای شما مدیریت کند. Webpack یک راه‌حل رایج در این زمینه محسوب می‌شود.

نصب Babel

Babel به سادگی با استفاده از npm به صورت محلی در یک پروژه نصب می‌شود:

npm install --save-dev @babel/core @babel/cli

از آنجا که npm اینک به همراه npx عرضه می‌شود، بسته‌های CLI که به صوت محلی نصب شده‌اند می‌توانند با تایپ کردن دستور در پوشه پروژه اجرا شوند. بنابراین می‌توانیم Babel را با وارد کردن دستور زیر اجرا کنیم:

npx babel script.js

نمونه‌ای از پیکربندی Babel

Babel به صورت پیش‌فرض هیچ کار مفیدی انجام نمی‌دهد و باید آن را پیکربندی کنید و افزونه‌هایی به آن بیفزایید. در این لینک (+) می‌توانید فهرستی از افزونه‌های Babel را مشاهده کنید.

برای حل مشکلی که در بخش قبل اشاره کردیم (یعنی استفاده از تابع‌های Arrow در همه مرورگرها) می‌توانیم دستور زیر را اجرا کنیم:

npm install --save-dev \
@babel/plugin-transform-es2015-arrow-functions

تا بسته مورد نظر در پوشه node_modules مربوطه به اپلیکیشن دانلود شود و سپس دستور زیر را به فایل babelrc. که در پوشه root اپلیکیشن موجود است، اضافه می‌کنیم:

{
"plugins": ["transform-es2015-arrow-functions"]
}

اگر این فایل را در پوشه خود ندارید، کافی است یک فایل خالی ایجاد کنید و محتوای فوق را در آن قرار دهید.

نکته: اگر تاکنون هیچ فایلی که نام آن با نقطه شروع شود ندیده‌اید، ممکن است در نگاه اول برایتان عجیب باشد. این فایل‌ها در نرم‌افزارهای مدیریت فایل به صورت پیش‌فرض نمایش نمی‌یابند و از این رو فایل‌های مخفی محسوب می‌شوند.

اینک اگر فایلی با نام script.js و محتوای زیر داشته باشیم:

با اجرای دستور زیر:

babel script.js

خروجی زیر به دست می‌آید:

همان طور که می‌بینید تابع‌های Arrow همگی به تابع‌های ES5 جاوا اسکریپت تبدیل شده‌اند.

پیش‌تنظیم‌های Babel

تا به اینجا دیدیم که چگونه می‌توانیم Babel را پیکربندی کنیم که ویژگی‌های خاص جاوا اسکریپت را trabplie کنید. همچنین می‌توانید افزونه‌های بسیار بیشتری به آن اضافه کنید؛ اما نمی‌توانید مواردی را به صورت یک به یک به ویژگی‌های پیکربندی اضافه کنید چون این کار عملی نیست.

به همین دلیل است که مفهومی به نام «پیش‌تنظیم» (preset) در Babel مطرح شده است. محبوب‌ترین پیش‌تنظیم‌ها، env و react نام دارند.

نکته: در نسخه 7 Babel برخی پیش‌تنظیم‌هایی که سال‌ها مطرح بودند مانند preset-es2017 و stage را منسوخ شده است به جای آن می‌توانید از babel/preset-env@ استفاده کنید.

پیش‌تنظیم Env

پیش‌تنظیم env بسیار جالب است. کافی است به آن اعلام کنیم که می‌خواهیم از کدام محیط پشتیبانی کنیم تا همه کارهای مورد نظر را برای ما انجام دهد و از همه ویژگی‌های مدرن جاوا اسکریپت نیز پشتیبانی می‌کند.

برای نمونه فرض کنید می‌خواهیم از آخرین 2 نسخه همه مرورگرها پشتیبانی کنیم؛ اما در مورد Safari از همه نسخه‌ها از شماره 7 به بعد پشتیبانی کنیم. بدین ترتیب باید از پیکربندی زیر استفاده کنیم:

اگر به پشتیبانی از مرورگر نیاز نداشته باشیم و صرفاً بخواهیم با Node.js نسخه 6.10 کار کنیم می‌توانیم از پیکربندی زیر استفاده کنیم:

پیش‌تنظیم React

پیش‌تنظیم react در زمان نوشتن اپلیکیشن‌های ری‌اکت کاملاً راهگشا است. شما می‌توانید موارد preset-flow ،syntax-jsx transform-react-jsx ،transform-react-display-name را اضافه کنید. با استفاده از این پیش‌تنظیم آماده می‌شویم که اپلیکیشن‌های ری‌اکت را با تبدیل JSX و پشتیبانی از Flow بنویسیم.

برای کسب اطلاعات بیشتر در مورد پیش‌تنظیم ها می‌توانید به این لینک (+) مراجعه کنید.

استفاده از Babel به همراه Webpack

اگر می‌خواهید کدهای مدرن جاوا اسکریپت را در مرورگر اجرا کنید، Babel به تنهایی کافی نیست و باید بتوانید کد را مدیریت هم بکنید. بهترین ابزار به این منظور Webpack است.

جاوا اسکریپت مدرن به دو مرحله متفاوت نیاز دارد که یکی مرحله کامپایل و دیگری مرحله «زمان اجرا» (runtime) است. دلیل این امر آن است که ویژگی‌های ES6 به بعد به یک ابزار کمکی polyfill یا runtime نیاز دارند.

برای نصب کارکرد زمان اجرای polyfill برای Babel می‌توان دستور زیر را اجرا کرد:

npm install @babel/polyfill \
@babel/runtime \
@babel/plugin-transform-runtime

اینک در فایل Webpack.config.js کد زیر را اضافه کنید:

با حفظ اطلاعات پیش‌تنظیم‌ها و افزونه‌ها درون فایل Webpack.config.js، دیگر نیازی به یک فایل babelrc. نخواهیم داشت.

Webpack

Webpack ابزاری است که امکان کامپایل کردن ماژول‌های جاوا اسکریپت را فراهم می‌کند و به نام module bundler نیز مشهور است. اگر تعداد بالایی از فایل‌ها داشته باشیم، Webpack می‌تواند یک فایل منفرد (یا چند فایل معدود) تولید کند که به اجرای اپلیکیشن شما می‌پردازند.

Webpack عملیات مختلفی را می‌تواند اجرا کند:

  • به بسته‌بندی منابع کمک می‌کند.
  • تغییرات را برسی کرده و وظایف را مجدداً اجرا می‌کند.
  • می‌تواند عملیات Babel transpilation را در مورد ES5 اجرا کند و به این ترتیب امکان استفاده از جدیدترین ویژگی‌های جاوا اسکریپت بدون نگرانی از پشتیبانی مرورگر را فراهم می‌کند.
  • می‌تواند CoffeeScript را به جاوا اسکریپت تبدیل کند.
  • می‌تواند تصاویر «درون‌خطی» (inline) را به URI های داده تبدیل کند.
  • امکان استفاده از ()require برای فایل‌های CSS را ایجاد می‌کند.
  • می‌تواند یک وب‌سرور development را اجرا کند.
  • می‌تواند جایگزین hot module را مدیریت کند.
  • می‌تواند فایل‌های خروجی را به چندین فایل تقسیم کند تا از ایجاد یک فایل خیلی بزرگ جاوا اسکریپت که امکان ارسال آن در نخستین بارگذاری صفحه دشوار است خودداری شود.
  • می‌تواند عملیات tree shaking (+) را اجرا کند.

Webpack در بک‌اند

Webpack تنها محدود به استفاده از فرانت‌اند نیست و برای توسعه بک‌اند Node.js نیز مفید است. ابزارهای قبل از Webpack که برخی از آن‌ها را در لیست زیر مشاهده می‌کنید، همچنان استفاده می‌شوند:

  • Grunt
  • Broccoli
  • Gulp

مشابهت‌های زیادی بین توانایی‌های این ابزارها با کارهایی که Webpack انجام می‌دهد وجود دارد؛ اما تفاوت اصلی در این است که این ابزارها به نام task runners مشهور هستند؛ اما Webpack از همان ابتدا به صورت یک «ابزار بسته‌بندی ماژول» (module bundler) ارائه شده است.

در واقع Webpack ابزار متمرکزتری است، کافی است یک نقطه ورودی برای اپلیکیشن خود تعیین کنید (این نقطه ورودی می‌تواند حتی یک فایل HTML با تگ‌های اسکریپت باشد) تا Webpack فایل‌ها را تحلیل کرده و همه آن چه را که برای اجرای اپلیکیشن نیاز دارید، در یک فایل خروجی منفرد جاوا اسکریپت بسته‌بندی کند. همچنین اگر به افزار کد نیاز داشته باشید می‌تواند فایل خروجی را به چند بخش تقسیم کند.

نصب Webpack

Webpack می‌تواند به صورت سراسری یا به صورت محلی برای پروژه نصب شود.

نصب سراسری

با استفاده از دستور زیر می‌توانید Webpack را به صورت سراسری با استفاده از yarn نصب کنید:

yarn global add Webpack Webpack -cli

برای نصب با استفاده از npm از دستور زیر استفاده کنید:

npm i -g Webpack Webpack -cli

زمانی که این دستور اجرا شود، می‌توانید دستور زیر را اجرا کنید:

Webpack -cli

نصب محلی

Webpack -cli می‌تواند به صورت محلی نیز نصب شود. این روش نصب بیشتر توصیه شده است، زیرا Webpack -cli در هر پروژه به‌روزرسانی شود. برای نمونه برای استفاده از جدیدترین ویژگی‌ها برای یک پروژه کوچک مقاومت کمتری خواهیم داشت تا این که بخواهیم همه پروژه‌هایی که از Webpack استفاده‌ی کنند را به یکباره به‌روزرسانی کنیم.

webpavk با استفاده از yarn به صورت زیر نصب می‌شود:

yarn add Webpack Webpack -cli –D

با استفاده از npm از دستور زیر استفاده کنید:

npm i Webpack Webpack -cli --save-dev

زمانی که کار نصب پایان یافت، می‌توانید کد زیر را به فایل package.json خود اضافه کنید:

سپس می‌توانید با اجرای دستور زیر در ریشه پروژه Webpack را اجرا کنید:

yarn build

پیکربندی Webpack

Webpack به صورت پیش‌فرض (از نسخه 4 به بعد) در صورت رعایت موارد زیر نیاز به هیچ پیکربندی خاصی نخواهد داشت:

  • «نقطه ورودی» (entry point) اپلیکیشن به صورت src/index.js/. باشد.
  • خروجی در dist/main.js/. قرار گیرد.
  • Webpack در حالت production کار کند.

البته همه جزییات Webpack را می‌توان بسته به نیاز پیکربندی کرد. پیکربندی بندی Webpack در فایل Webpack.config.js در پوشه ریشه پروژه ذخیره می‌شود.

نقطه ورودی

به صورت پیش‌فرض نقطه ورودی اپلیکیشن در مسیر src/index.js/. است. در مثال ساده زیر نقطه index.js/. را به عنوان نقطه ورودی پیکربندی می‌کنیم:

خروجی

به صورت پیش‌فرض خروجی در مسیر dist/main.js/. ارائه می‌شود. در مثال زیر خروجی Webpack در app.js قرار می‌گیرد:

Loader

با استفاده از Webpack می‌توان گزاره‌هایی را در کد جاوا اسکریپت import یا require کرد و این وضعیت محدود به کدهای جاوا اسکریپت نیست؛ بلکه می‌توانید هر نوع فایل، برای مثال CSS را ایمپورت کنید.

Webpack می‌خواهد همه وابستگی‌های شما را مدیریت کند و این امر منحصر به کدهای جاوا اسکریپت نیست. یکی از روش‌های این کار استفاده از loader-ها است. برای نمونه شما می‌توانید در کد خود از دستور زیر استفاده کنید:

import 'style.css'

در این مورد، پیکربندی loader به صورت زیر خواهد بود:

عبارت منظم فوق همه فایل‌های CSS را شامل می‌شود. یک loader می‌تواند گزینه‌های مختلفی داشته باشد:

الزام چندگانه

شما می‌تواند چندین loader را برای هر قاعده، «الزام» (require) کنید:

در این مثال، css-loader به تفسیر دایرکتیو ‘import ‘style.css در CSS می‌پردازیم. سپس style-loader مسئول تزریق آن CSS در DOM با استفاده از یک تگ <style> خواهد بود.

ترتیب

ترتیب این کار مهم است و دارای ترتیب معکوس است یعنی آخرین دستور اول اجرا می‌شود. شاید از خود بپرسید که چه نوع loader-هایی وجود دارند؟ پاسخ این است که تعداد آن‌ها زیاد است و در این لینک (+) می‌توانید فهرست کامل آن‌ها را ملاحظه کنید.

یک loader که به طور معمول استفاده می‌شود Babel است که برای transpile کردن کدهای مدرن جاوا اسکریپت به کد ES5 مورد استفاده قرار می‌گیرد:

مثال فوق موجب می‌شود که Babel همه فایل‌های React/JSX را پیش‌پردازش کند:

گزینه‌های موجود برای Babel را می‌توانید در این صفحه (+) ملاحظه کنید.

افزونه‌های Babel

افزونه‌ها نیز شبیه به loader-ها اما بسیار قوی‌تر هستند. افزونه‌ها می‌توانند کارهایی انجام دهند که loader-ها از انجام آن‌ها عاجز هستند و در واقع بلوک‌های اصلی تشکیل‌دهنده Webpack محسوب می‌شوند. مثال زیر را در نظر بگیرید:

افزونه HTMLWebpack Plugin وظیفه ایجاد خودکار یک فایل HTML را بر عهده دارد و مسیر بسته جاوا اسکریپت را به خروجی اضافه می‌کند به طوری که جاوا اسکریپت آماده عرضه شدن باشد. افزونه‌های زیادی برای Webpack وجود دارند که فهرست آن‌ها را می‌توانید در این لینک (+) مشاهده کنید.

یک افزونه مفید، CleanWebpack Plugin نام دارد که برای پاکسازی پوشه dist/ پیش از ایجاد هر نوع خروجی استفاده می‌شود. بدین ترتیب فایل‌ها در زمانی که نام فایل خروجی عوض می‌شود، بر جای نمی‌مانند:

حالت Webpack

«حالت» (mode) که در نسخه 4 Webpack معرفی شده است محیطی که Webpack روی آن عمل می‌کند را تعیین می‌کند. آن را می‌توان به صورت development یا production تنظیم کرد. حالت پیش‌فرض به صورت production است و از این رو تنها می‌توانید آن را به صورت development تغییر دهید.

حالت Development خصوصیات زیر را دارد:

  • Build بسیار سریع است.
  • نسبت به حالت production کمتر بهینه‌سازی شده است.
  • کامنت ها حذف نمی‌شوند.
  • پیام‌های خطا و پیشنهادهای دقیق‌تری ارائه می‌شود.
  • تجربه دیباگ بهتری دارد.

در حالت Production شما build کندتری دارید، چون باید یک بسته با بهینه‌سازی بالاتر تولید کند. فایل جاوا اسکریپت حاصل، اندازه کوچک‌تری دارد و بسیاری از چیزهایی که در production لازم نیستند را حذف می‌کند.

به عنوان مثل تصور کنید یک اپلیکیشن منفرد ایجاد می‌کنیم که صرفاً گزاره console.log را نمایش می‌دهد. بسته production آن چنین است:

بسته development نیز به صورت زیر است:

اجرای Webpack

در صورتی که Webpack به صورت سراسری نصب شده باشد، می‌تواند از خط فرمان به صورت درستی اجرا شود؛ اما به طور کلی یک اسکریپت درون یک فایل package.json نوشته می‌شود که سپس با استفاده از npm یا yarn اجرا می‌شود. برای نمونه این تعاریف اسکریپت package.json را قبلاً استفاده کرده‌ایم:

تعریف فوق به ما امکان می‌دهد که Webpack را با دستور زیر اجرا کنیم:

npm run build

همچنین اجرای آن با دستور زیر نیز ممکن است:

yarn run build

و یا به سادگی می‌توانیم دستور زیر را اجرا کنیم:

yarn build

پایش تغییرات

Webpack می‌تواند به صورت خودکار بسته را در مواردی که تغییراتی در اپلیکیشن رخ می‌دهد بازسازی کند و سپس منتظر تغییرات بعدی بماند. کافی است اسکریپت زیر را به آن اضافه کنید:

و دستور زیر را اجرا کنید:

npm run watch

همچنین می‌توانید از دستور زیر استفاده کنید:

yarn run watch

یا صرفاً دستور زیر را اجرا کنید:

yarn watch

یکی از ویژگی‌های خوب حالت «پایش» (watch) این است که بسته تنها در صورتی بازسازی می‌شود که تغییرات توأم با خطا نباشد. اگر خطاهایی وجود داشته باشند watch همچنان منتظر ادامه تغییرات می‌ماند و تلاش می‌کند زمانی که همه خطاها رفع شد، بسته را بازسازی کند. بدین ترتیب بسته صحیح از این build-های مشکل‌دار تأثیر نمی‌پذیرد.

مدیریت تصاویر

Webpack به ما امکان استفاده از تصاویر را به روشی بسیار آسان می‌دهد. به این منظور باید از loader-ی به نام file-loader (+) استفاده کنیم. به پیکربندی ساده زیر توجه کنید:

این پیکربندی به ما امکان می‌دهد که تصاویر را در کد جاوا اسکریپت خود ایمپورت کنیم:

Img یک عنصر HTMLImageElement است که مستندات آن را می‌توانید در این لینک (+) ملاحظه کنید.

file-loader می‌تواند انواع فایل‌های دیگر مانند فونت، فایل‌های CSV ،xml و موارد دیگر را نیز مدیریت کند و ابزار جالب دیگر برای کار با تصاویر loader-ی به نام url-loader است. مثال زیر هر فایل PNG کمتر از 8 کیلوبایت را به صورت یک URL داده بارگذاری می‌کند.

پردازش کد SASS و تبدیل آن به CSS

با استفاده از sass-loader ،css-loader و style-loader می‌توان کد SASS را به صورت زیر به CSS تبدیل کرد:

تولید نگاشت‌های منبع

از آنجا که Webpack کد را بسته‌بندی می‌کند، «نگاشت‌های منبع» (Source Maps) در موارد مختلف مثلاً برای داشتن ارجاعی به فایل اصلی که موجب خطایی شده است ضروری هستند.

بدین ترتیب به Webpack اعلام می‌کنیم که نگاشت‌های منبع را با استفاده از مشخصه devtool در پیکربندی تولید کند:

Devtool مقادیر بسیار مختلفی می‌تواند بگیرد که در این لینک (+) می‌توانید فهرست آن‌ها را ملاحظه کنید. محبوب‌ترین و پرکاربردترین انواع این مقادیر به صورت زیر هستند:

  • none – هیچ نگاشت منبعی اضافه نمی‌کند.
  • source-map – برای محیط production ایده‌آل است و نگاشت منبع جداگانه‌ای تهیه می‌کند که می‌تواند کمینه‌سازی شود و یک ارجاع به بسته ایجاد می‌کند تا ابزارهای توسعه بدانند که نگاشت منبع موجود است. البته باید سرور را طوری پیکربندی کنید که از ارسال این نگاشت خودداری کند و صرفاً به منظور دیباگ استفاده شود.
  • inline-source-map – برای محیط development ایده‌آل است و نگاشت منبع را به صورت یک URL داده و inline درمی‌آورد.

به این ترتیب به پایان بخش هفتم از سری مقالات آموزش جامع ری‌اکت می‌رسیم. در بخش بعدی این سری آموزشی در مورد ابزارهای مختلف که برای فریمورک React ارائه شده‌اند صحبت خواهیم کرد:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

telegram
twitter

میثم لطفی

«میثم لطفی» دانش‌آموخته ریاضیات و شیفته فناوری به خصوص در حوزه رایانه است. وی در حال حاضر علاوه بر پیگیری همه علاقه‌مندی‌های خود در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و تولید محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار نیز با مجله فرادرس همکاری دارد.

بر اساس رای 1 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *