برنامه نویسی

ساخت کتابخانه مؤلفه Vue3 از ابتدا انتشار شماره 8

ek3nk4r 2024-05-29

0 2 خواندن این مطلب 2 دقیقه زمان میبرد

ساخت کتابخانه مؤلفه Vue3 از ابتدا انتشار شماره 8

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

release-it، نسخه‌سازی خودکار و انتشار بسته

مقاله قبلی قبلاً کتابخانه مؤلفه ما را بسته بندی کرده است و این مقاله نحوه انتشار کتابخانه مؤلفه را معرفی می کند. البته فقط انتشار نیست.

انتشار کتابخانه مؤلفه

بسته ای که می خواهیم منتشر کنیم پس از بسته بندی، ‘stellarnovaui’ نامگذاری شده است. بنابراین، برای ایجاد package.json، ‘pnpm init’ را در زیر ‘stellarnovaui’ اجرا کنید.

{
  "name": "stellarnovaui",
  "version": "1.0.0",
  "main": "lib/index.js",
  "module": "es/index.mjs",
  "files": [
    "es",
    "lib"
  ],
  "keywords": [
    "stellarnovaui",
    "vue3 Component Library"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "author": "",
  "license": "MIT",
  "description": "",
  "typings": "lib/index.d.ts",
}

اجازه دهید تعدادی از زمینه ها را توضیح دهیم.

فایل ورودی کتابخانه کامپوننت

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

فهرست فایلی که قرار است منتشر شود

وقتی نادرست است، به وب پک می گوید که همه کدها هیچ عارضه جانبی ندارند و می توانند درخت تکان دهند.

اگر عوارض جانبی در کد وجود دارد و نمی‌خواهیم که وب‌پک تکان دادن درخت را قاطعانه انجام دهد، می‌توانیم «sideEffects» را با آرایه‌ای پیکربندی کنیم تا به وب‌پک اطلاع دهیم که کدام فایل‌ها عوارض جانبی دارند و نباید درخت تکان داده شوند.

فایل های اعلامیه

سپس “pnpm publish” را در دایرکتوری اجرا کنید packages/stellarnovaui. توجه داشته باشید که در این مرحله از شما خواسته می شود تا به حساب npm خود وارد شوید. اگر ندارید، می توانید به سادگی در وب سایت رسمی ثبت نام کنید. قبل از انتشار، باید کد را به مخزن ارسال کنید یا پسوند “pnpm publish –no-git-checks” را اضافه کنید. پس از ورود به npm، می توانید بسته ای را که به تازگی منتشر کرده اید مشاهده کنید.

توضیحات تصویر

خودکارسازی نسخه و انتشار بسته

فرآیند انتشار بالا ما را ملزم می کند که هر بار که به روز می کنیم نسخه را به صورت دستی افزایش دهیم و به صورت دستی برچسب گذاری کنیم که بسیار ناخوشایند است. در مرحله بعد، از “release-it” برای مدیریت این وظایف استفاده خواهیم کرد.

برای شروع، باید «release-it» را نصب کنید.

pnpm add release-it -D -w

در مرحله بعد، باید یک اسکریپت و آدرس مخزن git را به فایل package.json در فهرست اضافه کنید packages/stellarnovaui.

{
  "name": "stellarnovaui",
  "version": "1.0.2",
  "main": "lib/index.js",
  "module": "es/index.mjs",
  "files": [
    "es",
    "lib"
  ],
  "keywords": [
    "stellarnovaui",
    "Vue 3 Component Library"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "author": "markliu2013",
  "license": "MIT",
  "description": "",
  "typings": "lib/index.d.ts",
  "repository": {
    "type": "git",
    "url": "https://github.com/markliu2013/stellarnovaui"
  },
  "dependencies": {
    "@stellarnovaui/utils": "^1.0.0"
  }
}

ايجاد كردن index.ts فایل در packages/components/script/publish دایرکتوری برای وظیفه انتشار

import run from '../utils/run';
import { pkgPath } from '../utils/paths';
import { series } from 'gulp';
export const publishComponent = async () => {
  run('release-it', `${pkgPath}/stellarnovaui`);
};
export default series(async () => publishComponent());

یک دستور اسکریپت جدید را در فایل package.json در دایرکتوری ریشه اضافه کنید تا public/index.ts با استفاده از gulp اجرا شود.

  "scripts": {
    "build:stellarnovaui": "gulp -f packages/components/script/build/index.ts",
    "publish:stellarnovaui": "gulp -f packages/components/script/publish/index.ts"
  },

پس از انجام تغییرات ما، آن را اجرا کنید pnpm run publish:stellarnovaui. خواهید دید که از ما می خواهد نحوه ارتقای نسخه، انتشار، اضافه کردن برچسب و غیره را انتخاب کنیم.”

توضیحات تصویر