پرش به مطلب اصلی

ثبت یک برنامهٔ سفارشی React

هدف​

یک برنامهٔ سفارشی React را با بارگذاری بسته‌اش در یک محیط نصب کنید تا پوستهٔ پلتفرم بتواند آن را همان‌جا به‌عنوان یک برنامه بارگذاری کند.

به‌دنبال چگونگی ساخت برنامه هستید نه نصب آن؟ این صفحه فرض می‌کند برنامه از پیش وجود دارد و بسته‌بندی شده است. نوشتن آن — راه‌اندازی پروژه، پیکربندی Module Federation، کامپوننت برنامه، Runtime SDK، آزمون و بسته‌بندی — در ساخت یک برنامهٔ سفارشی React است.

پیش‌نیازها​

  • با نقش مدیر پلتفرم وارد مرکز کنترل مدیریت شده‌اید.
  • یک ناشر و راه‌حلی که آن ناشر مالکش است از پیش وجود دارند.
  • محیطی که برنامه را در آن نصب می‌کنید فعال است.
  • بستهٔ برنامه را دارید — فایل .zip که npm run pack در پروژهٔ خود برنامه تولید می‌کند. معمولاً در پوشهٔ package/ همان پروژه نوشته می‌شود و به نام برنامه است، برای نمونه par_sales_dashboard-2.0.1.zip.

گام‌ها​

۱. محیطی را که برنامه باید در آن نصب شود، از انتخابگر نوار بالا برگزینید. ۲. راه‌حل‌ها را باز کنید، سپس راه‌حلی را که برنامه به آن تعلق دارد باز کنید. ۳. در ناوبری راه‌حل، برنامه‌های سفارشی را انتخاب کنید. این صفحه برنامه‌هایی را فهرست می‌کند که این راه‌حل پیش‌تر در محیط برگزیده نصب کرده است. ۴. جدید را انتخاب کنید. پنلی در کنار صفحه باز می‌شود. ۵. فایل بستهٔ برنامه را برگزینید. ۶. ثبت برنامهٔ سفارشی را انتخاب کنید. برنامه در فهرست همان راه‌حل و محیط، و در صفحهٔ خانهٔ آن محیط در پوستهٔ پلتفرم، ظاهر می‌شود.

همهٔ فرم همین است. بسته از پیش می‌گوید نام برنامه چیست، با کدام اسکوپ Module Federation ساخته شده، کدام ماژول را ارائه می‌کند و به کدام اسکوپ‌ها نیاز دارد — پس چیزی برای تایپ کردن نیست، و چیزی برای اشتباه تایپ کردن هم نیست.

پشت صحنه چه اتفاقی می‌افتد​

پلتفرم پیش از ذخیرهٔ هر چیزی آرشیو را وارسی می‌کند: اندازه‌اش، تعداد فایل‌هایش، میزان بازشدنش، اینکه هیچ مسیری از پوشه بیرون نزند، و اینکه هر فایل از نوعی باشد که پلتفرم سرو می‌کند. سپس مانیفست برنامه را از دل آرشیو می‌خواند، آن را در برابر شِمای مانیفست برنامهٔ سفارشی اعتبارسنجی می‌کند و نام منطقی را در برابر پیشوند ناشرِ مالک می‌سنجد.

آرشیو در پایگاه دادهٔ خود پلتفرم ذخیره می‌شود و کد برنامه از نشانی خود پلتفرم سرو می‌شود. همین است که راه‌حل را خودبسنده می‌کند: برون‌ریزی راه‌حل کد را با خود می‌برد، پس درون‌ریزی آن در Test یا Production برنامه‌ای کارآمد نصب می‌کند، بی‌آنکه میزبان بیرونی‌ای لازم باشد که کسی باید سرِپا نگهش دارد.

نصب برنامه در یک محیط، آن را در محیط دیگری نصب نمی‌کند. برنامه هنگام برون‌ریزی و درون‌ریزی راه‌حلش به آنجا سفر می‌کند.

بارگذاری دوباره، ساختِ نصب‌شده را جایگزین می‌کند. این همان حلقهٔ عادی کار است: بساز، بارگذاری کن، ببین، دوباره بساز.

حالت میزبانی‌شده، تنها برای توسعه​

هنگام نوشتن یک برنامه می‌توانید آن را به‌جای این، میزبانی‌شده ثبت کنید: پوسته remoteEntry.js را از سرور توسعهٔ شما بارگذاری می‌کند، پس بارگذاری داغ را از دست نمی‌دهید و برای هر تغییر بسته نمی‌سازید. پلتفرم ثبت میزبانی‌شده را در هر محیطی که توسعه نباشد رد می‌کند، چون برنامه‌ای که کدش جای دیگری زندگی می‌کند برنامه‌ای است که راه‌حلش نمی‌تواند حملش کند.

عیب‌یابی​

  • «Custom app … must start with the publisher prefix …_.» — مقدار logicalName در package.json برنامه با پیشوند ناشرِ مالک آغاز نمی‌شود. آن را همان‌جا اصلاح کنید و بسته را دوباره بسازید؛ نام از ساخت می‌آید، نه از این صفحه.
  • «The package manifest is invalid: …» — فایل parsware.json درون آرشیو با شکل مورد انتظار نمی‌خواند. این فایل را parsware-pack می‌نویسد، پس معمولاً یعنی بسته دستی ویرایش شده یا با نسخهٔ قدیمی‌تری از ابزار ساخته شده است.
  • «… holds a CustomControl, not a CustomApp.» — این بستهٔ یک کنترل سفارشی است. آن را از صفحهٔ کنترل‌های سفارشی نصب کنید.
  • «Custom app … is already installed in this environment by another solution.» — این نام را راه‌حل دیگری گرفته است. نام خود را عوض کنید یا نخست آن ثبت را بردارید.
  • «Environment … is not a development environment» — دارید یک برنامهٔ میزبانی‌شده را بیرون از محیط توسعه ثبت می‌کنید. به‌جایش بسته را بارگذاری کنید.
  • «Environment … is not active.» — تا پایان آماده‌سازی محیط صبر کنید، یا محیط دیگری برگزینید.

سناریوهای مرتبط​

  • ساخت یک برنامهٔ سفارشی React.
  • باز کردن یک برنامهٔ سفارشی React.
  • ثبت یک کنترل سفارشی.
  • ساخت یک راه‌حل.