7 ابزار جادویی که روند توسعه برنامه‌های جاوا اسکریپت را بهبود می‌بخشد

به نظر می‌رسد که هر سال جایگاه جاوااسکریپت مستحکم‌تر از قبل می‌شود و سال 2021 نیز به همین منوال است. به‌طور خاص، نسل جدید بسته‌های نرم‌افزاری، باندلرها و ابزارهای ساخت باعث شده‌اند روند ساخت برنامه‌های جاوا اسکریپت ساده‌تر از قبل شود، به‌طوری که سرعت توسعه بهبود پیدا کرده و کدهایی با کیفیت بالاتر ساخته می‌شوند. در ادامه مطلب مروری بر جدیدترین و پایدارترین ابزارهای توسعه جاوا اسکریپت خواهیم داشت. ابزارهایی مثل ESM ، esbuild ، Parcel ، pnpm ، Rollup ، Snowpack و Vite ستاره‌های جدیدی هستند که توسعه JS را آسان‌تر می‌کنند.

ماژول‌های ECMAScript

ماژول‌های ECMAScript که به‌نام ماژول‌های ES یا ESM نیز شناخته می‌شود به ماژول‌های رسمی جاوا اسکریپت اشاره دارند. البته به لحاظ فنی، یک ابزار نیست، اما مفاهیم گسترده‌ای در ارتباط با توسعه و ابزارهای JS دارد. برای مدت زمان نسبتا کوتاهی شاهد آشفتگی و عدم اطمینان کافی در استفاده از ماژول جاوا اسکریپت بودیم، هرچند با ظهور Node.js روی نحو CommonJS این موضوع فرق کرد، اما با پشتیبانی گسترده ماژول‌ها توسط مرورگرها در سال‌های اخیر بسیاری از این مشکلات برطرف شده است. در فهرست یک ترکیب نحوی کلی ESM را مشاهده می‌کنید. در خط اول ترکیب نحوی برای وارد کردن یک اکسپورت پیش‌فرض را مشاهده می‌کنید. دومین خط برای تعیین عضوهای خاص درون ماژول استفاده می‌شود.

import aModule from 'module-name';
import { moduleMember, anotherMember } from 'module-name';

اکنون حتی مرورگر مایکروسافت اج نیز از ESM پشتیبانی می‌کند، بنابراین همه مرورگرهای اصلی اکنون از آن پشتیبانی می‌کنند. مرورگرها به دو روش می‌توانند از ماژول‌ها استفاده کنند، اول از طریق اسکریپت‌های جاوا اسکریپتی که شامل می‌شود یا به‌کارگیری مستقیم اسکریپت برچسب module به گونه‌ای که در فهرست 2 مشاهده می‌کنید.

<script type="module" src="https://unpkg.com/browse/react@17.0.1/">

</script>

<script type="module">   import React from 'react'; </script>

<script type="module" src="../my-module.js"></script>

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

برای سال‌های متمادی، بسته‌های نرم افزاری متنوعی (که امروزه معمولاً از Webpack استفاده می‌شود) برای ترکیب بسته اسکریپت‌ها برای ایجاد محدودیت در مرورگر با ماژول‌ها به کار گرفته می‌شد. با این‌حال، پشتیبانی گسترده مرورگرها از ESM تغییر کرده و ابزارهای جدیدی برای پشتیبانی هرچه دقیق‌تر توسعه پیدا کرده‌اند. با این حال‌، هنوز هم بسته‌بندی جایگاه ویژه‌ای دارد، زیرا اجازه دادن به مرورگرها برای درخواست ساده تمامی ماژول‌های برای یک برنامه، منجر به عملکرد ضعیف برنامه‌ها و پاسخ‌گویی دیرهنگام می‌شود. بسته‌بندی‌، کوچک‌سازی، تقسیم هوشمندانه کد/CSS هنوز هم برای عملکرد خوب مهم هستند.

Esbuild

esbuild یک تازه وارد نسبتاً جدید به حوزه bundlerها است. همانند نمونه‌های مشابه در زمینه سرعت مدعی است. Esbuild با زبان Go نوشته شده و عملکردی برعکس جاوااسکریپت دارد، به‌طوری که از مزایای از پیش ساخته شده زبان Go استفاده می‌کند. علاوه بر این، به استفاده هوشمندانه از حافظه مشترک در هنگام تجزیه و تولید کدها متکی است.

برای آن‌که بتوانید سرعت esbuild را به درستی ارزیابی کنید پیشنهاد می‌کنیم از معیارهای سنجش پروژه استفاده کنید. آمارها نشان می‌دهند در ارتباط با عملکرد به میزان صد برابر عملکرد بهترس نسبت به bundlerهای دیگر دارد.

به‌طور پیش‌فرض، به شکل بسته‌بندی شده برای مرورگر در اختیار توسعه‌دهندگان قرار دارد، هرچند می‌توان امکان بسته‌بندی برای Node.js را ارائه می‌کند. با اتصال به NPM از طریق package.json و node_modules قادر است از ابزارهای دیگری که در زمینه توسعه استفاده می‌شوند بهره ببرد. علاوه بر این، یک JavaScript API ارائه می‌دهد تا اگر نیازهای شما برای استفاده از خط فرمان بیش از حد پیچیده و متغیر بودند، این توانایی را داشته باشید تا دستورات build را ایجاد کنید. فهرست 3 نمونه‌ای از استفاده از این واسط‌های برنامه‌نویسی کاربردی را نشان می‌دهد.

esbuild روی بسته‌بندی متمرکز است و شامل یک سرور حالت dev نیست. برخی از ویژگی‌ها مانند تقسیم کد/CSS هنوز در مرحله پردازش هستند. ابزارهای دیگر می‌توانند از esbuild برای قابلیت‌های باندل‌های تولیدی خود استفاده کنند.

از ماه مه 2021، esbuild موفق شده بالغ بر 25 هزار ستاره در گیت‌ها و 570 هزار دانلود NPM را دریافت کند. این آمارها نشان می‌دهند که میزان به‌کارگیری esbuild در حال افزایش است و به دلیل عملکرد خوبی که ارائه می‌کند در آینده مورد توجه توسعه‌دهندگان قرار خواهد گرفت.

require('esbuild').build({   entryPoints: ['app.jsx'],   bundle: true,   outfile: 'out.js', }).catch(() => process.exit(1))

esbuild یک بسته کامل در اختیار توسعه‌دهندگان قرار می‌دهد که شامل کد برنامه و کلیه وابستگی‌ها است. افزونه‌های مختلف برای انجام کارهای مختلفی از Svelte گرفته تا PostCSS و YAML در دسترس هستند. علاوه بر این، esbuild از نوع‌های رایج مانند TypeScript ، JSX و JSON پشتیبانی می‌کند.

Parcel

اگر پارسل را که از نظر مفهومی ابزاری شبیه به Webpack و Rollup است‌، بررسی نکنیم، کم کاری کرده‌ایم. ابزار فوق علاوه بر کاهش تنظیمات سرباره مدعی است که عملکرد را بهبود می‌بخشد، اگرچه از این منظر نمی‌تواند عملکردی بهتر از esbuild داشته باشد.

Parcel شامل تقسیم کد بدون پیکربندی بوده و جایگزینی ماژول HMR است. علاوه بر این، به‌طور پیش‌فرض نوع‌های مختلفی از فایل‌ ها (مانند تصاویر) را پشتیبانی می‌کند و می‌تواند آن‌ها را بدون پیکربندی اضافی اداره کند. Parcel نزدیک به 38 هزار ستاره در گیت‌هاب دارد و بالغ بر 64 هزار بار در هفته از طریق NPM دانلود شده است. این آمار نشان می‌دهند که ابزار فوق از دید توسعه‌دهندگان در سطح متوسط روبه بالا قرار دارد.

pnpm

pnpm بسته نرم‌افزاری یا یک باندلر نیست. در عوض، این یک ابزار جایگزینی برای ابزار وابستگی NPM است. به همین دلیل شباهت زیادی به Yarn دارد، اما pnpm از الگوی دیگری استفاده می‌کند، به‌طوری که از هاردلینک‌ها در ارتباط با node_module tree استفاده می‌کند، در نتیجه مدیریت وابستگی را ساده می‌کند و از وابستگی‌های تکراری جلوگیری می‌کند.  این ساختار علاوه بر صرفه‌جویی در فضای دیسک‌، برخی از عملکردها را نیز بهبود می‌بخشد. آمارها نشان می‌دهند در مقایسه با ابزارهای مدیریت بسته، pnpm  عملکرد بهتری دارد. pnpm شامل pnpx، ابزاری مشابه npx برای اجرای بسته‌ها است.pnpm دارای 11 هزار ستاره در گیت‌ها بوده و در هفته 191 هزار بار از طریق NPM دانلود می‌شود. pnpm مدیر بسته پیش‌فرض برای SvelteKit است. به نظر می‌رسد pnpm را باید رقیب اصلی بعدی برای ابزارهای مدیریت وابستگی‌ها دانست.

Rolup

Rollup بسته نرم‌افزاری است که به شما امکان می‌دهد از ترکیب نحوی ESM در همه جا استفاده کنید. ترکیب‌های نحوی مختلفی که در دنیای برنامه‌نویسی استفاده می‌شوند (CJS ، AMD ، UMD ، EMS و غیره) توسط بسته فوق پشتیبانی می‌شوند تا مشکل خاصی در این زمینه نداشته باشید. علاوه بر این، Rollup قابلیت tree shaking را ارائه می‌دهد که توانایی تجزیه و تحلیل پایگاه کد را داشته و مانع ایمپورت کردن‌های بی مورد می‌شود، به همین دلیل است که باعث بهبود عملکرد می‌شود. مانند esbuild و سایر باندلرها، Rollup از طریق NPM به package.json و node_modules مرتبط می‌شود. هنگام استفاده از Rollup می‌توانید ترکیب نحو ماژول را فراموش کنید و فقط از ESM استفاده کنید. به‌طور کلی، Rollup قصد دارد تا تجربه توسعه JS آینده را جایی که همه چیز در ESM یکپارچه می‌شوند در اختیارتان قرار دهد. Rollup در عمل تقریباً مشابه Webpack است، اما برخلاف Webpack از خروجی Node.js پشتیبانی می‌کند. علاوه بر این، برخی از توسعه‌دهندگان تجربه ساده‌تر و روان‌تری را با Rollup گزارش کرده‌اند. Rollup دارای یک جامعه فعال و یک اکوسیستم پلاگین کاملاً پیشرفته است. از ماه مه 2021 توانسته است 20 هزار ستاره در گیت‌هاب دریافت کند و 4.8 میلیون بار در هفته از طریق NPM دانلود شود.

Vite

Vite در ابتدا یک ابزار ساخت متخص Vue بود، اما اکنون از کاربردهای عمومی پشتیبانی کرده و یک راه‌حل عمومی برای SvelteKit ارائه می‌کند، به همین دلیل انتظار می‌رود در آینده شاهد استفاده روزافزون از آن باشیم. Vite بسته نرم‌افزاری نیست و در مقابل وظایف بسته‌بندی ساخت را به Rollup واگذار می‌کند. Vite با هدف سریع بودن طراحی شده است. توسعه‌دهندگانی که از Vite استفاده کرده‌اند بر این باور هستند که ویژگی‌هایی که Vite ارائه می‌کند در مقایسه با Webpack سریع‌تر عمل می‌کنند. بهبود سرعت Vite به دلیل استفاده از ESM و استفاده از esbuild برای پیش بسته‌بندی است. استفاده از ESM به این معنا است که Vite می‌تواند هنگام بسته‌بندی، کار بسته‌بندی را به مرورگر واگذار کند و هنگام تعیین این‌که کدام فایل‌ها باید در طول تغییرات ارائه جزئیات بیشتری در اختیار توسعه‌دهندگان قرار دهد.

Vite در حال حاضر از Rollup برای کارهای تولیدی (برای به دست آوردن ویژگی‌هایی مانند تقسیم CSS) استفاده می‌کند، اما ممکن است در آینده به esab سوییچ کند. Vite نزدیک به 27 هزار ستاره در گیت‌هاب دارد و 124 هزار بار در هفته از طریق NPM دانلود می‌شود.

Snowpack

Snowpack یکی دیگر از باندلرها و dev server است که روی سرعت تمرکز دارد. سرور آن عملکرد سریعی دارد و با اتکا بر حافظه هوشمند سریع از ESM پشتیبانی می‌کند، کمترین پیکربندی را نیاز دارد و از انواع مختلف فایل‌ها پشتیبانی می‌کند. Snowpack از نظر ساختاری شبیه Rollup و Parcel است. Snowpack دارای 18 هزار ستاره در گیت‌هاب بوده و به‌طور هفتگی 77 هزار مرتبه از طریق NPM دانلود می‌شود.

آینده ابزارهای JS

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