آشنایی با ابزارهای جاوا اسکریپت می تواند تاثیر زیادی روی توسعه اپلیکیشن ها داشته باشد، در این مطلب درباره ابزارهای مفید جاوا اسکریپت صحبت می کنیم.

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

آشنایی با ماژول های ECMAScript

ماژول های ECMAScript که به آنها ماژول های aka ES یا ESM نیز گفته می شود سینتکس ماژول اصلی جاوا اسکریپت هستند. به همین علت به طور فنی نمی توان به آنها یک ابزار گفت اما باید بدانید که کاربردهای بسیار زیادی در توسعه اپلیکیشن های مختلف به این زبان دارند. برای مدت زمان طولانی توسعه دهندگان این زبان برنامه نویسی شاهد آشفتگی های بسیار زیادی در ماژول های جاوا اسکریپت بودند اما با تاییدیه اخیر شرکت سازنده این زبان برنامه نویسی و پیاده سازی این ماژول ها در مرورگرها امکانات جدیدی در اختیار توسعه دهندگان قرار گرفت که کار کردن با ماژول ها را راحت تر می کند.

شکل کلی سینتکس ESM را در ادامه نمایش خواهیم داد و توضیحاتی را در خصوص این ابزار فوق العاده به شما ارائه می دهیم.

آشنایی با سینتکس ماژول های ECMAScript در جاوا اسکریپت

import aModule from 'module-name';

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

شاید برای شما جالب باشد که بدانید حتی Microsoft Edge نیز در حال حاضر از ESM پشتیبانی می کند. بنابراین شما می توانید مطمئن باشید که تمامی مرورگرهای اصلی از این ماژول ها پشتیبانی کرده و خدمات خود را به توسعه دهندگان ارائه می دهند.

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

<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>

در این قطعه کد دو تگ اسکریپت اول نشان می دهند که چگونه می توانید یک URL قطعی را هدف قرار دهید. دقت داشته باشید که در مرحله اول باید از ویژگی src استفاده کرده و در مرحله دوم باید import جاوا اسکریپت را اجرا کنید. تگ اسکریپت سوم ارتباط import که در همان دامنه قرار گرفته است را نشان می دهد. دقت داشته باشید که زمانی که اسکریپتی را از یک دامنه بیرون می کشید محدودیت های CORS روی آن اعمال می شوند.

نکاتی مهم درباره ماژول های ECMAScript

برای سالیان متمادی از بسته های نرم افزاری مختلفی که امروزه به آنها Webpack گفته می شود برای ترکیب کردن اسکریپت های مختلف در زبان برنامه نویسی جاوا اسکریپت استفاده می شد تا بتوانند با ترکیب این اسکریپت ها آنها را با وجود محدودیت های مربوط به ماژول ها در مرورگرهای مختلف اجرا کنند. پشتیبانی گسترده مرورگرها از ماژول های ESM باعث به وجود تغییرات بسیار زیادی خواهد شد و ابزارهای جدیدی را در اختیار توسعه دهندگان قرار خواهد داد.

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

آشنایی با esbuild در جاوا اسکریپت

Esbuild را می توان یک محصول کاملا جدید در میان محصولات نرم افزاری به شمار آورد. مانند بسیاری از بسته های نرم افزاری دیگر این محصول نیز ادعای بسیار زیادی در زمینه افزایش سرعت نرم افزارها و اپلیکیشن ها دارد. شاید برای شما جالب باشد که بدانید این ابزار به زبان برنامه نویسی Go نوشته شده است و در آن از جاوا اسکریپت استفاده نشده است. این مسئله باعث می شود تا این ابزار از قابلیت موازی سازی در زبان برنامه نویسی Go بهره مند باشد و از حافظه مشترک هوشمند در زمان تجزیه استفاده کند.

اگر معیارهای پروژه خود را بررسی کنید احتمالا می توانید سرعت بالای این بسته نرم افزاری را درک کنید. این ابزار عملکردی بسیار سریع تر از سایر ابزارها و بسته های نرم افزاری را به شما ارائه می دهد.

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

نکاتی درباره بسته نرم افزاری esbuild

Esbuild بر روی باندل کردن تمرکز دارد و شامل سرور حالت dev نیست. برخی از ویژگی ها مانند جدا کردن code/CSS، همچنان در پایپ لاین در دسترس هستند که می توانید در صورت نیاز از آن استفاده کنید. سایر ابزارها می توانند از Esbuild برای قابلیت های باندل کردن محصولات خود استفاده کنند.

از ماه مه سال 2021 این بسته نرم افزاری 25 هزار ستاره در گیت هاب دریافت کرده و به صورت هفتگی 570 هزار بار از طریق NPM دانلود شده است. بنابراین با وجود این که Esbuild کوچکترین پروژه ای است که در این مطلب درباره آن صحبت می کنیم ولی استفاده گسترده از آن آینده ای درخشان را برای این پروژه به تصویر می کشد.

استفاده از API جاوا اسکریپت Esbuild

require('esbuild').build({

  entryPoints: ['app.jsx'],

  bundle: true,

  outfile: 'out.js',

}).catch(() => process.exit(1))

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

آشنایی با ابزار Parcel در جاوا اسکریپت

ابزار Parcel شباهت بسیار زیادی به ابزارهایی مانند Webpack و Rollup دارد. این ابزار قادر است تا میزان تنظیمات مورد نیاز در پروژه های جاوا اسکریپت را به میزان زیادی کاهش دهد و علاوه بر این روی عملکرد اپلیکیشن های طراحی شده در جاوا اسکریپت نیز تاثیرگذار است. البته باید بدانید که تاثیر آن روی عملکرد و سرعت پروژه ها به اندازه ابزار esbuild نیست. این ابزار در واقع شامل عملکردهای تقسیم کد بدون نیاز به تنظیمات و hot module replacement است که به اختصار به آن HMR گفته می شود. این ابزار همچنین از انواع فایل ها نیز پشتیبانی می کند و به شما این اجازه را می دهد تا بتوانید بدون نیاز به تنظیمات اضافی آنها را مدیریت کنید.

Parcel ابزاری است که تقریبا 38 هزار ستاره در گیت هاب دریافت کرده و به صورت هفتگی 64 هزار بار از طریق NPM دانلود شده است. این آمار نشان دهنده این است که Parcel در حال تبدیل شدن به یکی از کاربردی ترین ابزارهای زبان برنامه نویسی جاوا اسکریپت است.

ابزار pnpm را بیشتر بشناسید

Pnpm یک بسته نرم افزاری یا یک ابزار build نیست. این ابزار در واقع جایگزینی مناسب برای NPM می باشد. از نظر هدف و آینده می توان آن را با ابزار Yarn مقایسه کرد اما باید بدانید که pnpm رویکردهای متفاوتی را پیش گرفته است. این ابزار از hardlink ها برای node_modules استفاده می کند و همین عامل نیز باعث می شود تا مدیریت وابستگی ها ساده تر شده و از تکراری بودن آنها نیز جلوگیری می کند. یکی از مزایای مهم این ابزار صرفه جویی در حافظه است. این ابزار قادر است تا عملکرد پروژه های جاوا اسکریپت را به میزان زیادی بهبود داده و نسبت به سایر ابزارهای مدیریتی عملکرد بهتری را از خود نشان دهد.

pnpm دقیقا مانند pnpx دارای ابزاری مشابه npx می باشد که برای اجرا کردن پکیج های مختلف مورد استفاده قرار می گیرد. این ابزار موفق شده 11 هزار ستاره در گیت هاب دریافت کند و 191 هزار بار نیز به صورت هفتگی از طریق NPM دانلود شده است. این ابزار در ماه های گذشته رشد چشمگیری را در میان ابزارهای مختلف جاوا اسکریپت داشته است و به نظر می رسد که یک رقیب جدی برای ابزارهای مشابه موجود در بازار باشد.

RolluP یکی از بهترین ابزارهای جاوا اسکریپت

Rollup یک بسته نرم افزاری است که به شما اجازه می دهد تا از سینتکس ESM در هر جایی استفاده کنید. با استفاده از آن شما می توانید از انواع سینتکس های مختلف از جمله CJS، AMD، UMD، EMS و ... اشاره کرد. بنابراین شما می توانید تمامی این سینتکس ها را با یکدیگر ترکیب کرده  و کدهای خود را به شکلی بسته بندی کنید که تنها با یک سینتکس کار کنند. علاوه بر این باید دقت داشته باشید که این بسته نرم افزاری امکان تجزیه و تحلیل کدهای پایگاه داده پروژه شما را نیز برای شما فراهم می کند.

این بسته نرم افزاری نیز مانند سایر بسته های نرم افزاری جاوا اسکریپت مثل esbuild و ... از طریق package.json و node_modules با استفاده از NPM قابل دسترس است که می توانید از آن استفاده کنید.

نکاتی برای استفاده از Rollup

زمانی که از Rollup استفاده می کنید اساسا می توانید سینتکس ماژول را فراموش کرده و فقط از ESM استفاده کنید. به طور کلی این بسته نرم افزاری قصد دارد به شما تجربه توسعه پروژه های جاوا اسکریپت در آینده را ارائه دهد که در آن همه چیز در ESM یکپارچه سازی شده است. Rollup در عمل مشابه Webpack عمل می کند اما برخلاف Webpack از خروجی  Node.js نیز پشتیبانی می کند. علاوه بر این برخی از توسعه دهندگان گزارش داده اند که کار کردن با Rollup بسیار ساده تر و روان تر می باشد.

در خصوص این بسته نرم افزاری باید دقت داشته باشید که Rollup از قابلیت تعویض ماژول پشتیبانی نمی کند. این بسته نرم افزاری دارای جامعه کاربران بسیار فعالی می باشد و 20 هزار ستاره در گیت هاب دریافت کرده است. علاوه بر این به صورت هفتگی 4.8 میلیون بار نیز از طریق NPM دانلود شده است.

ابزار Vite و کاربردهای مهم آن در جاوا اسکریپت

Vite در واقع یک ابزار build بود که به طور خاص برای Vue ساخته شده بود اما امروزه می توان از آن در موارد مختلفی استفاده کرد. این ابزار امروزه تبدیل به راهکار اصلی برای استفاده از SvelteKit شده است و همین عامل نیز باعث شده تا کاربردهای بسیار زیادی داشته باشد. ابزار Vite به طور کلی بر روی مدیریت دو نیاز اصلی در توسعه اپلیکیشن های جاوا اسکریپت تمرکز کرده است که اولی اجرای حالت dev و دومی قابلیت build برای پروژه ها و محصولات است. دقت داشته باشید که این ابزار یک بسته نرم افزاری نیست و وظایف مربوط به یک بسته نرم افزاری را به ابزار Rollup واگذار می کند.

هدف اصلی این ابزار سریع بودن است و اصلی ترین عاملی که باعث شده تا امروزه توسعه دهندگان جاوا اسکریپت از آن استفاده کنند نیز همین سرعت بالای آن می باشد. این ابزار در مقایسه با ابزارهای دیگری مانند Webpack سرعت بسیار بالاتری را به شما ارائه می دهد.

نکاتی مهم در خصوص ابزار Vite

سرعت بالای این ابزار به دلیل استفاده از ESM می باشد. استفاده از ESM باعث می شود تا این ابزار کار بسته بندی پکیج ها در زمان توسعه اپلیکیشن های جاوا اسکریپت را به مرورگر منتقل کند. این ابزار در حال حاضر برای ساخت محصولات( به عنوان مثال برای به دست آوردن ویژگی های CSS) از ابزار Rollup استفاده می کند ولی ممکن است در آینده از esbuild برای انجام این کار کمک بگیرد. قابلیت hot module replacement در این ابزار با سرعت بسیار بالایی صورت می گیرد. این ابزار در حال حاضر 27 هزار ستاره در گیت هاب دریافت کرده و 124 هزار بار نیز به صورت هفتگی از طریق NPM دانلود شده است که نشان می دهد آینده درخشانی در انتظار این ابزار فوق العاده قدرتمند جاوا اسکریپت می باشد.

آشنایی با ابزار Snowpack

Snowpack یک بسته نرم افزاری دیگر در جاوا اسکریپت است که تمرکز اصلی آن روی سرعت بالا می باشد. استفاده از این بسته نرم افزاری می تواند عملیات های سرور را سریع تر کرده و پشتیبانی کاملی را نسبت به ESM به شما ارائه می دهد. hot module replacement با استفاده از این بسته نرم افزاری با بالاترین سرعت ممکن صورت می گیرد و علاوه بر این از طیف گسترده ای از فایل های مختلف نیز پشتیبانی می کند. Snowpack از نظر عملکرد شباهت زیادی با ابزارهایی مانند Rollup و Parcel دارد.

این ابزار دارای جامعه کاربران بسیار فعالی است که همین عامل نیز باعث محبوبیت هرچه بیشتر آن در میان توسعه دهندگان جاوا اسکریپت شده است. علاوه بر این Snowpack موفق شده تا 18 هزار ستاره در گیت هاب دریافت کند و 55 هزار بار نیز به صورت هفتگی از طریق NPM دانلود شده است.

آینده ابزارهای جاوا اسکریپت

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