۸ پکیج برتر که من برای هر پروژه جاوااسکریپت از آن استفاده می‌کنم

در این مقاله از وبسایت راکت قصد دارم در رابطه با ۸ پکیج پرکاربرد npm که در پروژه‌های جاوااسکریپت از آن استفاده می‌کنم را، به شما معرفی کنم.

Animejs

این یک کتابخانه جاوااسکریپتی است که از آن برای انیمیشن دادن به عناصر صفحه استفاده می‌شود. من در هر پروژه‌ای که نتوانستم به وسیله CSS یک انیمیشن دلخواه را سریع بسازم از این کتابخانه استفاده کرده‌ام. از این کتابخانه می‌توان برای هر سبک انیمیشنی مثل انیمیشن‌های css یا انیمیشن‌های جاوااسکریپتی یا حتی انیمیشن دادن به عناصر SVG استفاده کرد.

این کتابخانه به وسیله بسته‌های مدیریت npm قابلیت نصب شدن را دارد : 

npm install animejs
#or
yarn add animejs

import anime from "animejs";

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

Normalize.css

این ابزار فقط یک فایل CSS است که می‌توانید آن‌را به پروژه خود اضافه کنید برای اینکه استایل‌های پیش‌فرض مرورگر را حذف ‌کند تا کدهای شما روی اکثر مرورگرها و دستگاه‌ها بهتر کار کند.

npm install normalize.css
#or
yarn add normalize.css

 برای اضافه کردن این فایل به پروژه خود آن را به فایل اصلی css یا sass خود اضافه کنید.

// This @import will change depending on where your main CSS is located.
@import "../../../node_modules/normalize.css/normalize.css";

Prettier

اگر شما تا الان از این ابزار استفاده نکرده‌اید به شما توصیه می‌کنم همین الان از آن استفاده کنید. این ابزار قالب‌بندی کدهای شما درست می‌کند و آن را در اولیویت قرار می‌دهد تا شما به کار خود برسید بدون اینکه نگران این باشید که بعدا سراغ اشتباهات تایپی خود بروید و آن‌ها را درست کنید. این ابزار در زمان‌های مختلفی می‌تواند فرمت و قالب‌بندی کدهای شما را درست کند مثلا در هنگام ذخیره‌سازی فایل یا هنگام commit کردن در git می‌تواند این کار  را انجام دهد. که دقیقا مانند کاری است که pretty-quick و Husky انجام می‌دهند.

PRETTY-QUICK و HUSKY

pretty-quick این ابزارها دقیقا مثل ابزار قبلی است با این تفاوت که می‌تواند آن را طوری تنظیم کرد که با انجام تغییرات فعال شود.

 HUSKY تنظیمات این ابزار باید از طریق فایل Package.json انجام شود. 

npm install pretty-quick husky
#or
yarn add pretty-quick husky

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}

Browser sync

این پکیج یک ابزار فوق‌العاده برای توسعه سایت می‌باشد چون به شما این امکان را می‌دهد که تغییرات در سایت را بلافاصله بعد از انجام تغییرات در کدهای خود مشاهده کنید. همچنین برای تست سایت شما بر روی انواع دستگاه‌ها قابل استفاده می‌باشد.

npm install -g browser-sync
#or
yarn global add browser-sync

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

browser-sync start --server --files "css/*.css"

و برای سایت‌های پویا می‌توانید از یک سرور محلی به وسیله کد زیر اقدام کنید.

browser-sync start --proxy "yourproject.dev" --files "css/*.css"

 Eslinter

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

Stylelint

این ابزار هم دقیقا مثل ابزار قبلی است با این تفاوت که اینجا فایل‌های استایل شما مورد بررسی قرار می‌گیرد و اگر قوانین تعیین شده رعایت نشده باشند با ارور مواجه می‌شوید.

منبع