gsap - روشهای نصب (CDN, NPM, Bundler)
برای استفاده از GSAP (GreenSock Animation Platform)، سه روش متداول برای نصب و راهاندازی وجود دارد: CDN، NPM و Bundler.
در ادامه هر روش را همراه با نمونه کد توضیح میدهم.
🔹 1️⃣ استفاده از CDN (سریع و بدون نصب)
این روش مناسب تست سریع یا پروژههای کوچک است.
فقط کافی است لینک CDN را در فایل HTML قرار دهید:
✅ مزایا: سریع، بدون نیاز به نصب یا پیکربندی.
⚠️ معایب: مناسب پروژههای کوچک است، کنترل نسخه سختتر است.
🔹 2️⃣ نصب با NPM
مناسب پروژههای حرفهای که با Node.js یا فریمورکهایی مثل React, Vue, Angular توسعه میدهید.
نصب:
استفاده در پروژه:
-
در HTML فقط المان را تعریف کنید:
✅ مزایا: مدیریت نسخه راحت، مناسب پروژههای مدرن.
⚠️ معایب: نیازمند Node.js و ابزارهای Build است.
🔹 3️⃣ استفاده با Bundler (Webpack, Vite, Parcel و …)
اگر پروژهتان از Bundler استفاده میکند (مانند پروژههای React/Vue پیشرفته):
نصب:
ایمپورت در فایل ماژول:
-
با ابزار Bundler، GSAP به صورت خودکار در باندل نهایی اضافه میشود.
✅ مزایا: بهترین انتخاب برای پروژههای بزرگ با Build Pipeline.
⚠️ معایب: نیاز به تنظیمات Bundler (معمولاً در فریمورکهای مدرن از قبل پیکربندی شده است).
🔹 نکات مهم
-
نسخه: بهتر است نسخه مشخص نصب کنید تا در آپدیتهای بعدی تغییرات ناخواسته نداشته باشید، مثل:
-
Pluginها: بعضی پلاگینهای GSAP (مثل ScrollTrigger) در خود بسته gsap موجودند:
✅ خلاصه
روش | مناسب برای | مزایا | نمونه دستور |
---|---|---|---|
CDN | تست سریع، پروژههای کوچک | سریع، بدون نصب | <script src="...gsap.min.js"></script> |
NPM | پروژههای Node، React، Vue، Angular | مدیریت نسخه، یکپارچگی با ابزارهای مدرن | npm install gsap |
Bundler | پروژههای بزرگ با Webpack/Vite | کارایی بالا، مدیریت وابستگیها | import { gsap } from "gsap" |
💡 پیشنهاد من:
-
برای نمونهسازی سریع: از CDN استفاده کنید.
-
برای پروژههای حرفهای و مقیاس بزرگ: حتماً NPM + Bundler را انتخاب کنید.