مراحل انتشار یک یا چند فایل جاوا اسکریپت در NPMJS

در این مقاله که به همت مهندس حامی خسروی منتشر میشود، سعی بر آن داریم تا مراحل انتشار یک یا چند فایل جاوا اسکریپت در NPMJS را مورد بحث و بررسی قرار دهیم. تا پایان همراه ما باشید.

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

ساخت اکانت NPM :

اولین قدم، داشتن یک پروفایل در سایت npmjs.com می باشد.

اگر اکانتی ندارید باید یکی از مراحل ذیل را پیش گیرید.

۱- ساخت اکانت داخل سایت

وارد سایت npmjs.com شده و گزینه sign up رو زده و مراحل ثبت نام را پیش گیرید.

۲- ساخت اکانت داخل ترمینال

وارد کردن دستور npm adduser و پر کردن اطلاعات پرسیده شده.

تایید ایمیل ساخته شده

این قسمت بسیار مهم می باشد. چون اگر ایمیل خود را تایید نکنید نمی توانید پکیج خود را انتشار دهید.

به عبارتی پس از ساخت اکانت باید ایمیلی مشابه ذیل را در میل باکس خود از طرف تیم ساپورت NPM دریافت کرده و verify کنید.

لاگین

سپس داخل ترمینال به اکانت خود با دستور npm login لاگین کنید. و برای اطمینان از آن، دستور npm whoami را زده. که با نشان دادن نام کاربری شما مشخصی میشود که شما به درستی لاگین کرده اید.

انتشار یک/چند فایل جاوا اسکریپت:

برای انتشار یک/چند فایل جاوا اسکریپت باید یک فولدر ایجاد کنید و داخل آن حداقل ۳ تا فایل قرار دهید.

فایل جاوا اسکریپتی که می خواهید انتشار دهید. اگر چند فایل جاوا اسکریپتی داریم باید تمامی فایل ها را اینجا قرار داده و در نهایت یک فایل دیگر جاوا اسکریپت ایجاد کرده و تمامی آن ها را داخلش import و در نهایت export کنیم. مانند شکل ذیل:

حال با فرض اینکه برنامه ما داخل ۳ فایل file 2.js, file 1.js و file 3.js است. توابع هر کدام از فایل ها را داخل ‌فایل mask-separator.js که خالی می باشد import  و نهایتا export میکنیم مشابه ذیل:

اگر بیش از یک خروجی تابع شما دارد باید معمولا یکی از روشهای بالا که در خط ۴ و ۵ آمده است را انتخاب کنید.

۲- فایل package.json که برای ساخت آن کافی است داخل ترمینال فولدر مربوطه رفته و دستور npm init را زده سپس به سوالات آن از جمله اسم پکیج، ورژن پکیج و توضیح پکیج پاسخ دهیم تا فایل package.json ساخته شود. البته می توانید جای جواب تمامی سوالات دکمه enter را بزنید و سپس داخل فایل package.json شوید و اطلاعات مورد نیاز را پر کنید.

مواردی که حتما باید پر شوند. شامل name, version و main هستند.

name: حتما باید یکتا باشد. پیشنهاد میکنم قبل گذاشتن نام پکیج، داخل خود سایت ‌‌npm.js نام پکیجی که می خواهید را سرچ کنید تا مطمئن شوید این نام یا نامی مشابه آن قبلا به عنوان پکیج ثبت نشده باشد. (چون اگر نام پکیج شما هم خیلی شبیه نام یکی از پکیج های از قبل ثبت شده باشد، در زمان انتشار به خطا خواهید خورد.)

version: ورژن پکیج خود را وارد کنید که معمولا در ابتدا با شماره ۱٫۰٫۰ میباشد. فقط در نظر داشته باشد هر زمان پکیج خود را به روز میکنید و می خواهید نسخه جدید را انتشار دهید باید حداقل ورژن آن را ۱ عدد بالا ببرید.

main: باید نام فایل جاوا اسکریپت را جلوی آن بنویسید. که اگر یک فایل باشد نام آن را و اگر چند فایل باشد نام آن فایلی که مابقی فایل ها داخل آن import شده اند را بیاورید.

۳- فایل README.md که داخل آن توضیحات چطوره استفاده از پکیج را می نویسید.

که اگر در ابتدا آن # بگذاریم می توانیم جلوی آن عنوان بنویسیم. روی هم رفته # معادل تگ h1 عمل میکند، ## معادل تگ h2 و ### معادل تگ h3. و معمولا توضیحاتی طولانی که می خواهیم highlight شوند را داخل بلوک “` “` و توضیحات کوتاه را داخل بلوک “ می گذاریم ‍. مانند نمونه ذیل:

انتشار:

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

نکته: اگر پس از زدن دستور npm publish به خطا خوردید حتما به نوع خطا دقت کنید. چون می تواند دلایل متفاوت داشته باشد. مثل داشتم اسم پکیج مشابه در سایت و یا هم ورژن بودن آن نسبت به قبل ( اگر همین پکیج را قبلا انتشار داده باشید. )

میتوانید نمونه پکیج جاوا اسکریپتی که من قبلا آپلود کرده ام را در آدرس ذیل مشاهده، نصب و استفاده کنید.

https://www.npmjs.com/package/v-digits-separator

انتشار یک کامپوننت Vue.js:

برای انتشار یک کامپوننت Vue.js باید ابتدا یک پروژه Vue ایجاد کرده، کامپوننت مربوطه را داخل پروژه گذاشته و یک سری تنظیمات روی چند فایل از جمله package.json و  README.md انجام داد.

۱- یه پروژه vue ساده با دستور vue create project-name ایجاد میکنیم. به جای کلمه project-name در واقع نام پروژه ای که می خواهیم را می نویسیم. و سپس وارد فولدر آن شده. و در صورت نیاز تمامی dependency های مورد نیاز برای اجرای کامپوننت مربوطه خود را نصب میکنیم. و همچنین فایل ها و کامپوننت های اضافه را، برای کاهش حجم پکیجی که می خواهیم انتشار دهیم، حذف می کنیم. مثل کامپوننت hello world.

۲- کامپوننت مربوطه خود را داخل فولدر components قرار می دهیم. و اگر کامپوننت ما شامل css هم میباشد که می خواهیم زمان نصب پکیج این css روی کامپوننت اعمال شده باشد باید css آن را داخل مسیر src>assets>css>style.css قرار داده و داخل کامپوننت خودمان مسیر آن را به صورت ذیل بنویسیم.

sample : <style lang=”scss” src=”../assets/css/style.scss” />

همچنین باید داخل فایل vue.config.js نیز کد ذیل را داخل({})defineConfig اضافه کنیم.

sample : css: { extract: false },

که نتیجه خواهد شد.

سپس می توانید داخل فایل App.vue کامپوننت مربوطه را ایجاد و import کنید و پروژه را اجرا کنید تا مطمئن شوید که کامپوننت به درستی کار میکند و پروژه خطایی ندارد.

که در نهایت وضعیت فایل ها و فولدر ها مشابه ذیل خواهد شد.

۳- قبل از اینکه از پروژه با دستور npm run build بیلد بگیرید تا فولدر dist ساخته شود باید تنظیمات ذیل را داخل فایل ‌package.json پروژه خود انجام دهیم.

همانطور که در قسمت package.json جاوا اسکریپت توضیح داده شد. پر شدن مقادیر name، version و ‌main الزامی است. که در ساخت پکیج vue پر شدن files و ویرایش قسمت {script:{build نیز اجباری است به همراه سایر مقادیری که از قبل در زمان ساخت پروژه به صورت اتوماتیک ایجاد شده است.

موارد name, version و main قبلا توضیح داده شد اما در نظر داشته باشد که داخل main را باید به صورت ذیل بنویسید.

“main”: “dist/breadcrumb.common.js”,

در واقع نام  به جای breadcrumb در dist/breadcrumb.common.js باید نام پروژه خود را بنویسید یا به زبان بهتر نامی را بنویسید که در جلوی name– در scripts: build می نویسیم.

مقدار private اگر می خواهید که عموم به آن دسترسی داشته باشند باید false باشد.

مقدار files باید [“dist”]  باشد.

و مقدار scripts: build باید به جای “”vue-cli-service build” به صورت ذیل ویرایش گردد.

“build”: “vue-cli-service build –target lib –name breadcrumb src/components/Breadcrumb.vue”,

breadcrumb جلوی name– نامی است که دلبخواه بوده و بهتر است نام پروژه باشد که همین نام داخل main مینشیند. “main”: “dist/breadcrumb.common.js”

و آدرس بعد از آن نیز آدرس کامپوننت شما در پروژه است که در اینجا  src/components/Breadcrumb.vue میباشد.

تصویر ذیل نمونه ای از package.json پروژه breadcrumb است.

۴- حال باید با دستور npm run build بیلد بگیرید تا فولدر dist ساخته شود.

۵- باید فایل README.md را نیز همانطور که در قسمت انتشار فایل جاوا اسکریپت توضیح داده شد بابت توضیحات پکیج پر شود.

انتشار:

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

میتوانید نمونه پکیج کامپوننت Breadcrumb در Vue.js که من قبلا آپلود کرده ام را در آدرس ذیل مشاهده، نصب و استفاده کنید.

https://www.npmjs.com/package/vue-breadcrumb-dynamic

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.