چگونه کتابخانه Angular خود را در npm انتشار دهید

اگر با angular به صورت حرفه‌ای کار می‌کنید، همیشه پیش آمده است که کامپوننت‌هایی ایجاد کنید که بتوانید در کل پروژه خودتان چندین بار از آن استفاده کنید. اما آیا تاکنون به این فکر افتاده‌اید که کامپوننت‌هایی که نوشته‌اید را با افراد دیگری در سراسر جهان به اشتراک بگذارید. اگر قصد این کار را دارید، می‌توانید تا انتهای مقاله همراه من باشید تا روش این کار را به شما آموزش دهم.

سایت npmjs بزرگترین مکان برای ثبت نرم افزار در جهان است. توسعه دهندگان نرم افزارهای متن باز از npm برای اشتراک گذاری نرم افزارهای خود استفاده می‌کنند. در ابتدا شما نیاز دارید که در npm برای خود یک حساب کاربری باز کنید. شما می‌توانید با استفاده از این لینک به صورت رایگان ثبت نام کنید.

نصب Angular

اگر قبلا با angular کار کرده‌اید، پس احتمالا آن را روی سیستم خود نصب دارید. در غیر این صورت، در ابتدا نیاز دارید که NodeJS و npm را نصب کنید. برای این کار می‌توانید از لینک https://nodejs.org/en/download استفاده کنید. سپس با استفاده از دستور زیر angular CLI را نصب کنید.

npm i -g @angular/cli

ساخت یک پروژه angular

در ابتدای کار نیاز دارید که یک پروژه angular بسازید. اما قبل از آن نیاز دارید که یک workspace بسازید که پروژه شما متعلق به آن باشد. برای ساخت یک angular workspace از دستور زیر استفاده کنید.

ng new <workspace-name> --create-application=false

در این دستور بجای <workspace-name> نام مورد نظر خود را قرار دهید. از create-application=false
به این علت استفاده شده است تا در پروژه application ایجاد نشود. زیرا قصد داریم که یک library ایجاد کنیم. سپس با دستور زیر به مسیر پوشه workspace خود بروید.

cd <workspace-name>

برای مثال من یک workspace به صورت زیر می سازم.

ng new apple --create-application=false

ساخت یک Angular Library جدید

یک پروژه کتابخانه angular کامپوننت یا سرویسی است که می‌تواند به صورت یک بسته npm منتشر شود. این پروژه‌ها خود به تنهایی اجرا نمی‌شوند و در angular application های دیگر استفاده می‌شوند. برای ساخت یک پروژه کتابخانه جدید، در ابتدا وارد مسیر workspace خود شوید، و سپس از دستور زیر استفاده کنید:

ng generate library <project-name>

با این کار شما یک پروژه در workspace خود ایجاد کرده‌اید که شامل یک ماژول انگولاری با یک کامپوننت و یک سرویس است.

اگر قصد انتشار بسته خود را دارید، باید به این نکته توجه کنید که نام بسته باید در npm registry یکتا باشد. پس باید قبل از نام گذاری بررسی کنید که نام کتابخانه شما از قبل در npm registry ثبت نشده باشد.

در پروژه ایجاد شده، یک کامپوننت و یک سرویس هم ایجاد شده است. اگر شما فقط به کامپوننت آن نیاز دارید، می‌توانید service و فایل‌های وابسته به آن را حذف کنید.

حذف فایل projects/<project-name>/src/lib/<project-name>.service.ts

حذف فایل projects/<project-name>/src/lib/<project-name>.service.spec.ts

بروزرسانی فایل projects/<project-name>/src/public-api.ts

حال می‌توانید کتابخانه خود را در فایل کامپوننت بنویسید. اگر به فایل کامپوننت توجه کنید، مشاهده می کنید که template خود را باید مستقیم در خود فایل typescript بنویسید. اما اگر مانند application ها نیاز دارید که یک فایل مستقل برای template داشته باشید، می‌توانید همانند کامپوننت‌های application عمل کنید. به این صورت که در مسیر فایل کامپوننت یک فایل با نام

<project-name>.html

بسازید. و سپس به صورت زیر در فایل typescript جایگذاری کنید.

@Component(
  selector: 'lib-apple',
  templateUrl: './<project-name>.html',
  styles: []
})

کامپوننت خود را build کنید

دستور زیر را اجرا کنید، تا کامپوننت شما build شود.

ng build <project-name> --prod

فایل های خروجی در پوشه‌ای در مسیر زیر ساخته می شوند.

dist/<project-name>

انتشار کامپوننت angular در npm

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

cd dist/<project-name>

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

https://www.npmjs.com/package/<project-name>

همچنین می‌توانید دستور زیر را در ترمینال وارد کنید، تا همه اطلاعات بسته خود را مشاهده کنید.

npm info <project-name>

اگر در برنامه خود تغییراتی ایجاد کردید، و سپس دوباره می خواهید که این تغییرات شما در بسته منتشر شده اعمال شود، باید در ابتدا ورژن بسته خود را ارتقا دهید و سپس عمل انتشار را انجام دهید. برای این کار به فایل package.json در مسیر کتابخانه مراجعه کنید و مقدار فیلد version را تغییر دهید و سپس دستور publish را دوباره اجرا کنید.

  &quotname&quot: &quot<package-name>&quot,
  &quotversion&quot: &quot0.0.1&quot,                  <-- here
  &quotpeerDependencies&quot: {
      &quot@angular/core&quot: &quot^11.2.14&quot
  },
  &quotdependencies&quot: {
    &quottslib&quot: &quot^2.0.0&quot
  }
}

اضافه کردن کاربر به پروژه خود

اگر می‌خواهید که کاربران دیگری هم به بسته منتشر شده خود اضافه کنید، به این معنی که در قسمت Collaborators نام کاربر دیگری هم نمایش دهد، در ابتدا کاربر مورد نظر باید در npmjs نام کاربری داشته باشد. سپس با استفاده از دستور زیر می‌توانید این کار را انجام دهید.

npm owner add <user> <your-package-name>

وابستگی‌های کتابخانه شما

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

برای مثال می‌خواهید از bootstrap در کتابخانه خود استفاده کنید. برای این کار bootstrap را در بخش peerDependencies در my-workspace/projects/my-lib/package.json اضافه کنید.

&quotpeerDependencies&quot: {
     ...
     &quotbootstrap&quot: &quot^5.0.1&quot,
     ...
 }

با این کار هنگام نصب کتابخانه شما، bootstrap هم نصب می‌شود. سپس یک فایل scss. ایجاد کنید، و کد زیر را در بالای فایل اضافه کنید.

@import &quotnode_modules/bootstrap/scss/bootstrap&quot

اضافه کردن فایل readme

اگر به صفحه اول کتابخانه خود در سایت npmjs.com نگاه کنید، مشاهده می‌کنید که می‌توانید توضیحاتی را به کتابخانه خود اضافه کنید، تا کاربران راحت تر بتوانند از کتابخانه شما استفاده کنند. در مسیر کتابخانه شما فایلی به نام README.md وجود دارد. هر مطلبی که در این فایل بنویسید در صفحه اول کتابخانه شما نشان داده می‌شود.

منابع: