بازگشت به صفحه ی دوره

نحوه پیدا کردن و استفاده از کد های آماده

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

یکیش اینه که کد منبع کتابخونه رو کپی کنیم و هرجوری که میخوایم هندلش کنیم. این امن ترین راه هست، چون کنترل کامل روی نرم افزار داریم و میتونیم بسته به نیازمندی هامون تغییرش بدیم. با این حال، چیزایی مثل سازگاری و اپدیت های خودکار رو از دست میدیم. بیشتر پروژه های منبع باز (open source) کدشون رو توی گیت هاب یا بقیه پلتفرم های version control قرار میدن. از این رو، دسترسی پیدا کردن و fork کردن کد پکیج راحت تر هست. بعد از اینکه کد رو دانلود کردیم، میتونیم هر کاری که میخوایم برای استفاده ازش توی برنامه خودمون انجام بدیم. راه حل های ممکن میتونه ذخیره کردنش روی یک cloud distribution network (CDN) و دسترسی بهش از اونجا، یا مستقیم ذخیره کردنش توی کد ها و فایل های پروژمون باشه.

یه راه دیگه اینه که پکیج رو از یک CDN موقع لود شدن صفحه سمت کلاینت دانلود کنیم. معروف ترین CDN که مخصوص ذخیره کردن و host کردن کتابخونه های جاوا اسکریپته، cdnjs.com هست که هزاران کتابخونه رو داره و به شما اجازه میده اونها رو توی markup صفحه استفاده کنید، بدون اینکه نگران باشید کجا ذخیرشون کنید یا چجوری آپدیتشون کنید:

cdnjs

در مثال زیر نشون داده شده که چجوری میتونید vue.js رو از این cdn توی markup قرار بدید:

// myApplicationMarkup.html
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.39/vue.cjs.js"></script>
<script type="text/javascript">
console.log("Vue was loaded: ", !!Vue)
// => Vue was loaded: true
</script>
</html>

نکته: اگر میخواید پکیج ها رو از طریق این روش موقع runtime توی مرورگر لود کنید، باید حواستون به ترتیب قرارگیری و اجرای تگ های script باشه. اونها از بالا به پایین اجرا میشن. بنابراین اگه جای دوتا تگ رو توی مثال بالا با هم عوض کنید، خروجی کنسول میگه که Vue لود نشده و مقدار false میاد، در صورتی که در حقیقت توی تگ بعدی لود میشه.

راه قبلی خیلی محبوبیت پیدا کرد و الان خیلی رایجه. یه راه دیگه هم استفاده از Node.js Package Manager (npm) هست که همینطور که از اسمش پیداست ابزاریه که پکیج های جاوا اسکریپت رو با اکوسیستم Node.js مدیریت میکنه. npm دارای سه بخش هست:

  • وبسایت npmjs.com برای هاست کردن کل مستندات و پکیج ها
  • CLI که با Node.js نصب میشه
  • قسمت Registery، که جاییه که کل ماژول ها ذخیره شدن و قابل نصب هستن:
npm

برای استفاده از npm باید یه نسخه از Node.js روی سیستمتون نصب باشه و یک ابزار میخواد که تمام قسمت های جاوا اسکریپت شما رو یکی (bundle) کنه تا بشه توی مرورگر اجراش کرد.

بعد از اون تنها کاری که باید انجام بدید اینه که ماژولی که میخواید رو نصب کنید:

// in terminal
$ npm install <package>.

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

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