campaign-experts

آموزش ساخت و منتشر کردن بسته‌های npm یا npm packages - قسمت 2 - منتشر کردن package در npm و github



visibility  
mode_comment   ۰

در این قسمت میخوام مطلب آموزش ساخت و منتشر کردن بسته‌های npm رو ادامه بدم و اطلاعات بیشتری رو در مورد npm packages و منتشر کردن بسته‌های npm در اختیارتون قرار بدم.

در قسمت قبل در مورد ساختن package در npm توضیحاتی رو بهتون دادم و با هم یک بسته با نام spacekiller به وجود آوردیم و به صورت Local یا محلی اون رو تست کردیم.

در این جلسه میخوام در مورد publish کردن بسته در npm و github بهتون آموزش بدم.

Publish کردن

در ابتدا یک فایل markdown بنام README.md به وجود میارم و توضیحات خلاصه‌ای در مورد این پروژه میدم:

با این فایل توضیحات خلاصه‌ای در مورد بسته spacekiller به کاربران میدیم و در مورد نحوه نصب و نحوه کار با اون، توضیحاتی رو در اختیار کاربران قرار میدیم.

برای اینکه بتونین بسته‌های خودتون رو در npm منتشر کنید، باید در این سایت ثبت نام کنید و نام کاربری و رمز عبور داشته باشید. اگر ثبت نام نکردید میتونین از دستور npm adduser در command line استفاده کنید یا در سایت npm ثبت نام کنید.

حالا دستور npm login رو اجرا کنید و نام کاربری و رمز عبور رو بزنید تا اطلاعات ورود شما ذخیره بشه.

حالا دستور npm publish رو اجرا میکنم:

همونطور که میبینید ارور 402 به من میده و به خاطر این هست که من دارم از scope package استفاده میکنم و این موارد بصورت پیش‌فرض private هستند و نمیتونین بصورت رایگان در npm بسته‌های خصوصی یا private رو قرار بدین و باید برای اون پول پرداخت کنید. برای حل این مشکل میتونین اون رو بصورت public در بیارید. برای اینکار دستور npm publish --access=public رو اجرا میکنم:

میبینید که این بار موفقیت آمیز منتشر شد و حالا شما میتونین این بسته رو در آدرس https://www.npmjs.com/package/@mamadoo/spacekiller مشاهده کنید. بعد از publish شدن، تیم پشتیبانی npm یک email به شما میزنه و اطلاعاتی در مورد بسته منتشر شده رو در اختیارتون قرار میده.

اگر به هر دلیلی خواستید بسته‌ای که publish کردید رو حذف کنید، میتونین از دستور npm unpublish استفاده کنید. برای اینکه کدهامون رو در اختیار دیگران قرار بدیم و بقیه افراد هم بتونن در اون تغییراتی رو به وجود بیارن و در بهتر کردن پروژه به ما کمک بکنند، میتونیم کدهامون رو در محلی عمومی قرار بدیم که بقیه هم به اون دسترسی داشته باشند.

برای این منظور یک repository جدید در github به وجود میارم.

همونطور که میبینید نام پروژه رو مشخص کردم و اون رو public در نظر گرفتم. حالا بر روی Create repository کلیک میکنم تا این پروژه ساخته بشه.

همونطور که میبینید یک url در اختیار ما قرار گرفته است. حالا میتونیم از این url در فایل package.json استفاده کنیم.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

دو ویژگی license و repository رو به فایل package.json اضافه میکنم. بصورت زیر:

حالا یک فایل بنام .gitignore در ریشه سایت به وجود میارم و کد زیر رو در اون قرار میدم:

حالا به ترتیب کارهای زیر رو انجام میدم:

  1. در command line دستور git init رو اجرا میکنم تا git برای پروژه راه‌اندازی بشه و بتونین از قابلیتهای اون استفاده کنید.
  2. دستور git add . رو اجرا کنید تا همه فایلها به حالت tracked در بیان و git بتونه تغییرات اونا رو بررسی کنه.
  3. حالا دستور git commit -m "first commit" رو اجرا میکنم تا فایلهای Track شده با پیام مورد نظر commit بشن.
  4. حالا دستور git remote add origin https://github.com/mamadoo/spacekiller.git رو اجرا میکنم تا به git بگیم که repository که تعریف کردیم در چه آدرسی قرار دارد و بتونیم با اون ارتباط برقرار کنیم.
  5. در نهایت هم دستور git push -u origin master رو اجرا میکنم تا کدهای مورد نظر به repository در github ارسال بشن و در اختیار بقیه قرار بگیرن.

حالا اگر این آدرس رو مشاهده کنید، repository که من به وجود آوردم و کدها رو در اون قرار دادم، مشاهده خواهید کرد.

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

همونطور که میبینید در ابتدا دستور git tag رو استفاده کردم و یک تگ با شماره و متن مورد نظر به وجود میارم. حالا اگر بخوام این تگ ساخته شده رو به origin بفرستم و کاربران اون رو ببینن، باید دستور git push origin --tags رو اجرا کنید. حالا اگر این لینک رو مشاهده کنید، بصورت زیر خواهد بود:

میبینید که تگ مورد نظر ساخته شده و بقیه میتونن توضیحاتی که ما قرار دادیم رو ببینند.

به روز رسانی پروژه در npm و github

فرض کنید که بخوایم به هر دلیلی تغییراتی در پروژه خودمون به وجود بیاریم و یا ویژگی جدیدی رو به اون اضافه کنیم. مثلا فرض کنید که میخوام اگر کاربر یک عدد رو وارد کرد، اون عدد هم به رشته تبدیل بشه و با وارد کردن عدد به اون اروری داده نشه. برای اینکار فایل index.js رو بصورت زیر تغییر میدم:

حالا اگر در فایل test.js تابع مورد نظر رو فراخوانی کنید و یک عدد به اون پاس بدین، دیگه ارور نمیده و رشته نشون داده میشه.

برای بروز رسانی پروژه‌ها در npm باید از قواعد مربوط به semver استفاده کنید. برای اینکار از دستور npm version استفاده میکنم و نوع بروز رسانی مورد نظر رو مشخص میکنم. این انواع عبارتند از major و minor و patch که اگر لینک مورد نظر رو مشاهده کنید، توضیحاتی در مورد اونا داده شده است.

چون من فقط یک ویژگی رو اضافه کردم و تغییرات کلی و Breaking changes در کدها به وجود نیاوردم، باید نسخه پروژه رو بصورت minor بالا ببرم.

خب در ابتدا دستور git add . رو اجرا میکنم تا تغییرات بصورت track شده در بیان و بعد اونا رو با پیام Add support for number کامیت میکنم. حالا npm version minor رو اجرا میکنم و با اینکار بصورت اتوماتیک ورژن در package.json به 1.1.0 تبدیل میشه و یک تگ هم ساخته میشه و تغییرات هم commit میشن. حالا دستورات git push origin master و git push origin --tags رو اجرا میکنم تا تغییرات به github ارسال بشن.

برای بروز رسانی در npm هم دستور npm publish رو مجددا اجرا کنید تا تغییرات به npm نیز ارسال بشن. به همین راحتی.

نتیجه‌گیری

بهتون تبریک میگم! شما الان میدونین که چطور میشه یک ماژول node رو به وجود آورد و اون رو بصورت package در npm registry قرار داد و کدها رو در github در دسترس عموم قرار داد.

هر سوال یا مشکلی دارید میتونین در بخش نظرات مطرح کرده تا کمکتون کنم.

comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :