لینک کوتاه مطلب : https://hsgar.com/?p=6721

اکوسیستم Node (هنوز) مشکلات ابزارسازی دارد

من اخیرا یک را منتشر کردم بسته کوچک npm حاوی یک کتابخانه Vue. این بسته با TypeScript طراحی شده توسط Vite نوشته شده است، که من (به اشتباه) تصور می کردم بیشتر مشکلات من را میانجی می کند.

ابتدا، من از Vite برای ساختن یک سایت کوچک جلویی برای نمایش کتابخانه استفاده کردم. این به من اجازه می دهد کامپوننت را آزمایش کنم و استفاده را در همان مخزن نشان دهم. انجام این کار برای کسی که تجربه ای در بحث پیکربندی های TypeScript داشت کاملاً ساده بود، اما من تصور می کنم برای یک توسعه دهنده با تجربه کمتر این کار می تواند یک کار دلهره آور باشد. من با دو tsconfig به پایان رسیدم، tsconfig.node.json و tsconfig.site.json، باید وضوح ماژول را کشف می کردم، متوجه شدم که نیاز دارم vue-tsc، و بسیاری از موانع جزئی دیگر داشت. بهترین چیز در مورد Vite این است سریع، که کار روی این را قابل مدیریت کرد.

دوم، من باید چگونگی انتشار یک کتابخانه را بیابم. پس از تحقیقات فراوان (خواندن رشته‌های Reddit و پست‌های وبلاگ)، من به طلسم مناسب آن پی بردم. tsc مولفه های، package.json گزینه‌ها و tsconfig‌ها برای به دست آوردن چیزی تقریباً کاربردی با کانال‌گذاری جادوگر جادویی یونیکس:

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

من یک *سومین* tsconfig اضافه کردم، tsconfig.dist.json (این نیز گسترش می یابد tsconfig.node.json) یک مورد جدید اضافه کرد vite.config.ts برای توزیع (که نیاز به گزینه های خاصی برای انتقال به rollup داشت)، و من چیزی شبیه به زیر را به package.json خود اضافه کردم:

"types": "./dist/types/main.d.ts",

"files": [

"dist"

],

"main": "./dist/sortablejs-vue3.umd.js",

"module": "./dist/sortablejs-vue3.es.js",

"exports": {

".": {

"import": "./dist/sortablejs-vue3.es.js",

"require": "./dist/sortablejs-vue3.umd.js"

}

},

کار بعدی که انجام دادم این بود که ابزاری درست کنم. من Prettier را با یک اسکریپت npm تنظیم کردم تا کدم را قالب بندی کند (که به دو فایل پیکربندی جدید نیاز دارد)، یک ربات GitHub برای به روز رسانی وابستگی ها (که به یک فایل پیکربندی نیاز دارد) و Vercel برای استقرار سایت دمو. بعداً زمانی که برچسب‌های جدید فشار داده می‌شوند، شخصی یک درخواست کشش برای انتشار خودکار به npm ارسال می‌کند که نیاز به یک .github/ دایرکتوری ساخته شود

حالا من آماده بودم که کتابخانه را آزاد کنم! یا اینطور فکر کردم: به دلایلی، .github/ در محتویات بسته گنجانده شده بود. پس از کمی حفاری، متوجه شدم که باید یک را اضافه کنم .npmignore، کاری که در گذشته انجام داده ام اما فراموش کرده ام. خوشبختانه، استفاده مجدد از آن باعث شد به یاد بیاورم که npm پیش فرض برای استفاده از شما است .gitignore، و وقتی یک npm اضافه می کنید آن را نادیده بگیرید دیگر نمی کند! من از مطالبم کپی کردم .gitignore و یک خط برای اضافه کرد .github.

بالاخره یک کتابخانه قابل انتشار داشتم!

شما می توانید کد را در https://github.com/MaxLeiter/sortablejs-vue3، و امیدوارم برای هرکسی که به دنبال انتشار چیزی مشابه در آینده است مفید باشد.

لینک منبع

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.