ویرگول
ورودثبت نام
Reihaneh dastres
Reihaneh dastres
خواندن ۲ دقیقه·۱۰ ماه پیش

تست پکیج بصورت لایو قبل از نسخه گذاشتن


از سری چالش هایی که مدت طولانی درگیرش بودم لایو تست کردن پکیج قبل از نسخه گذاشتن روی محیط npm بود چون پروژه ها سنگین و زیاد بودن استفاده کردن از مونوریپو کار درستی نبود

تصمیم گرفتم از npm link استفاده کنم اما مشکلی که وجود داشت با هر تغییر باید بیلد میگرفتم(چون اگه میخواستم لایو تغییرات بدم به پکیج ها ارور invalid hook) و این موضوع در طول کار انرژیمو میگرفت و بالاخره راه حلشو پیدا کردم

npm link چیه؟

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

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

مقدمات و کانفیگ ها:

برای تست پکیج با npm link باید دو نکته رو رعایت کنید
اول اینکه پکیج نباید تو پروژه نصب باشه
و دومین مورد اینکه باید این قسمت از پکیج جیسان پکیج رو به اینصورت تغییر بدید

پکیج جیسان قبل

پکیج جیسان بعد


اگه دقت کنید میبینید که بجای ./dist/packageName.es.js ، این ./src/index.jsx قرار گرفته
ابنجوری داریم بهش میفهمونیم معیار ما تغییرات فایل ایندکسمونه نه تغییرات بیلد

منظور از packageName اسم پکیج لوکالمون هست

سوم اینکه تو vite.config پروژه ی اصلی با این کد بهش بفهمون از ری اکت خود پروژه استفاده کنه نه ری اکت پکیج

import path from &quotpath&quot
resolve: { alias: { react: path.resolve(__dirname, &quot./node_modules/react&quot), }, },

من از ویت استفاده میکنم اگه شما از وبپک استفاده میکنید باید مسیر ری اکت رو از نودماژول میخونه رو توش تعریف کنی

نحوه ی استفاده

1.در پکیج این دستور رو اجرا کنید

npm link

2.در پروژه دستور زیر را اجرا کنید

npm link packageName

منظور از packageName اسم پکیج لوکالمون هست

حالا هر تغییری که ایجاد کنید بدون نیاز به اجرا کردن کامندی و بصورت لایو اعمال میشه برید حالشو ببرید

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

npm unlink packageName


اگه سوالی داشتید کامنت بزارید یا تو لینکدین پیام بدید?

quot quotتست پکیجپکیج npmnpmnpm link
فرانت دولوپر(ری اکت)
شاید از این پست‌ها خوشتان بیاید