با اسکریپت های package.json، «npm run dev» را اضافه کنید

Summarize this content to 400 words in Persian Lang
npm run dev استاندارد “اجرای وب سایت من به صورت محلی” است، اما چگونه کار می کند؟ چگونه می توانیم عملکرد آن را گسترش دهیم؟ در این پست به این موارد خواهیم پرداخت:

چگونه می توان چه چیزی را پیکربندی کرد npm run dev میکند.
چگونه دستورات پیچیده را به واحدهای دانه ای تجزیه کنیم.
نحوه اجرای چندین دستور به صورت موازی
چگونه پیش نیازها را بدون از دست دادن نرمال اجرا کنیم Ctrl-C رفتار – اخلاق.
نحوه اضافه کردن داده‌های seed (اگر وجود ندارد) هنگام راه‌اندازی یک Backend Convex.

به عنوان مثال انگیزشی، در اینجا چند اسکریپت تعریف شده در برنامه مثالی convex-helpers آورده شده است. ما آنچه را که هر قطعه انجام می دهد را پوشش خواهیم داد

“scripts”: {
“dev”: “npm-run-all –parallel dev:backend dev:frontend”,
“build”: “tsc && vite build”,
“dev:backend”: “convex dev”,
“dev:frontend”: “vite”,
“predev”: “convex dev –until-success”,
“test”: “vitest”
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چگونه و کجا تعریف می شوند

npm run دستوراتی را اجرا می کند که در شما تعریف شده است package.json در فضای کاری پروژه شما هنگامی که مخزن خود را از دستوری مانند شروع می کنید، این دستورات اغلب از پیش پیکربندی می شوند npm create vite@latest با دستوراتی برای:

dev: یک محیط توسعه را اجرا کنید. این اغلب شامل بارگیری مجدد خودکار رابط کاربری در هنگام تغییر فایل ها می شود. برای Vite این است vite و Next.js است next dev.

build: ساخت وب سایت برای استقرار. این به طور کلی تمام html، css و javascript شما را کامپایل و بسته بندی می کند. برای Vite این است vite build و Next.js است next build.

test: آزمایش‌ها را اجرا کنید – اگر از Jest استفاده می‌کنید، فقط کافی است “test”: “jest” یا vitest برای Vitest.

در اینجا یک مثال اساسی از Next.js آورده شده است:

// in package.json
{
// …
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”
},
//…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا می توانید بدوید npm run dev یا npm run lint و غیره.

می توانید در مورد آن بیشتر بدانید npm run در اسناد

چرا از اسکریپت استفاده کنیم؟

این یک سوال منصفانه است که چرا باید دستوراتی را که در حال حاضر بسیار ساده در اسکریپت‌های بسته قرار داد. چرا فقط تماس نگیرید jest یا vite یا next build? چند دلیل خوب وجود دارد:

می‌توانید پارامترهای پیش‌فرض را برای دستورات ذخیره کنید تا مجبور نباشید روش «استاندارد» شروع چیزی را به خاطر بسپارید یا مستند کنید. در زیر خواهیم دید که چگونه می توانید آن را برای زنجیره دستورات و اجرای سایرین به صورت موازی پیکربندی کنید.
این اجازه می دهد تا به راحتی دستوراتی را که توسط نصب شده است اجرا کنید npm اما در سطح جهانی از پوسته (ترمینال) شما قابل دسترسی نیست.1 وقتی چیزهایی مثل npm install -D vitest، نصب می کند vitest به node_modules/.bin.2 شما نمی توانید بدوید vitest مستقیماً در پوسته شما،3 اما شما می توانید یک پیکربندی مانند: “scripts”: { “test”: “vitest” } و npm run test اجرا خواهد شد vitest.
همیشه با ریشه پوشه بسته به عنوان “دایرکتوری فعلی” اجرا می شود، حتی اگر در یک زیر شاخه باشید. بنابراین شما می توانید یک اسکریپت مانند تعریف کنید “foo”: “./myscript.sh” و همیشه به دنبال آن خواهد بود myscript.sh در ریشه بسته (در همان دایرکتوری package.json). توجه: می توانید از طریق دایرکتوری فعلی که در آن فراخوانی شده است دسترسی داشته باشید INIT_CWD متغیر محیطی.
می توانید به متغیرها در قسمت ارجاع دهید package.json به راحتی وقتی اسکریپت از آن اجرا می شود npm run. به عنوان مثال، شما می توانید به “نسخه” بسته خود با استفاده از npm_package_version متغیر محیطی، مانند process.env.npm_package_version در js یا $npm_package_version در یک فیلمنامه
اگر چندین فضای کاری دارید (بسیاری از دایرکتوری‌ها با package.json خودشان که در یک parentpack.json پیکربندی شده‌اند با یک پیکربندی «فضای کاری»)، می‌توانید همان فرمان را در همه فضاهای کاری با npm test –workspaces یا یکی با npm run lint –workspace apps/web.

میکند npm run dev کار با نخ / pnpm / نان؟

آره! حتی اگر وابستگی های خود را با مدیر بسته دیگری نصب کنید، همچنان می توانید اسکریپت های بسته خود را با npm اجرا کنید.

yarn # similar to `npm install`
npm run dev # still works!

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شما مجبور نیستید آن را به خاطر بسپارید npm run dev نقشه ها به yarn dev (یا yarn run dev). همینطور است npx: npx convex dev بدون توجه به اینکه از چه مدیر بسته ای برای نصب چیزها استفاده کرده اید، کار می کند.

اجرای دستورات به صورت موازی

چند بسته وجود دارد که می توانید از آنها برای اجرای همزمان دستورات استفاده کنید:4

npm-run-all
concurrently

ما فقط نگاه می کنیم npm-run-all اینجا. مثال ما را در نظر بگیرید:

“scripts”: {
“dev”: “npm-run-all –parallel dev:backend dev:frontend”,
“dev:backend”: “convex dev”,
“dev:frontend”: “vite”,
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این سه اسکریپت را تعریف می کند.

npm run dev:backend دویدن convex dev.

npm run dev:frontend دویدن vite.

npm run dev هر دو را اجرا می کند convex dev و vite به موازات از طریق npm-run-all.

هر دو خروجی پخش می شوند و انجام Ctrl-C هر دو اسکریپت را قطع می کند.

بخصوص؟ پست ساخت؟

شما می توانید با نامگذاری فرمان خود دستوراتی را برای اجرا قبل از (پیش) یا بعد از (پست) دستور دیگری (مثلا X) مشخص کنید. preX یا postX. در مثال:

“scripts”: {
“dev”: “npm-run-all –parallel dev:backend dev:frontend”,
“dev:backend”: “convex dev”,
“dev:frontend”: “vite”,
“predev”: “convex dev –until-success”,
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اجرا خواهد شد convex dev –until-success، قبل از دستور “dev” از npm-run-all –parallel dev:backend dev:frontend.

زنجیر کردن با “&&”

برای کسانی که از پوسته نویسی استفاده می کنند، اگر دستور قبلی موفق شد، می توانید دو دستور را به ترتیب اجرا کنید commandA && commandB. این در هر دو ویندوز و یونیکس (مک / لینوکس) کار می کند.

با این حال، فقط استفاده از چند مزیت وجود دارد pre-اسکریپت ها:

می توانید هر کدام از دستورات را با آن اجرا کنید npm run dev –ignore-scripts برای انجام ندادن اسکریپت “predev”، یا npm run predev به صراحت فقط مرحله “predev” را انجام دهید.
رفتار Ctrl-C در تجربه من قابل پیش بینی تر است. در محیط‌های پوسته مختلف، انجام Ctrl-C (که سیگنال وقفه را به فرآیند جاری می‌فرستد) گاهی اوقات اسکریپت اول را از بین می‌برد اما همچنان اسکریپت دوم را اجرا می‌کند. پس از تلاش‌های فراوان، تصمیم گرفتیم به عنوان الگو به “predev” تغییر دهیم.

ابتدا مراحل تعاملی را اجرا کنید

برای Convex، زمانی که برای اولین بار اجرا می کنید npx convex dev (یا npm run dev با اسکریپت‌های بالا)، از شما می‌خواهد که اگر قبلاً وارد نشده‌اید، وارد شوید و اگر قبلاً راه‌اندازی نشده است، از شما می‌خواهد که پروژه خود را راه‌اندازی کنید. این عالی است، اما دستورات تعاملی که متن خروجی را به‌روزرسانی می‌کنند، زمانی که خروجی توسط چندین دستور به طور همزمان پخش می‌شود، به خوبی کار نمی‌کنند. این انگیزه دویدن است npx convex dev –until-success قبل از npx convex dev.

convex dev توابع و طرح شما را هر زمان که با آنچه که شما مستقر کرده اید مطابقت نداشته باشد، همگام سازی می کند و به دنبال تغییرات فایل است.
را –until-success flag توابع و طرح شما را فقط تا زمانی که یک بار موفق شود همگام‌سازی می‌کند، به شما می‌گوید اگر مشکلی وجود داشت چه چیزی را برطرف کنید و تا زمانی که موفق شد یا Ctrl-C کنید، به‌طور خودکار دوباره امتحان کنید.
با دویدن npx convex dev –until-success، می‌توانیم ورود، پیکربندی پروژه و همگام‌سازی اولیه را انجام دهیم، همه اینها قبل از راه‌اندازی فرانت‌اند و باطن.
همگام‌سازی اولیه به‌ویژه زمانی مفید است که مشکلاتی مانند گم شدن متغیرهای محیط را که باید قبل از عملکرد برنامه تنظیم شوند، پیدا کند.
به این ترتیب تا زمانی که باطن آماده رسیدگی به درخواست‌ها با نسخه‌ای از توابع مورد انتظارش نباشد، فرانت‌اند شروع نمی‌شود.

کاشت اطلاعات هنگام راه اندازی

اگر دستور “predev” خود را برای Convex تغییر دهید تا شامل شود –run این یک تابع سمت سرور را قبل از شروع به کار شما اجرا می کند.

“scripts”: {
//…
“predev”: “convex dev –until-success –run init”,
//…
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را –run init فرمان تابعی را اجرا می کند که صادرات پیش فرض در آن است convex/init.ts. شما همچنین می توانستید بدوید –run myFolder/myModule:myFunction. اسناد نامگذاری را اینجا ببینید. این پست در مورد داده‌های کاشت را ببینید، اما اصل ماجرا این است که می‌توانید یک جهش داخلی تعریف کنید که بررسی می‌کند آیا پایگاه داده خالی است یا نه، و در این صورت مجموعه‌ای از رکوردها را برای اهداف آزمایش/تنظیم درج می‌کند.

tsc

اگر از TypeScript استفاده می کنید، می توانید یک بررسی نوع اجرا کنید / فایل های تایپ اسکریپ خود را با یک علامت خالی کامپایل کنید tsc. اگر شما tsconfig.json برای انتشار انواع پیکربندی شده است، انواع را می نویسد. اگر نه، فقط انواع را تایید می کند. انجام این کار به عنوان بخشی از ساخت عالی است، بنابراین شما چیزی را که دارای خطاهای نوع باشد نمی سازید. به همین دلیل مثال بالا انجام داد:

“build”: “tsc && vite build”,

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چگونه آرگومان ها را پاس کنیم؟

اگر می‌خواهید آرگومان‌هایی را به یک فرمان ارسال کنید، به عنوان مثال، آرگومان‌هایی را به فرمان آزمایشی خود ارسال کنید تا مشخص کنید چه آزمایشی باید اجرا شود، می‌توانید آنها را ارسال کنید. بعد از آ — برای جدا کردن دستور از استدلال از نظر فنی نیازی ندارید — اگر استدلال های شما به جای –پیشوند، اما اگر فراموش کردید برای کدام باید این کار را انجام دهید، همیشه این کار را انجام دهید.

npm run test — –grep=”pattern”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خلاصه

ما به چند روش استفاده از اسکریپت‌های package.json برای ساده‌سازی گردش کار خود نگاه کردیم. چه کسی می دانست که چقدر قدرت می تواند پشت یک ساده باشد npm run dev? با نگاهی به مثال اصلی ما:

“scripts”: {
“dev”: “npm-run-all –parallel dev:backend dev:frontend”,
“build”: “tsc && vite build”,
“dev:backend”: “convex dev”,
“dev:frontend”: “vite”,
“predev”: “convex dev –until-success”,
“test”: “vitest”
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

dev جلو و باطن را به صورت موازی اجرا می کند predev.

build بررسی تایپ از طریق tsc قبل از ساخت سایت استاتیک

dev:backend به طور مداوم توابع باطن را در محیط توسعه شما در حین ویرایش فایل ها مستقر می کند.

dev:frontend یک سرور پیشانی محلی را اجرا می کند که همزمان با ویرایش فایل ها، مجدداً بارگیری می شود.

predev قبل اجرا می شود dev و در صورت لزوم استقرار اولیه، مدیریت ورود، پیکربندی و همگام سازی اولیه را انجام می دهد.

test از Vitest برای اجرای تست ها استفاده می کند. توجه داشته باشید: npm test مختصر است برای npm run test همراه با دستورات دیگر، اما آنها موارد خاص هستند. npm run test عادتی است که من پیشنهاد می کنم

روشی که پوسته شما هنگام تایپ کردن فرمان اجرا می کند npm برای بررسی پوسته است PATH متغیر محیطی (به هر حال در ماشین های یونیکس). شما می توانید خود را با echo “$PATH”. تمام مکان های مشخص شده را بررسی می کند $PATH و از اولی استفاده می کند. ↩

از نظر فنی می‌توانید جاهایی را که npm باینری‌ها را نصب می‌کند لغو کرده و مشخص کنید. ↩

اگر واقعاً می خواهید، می توانید بدوید npm exec vitest، npx vitest به طور خلاصه، ./npm_modules/.bin/vitest مستقیماً یا اضافه کنید .npm_modules/.bin به مسیر شما ↩

برخی افراد از لخت استفاده می کنند & برای اجرای یک کار در پس‌زمینه، اما در ویندوز پشتیبانی نمی‌شود و قطع کردن یک فرمان لزوماً دیگری را از بین نمی‌برد. ↩

  "scripts": {
    "dev": "npm-run-all --parallel dev:backend dev:frontend",
    "build": "tsc && vite build",
    "dev:backend": "convex dev",
    "dev:frontend": "vite",
    "predev": "convex dev --until-success",
    "test": "vitest"
  },

// in package.json
{
// ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
//...

yarn # similar to `npm install`
npm run dev # still works!

  "scripts": {
    "dev": "npm-run-all --parallel dev:backend dev:frontend",
    "dev:backend": "convex dev",
    "dev:frontend": "vite",
  },

  "scripts": {
    "dev": "npm-run-all --parallel dev:backend dev:frontend",
    "dev:backend": "convex dev",
    "dev:frontend": "vite",
    "predev": "convex dev --until-success",
  },

  "scripts": {
      //...
    "predev": "convex dev --until-success --run init",
        //...
  },

    "build": "tsc && vite build",

npm run test -- --grep="pattern"

  "scripts": {
    "dev": "npm-run-all --parallel dev:backend dev:frontend",
    "build": "tsc && vite build",
    "dev:backend": "convex dev",
    "dev:frontend": "vite",
    "predev": "convex dev --until-success",
    "test": "vitest"
  },