با استفاده از فضای کاری pnpm یک monorepo راه اندازی کنید

Summarize this content to 400 words in Persian Lang در مقاله قبلی، ما در مورد اینکه چگونه یک ساختار monorepo می تواند بسته محور یا برنامه محور باشد، بسته به نیاز پروژه شما بحث کردیم. خوب، در این مقاله خاص، ما یک monorepo را با استفاده از pnpm راه‌اندازی می‌کنیم و مسیر برنامه محور را در پیش می‌گیریم.

Pnpm چیست؟

Pnpm نسل جدیدی از ابزارهای مدیریت بسته است. درست مانند NPM و نخ کار می کند اما مزایایی دارد.

## install pnpm
npm install -g pnpm # install pnpm globally

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

mkdir monorepo # creates a new folder

or

git clone repository-link # clones a git repository (note: replace the link with repository URL)`

بیایید فهرست فعلی خود را به دایرکتوری اخیراً ایجاد شده یا مخزن کلون شده تغییر دهیم.

cd monorepo # change directory

در مرحله بعد، ما می خواهیم مدیریت بسته را با pnpm مقداردهی کنیم.

pnpm init

اختیاری: اگر دایرکتوری از GitHub یا GitLab کلون نشده است git را راه اندازی کنید.

git init # initializes git

touch .gitignore

node_modules و پوشه‌های خروجی ساخت رایج را اضافه کنید تا از فشار دادن آنها به مخزن خود جلوگیری کنید.

# .gitignore

node_modules
dist
build
.env

پس از انجام تمام این کارها، می توانید پوشه خود را در ویرایشگر کد مورد علاقه خود باز کنید. اگر از Visual Studio Code استفاده می کنید، می توانید با استفاده از دستور زیر، پوشه را باز کنید

code . # opens up the folder in vs code

کد . درست کار نکرد اینجا

فضای کاری را تنظیم کنید

برای راه اندازی یک فضای کاری، یک فایل جدید pnpm-workspace.yaml ایجاد کنید

touch pnpm-workspace.yaml # creates a new file

پیکربندی زیر را به فایل فضای کاری اضافه کنید:

# pnpm-workspace.yaml

packages:
– ‘apps/*’
– ‘packages/*’

این پیکربندی به pnpm می گوید که فضای کاری شما شامل همه فهرست های موجود در پوشه های برنامه ها و بسته ها است.

فهرست برنامه ها و بسته ها را ایجاد کنید

mkdir -p apps packages

ما برنامه های خود را به دو قسمت تقسیم می کنیم apps/website و apps/api.

**apps/website **دایرکتوری وب سایت که با استفاده از NextJS پیکربندی می کنیم. برای پیکربندی این، باید فهرست کاری فعلی خود را به برنامه ها تغییر دهیم.

cd apps

pnpm create next-app website

apps/api دایرکتوری api که با استفاده از NestJs پیکربندی می کنیم.

# monorepo/apps (current working directory)

nest new api –package-manager=pnpm # creates a new NestJS project

یک کتابخانه مشترک رابط کاربری ایجاد کنید

کار عالی! شما برنامه های خود را راه اندازی کرده اید. اکنون، بیایید با ایجاد یک کتابخانه UI مشترک، همه چیز را به سطح بعدی ببریم. اینجاست که جادوی مونورپوس شروع به درخشش می کند.

packages/library دایرکتوری کتابخانه شامل اجزای رابط کاربری مشترک ما خواهد بود.

# monorepo

cd packages

mkdir library && cd library && pnpm init

# monorepo/packages/library/package.json
{
“private”: true,
“name”: “library”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

توجه داشته باشید که با تنظیم privateproperty روی true آن را به عنوان خصوصی اعلام می کنیم. این به این دلیل است که ما نمی‌خواهیم آن را در NPM یا جای دیگری منتشر کنیم، بلکه فقط می‌خواهیم آن را به صورت محلی در فضای کاری خود ارجاع دهیم و از آن استفاده کنیم.

در پوشه کتابخانه خود موارد زیر را نصب خواهیم کرد: React به عنوان یک وابستگی و TypeScript به عنوان یک وابستگی توسعه.

# monorepo

pnpm add –filter library react
pnpm add –filter library typescript -D

را –filter library در دستور نصب، به pnpm می گوید که این بسته های NPM را به صورت محلی در بسته کتابخانه نصب کند.

برای ساده نگه داشتن کارها، از کامپایلر TypeScript برای کامپایل بسته خود استفاده می کنیم. ما می‌توانیم با استفاده از چیزی مانند Rollup یا Vite، ترتیب جامع‌تری برای بسته‌بندی فایل‌های متعدد با هم داشته باشیم.

برای استفاده از کامپایلر TypeScript، می‌خواهیم یک فایل tsconfig.json در ریشه دایرکتوری کتابخانه خود ایجاد کنیم و پیکربندی زیر را اضافه کنیم.

# monorepo/packages/library/tsconfig.json
{
“compilerOptions”: {
“jsx”: “react-jsx”,
“allowJs”: true,
“esModuleInterop”: true,
“allowSyntheticDefaultImports”: true,
“module”: “commonjs”,
“outDir”: “./dist”
},
“include”: [“.”],
“exclude”: [“dist”, “node_modules”, “**/*.spec.ts”] }

در مرحله بعد، ویژگی اصلی فایل package.json را به روز می کنیم تا با فهرست خروجی مشخص شده در آن مطابقت داشته باشد tsconfig.json و همچنین یک اسکریپت ساخت اضافه کنید.

# monorepo/packages/library/package.json
{
“private”: true,
“name”: “library”,
“version”: “1.0.0”,
“description”: “”,
“main”: “dist/index.js”,
“scripts”: {
“build”: “rm -rf dist && tsc”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“react”: “^18”
},
“devDependencies”: {
“typescript”: “^5.5.4”
}
}

ایجاد اولین مؤلفه رابط کاربری کتابخانه مشترک ما

اجازه دهید ابتدا یک کامپوننت انتخاب ساده ایجاد کنیم. فایل را در فهرست راهنمای کتابخانه خود ایجاد کنیم.

# monorepo/packages/library

touch Select.tsx
# monorepo/packages/library/Select.tsx

function CustomSelect(props: any) {
return <select onChange={(e) => props.onChange(e)}>
{props.children}
</select>;
}

export default CustomSelect;

ما همچنین می‌خواهیم یک API عمومی داشته باشیم که در آن مؤلفه‌هایی را صادر می‌کنیم تا در خارج از بسته کتابخانه ما استفاده شوند. برای رسیدن به این هدف، یک فایل index.tsx ایجاد می کنیم و کامپوننت Select را که به تازگی ایجاد کرده ایم صادر می کنیم.

# monorepo/packages/library

touch index.tsx
# monorepo/packages/library/index.tsx

export * from ‘./Select’;

ساخت کتابخانه ما

pnpm –filter library build

در حال مصرف بسته کتابخانه ما از برنامه NextJs

تبریک می گویم! شما فقط مؤلفه کتابخانه UI مشترک خود را ایجاد کردید. برای استفاده از این کتابخانه در داخل برنامه NextJS ما در فهرست برنامه‌ها، می‌توانید آن را با استفاده از pnpm یا دستی اضافه کنید.

pnpm add library –filter website –workspace

این بسته کتابخانه را به عنوان وابستگی وب سایت اضافه می کند

{
“name”: “website”,
“version”: “0.1.0”,
“private”: true,
…,
“dependencies”: {
“library”: “workspace:*”,
…
},
“devDependencies”: {
…
}
}

ما تقریباً تمام شده ایم. اجازه دهید مقدار وابستگی کتابخانه را به روز کنیم “workspace:*”. این بدان معنی است که ما می خواهیم بسته را به صورت محلی حل کنیم نه از رجیستری مانند NPM، و * به این معنی است که می خواهیم همیشه از آخرین نسخه استفاده کنیم.

اکنون برای استفاده از Select Component، تنها کاری که باید انجام دهیم این است که آن را وارد کنیم.

سرور توسعه را راه اندازی کنید تا مؤلفه را در عمل ببینید.

pnpm –filter website dev

تنظیم اسکریپت برای monorepo

در ریشه ما package.json فایل، ما قصد داریم چند اسکریپت اضافه کنیم تا گردش کارمان راحت تر شود.

# monorepo/package.json

“scripts”: {
“dev”: “pnpm run – parallel – filter \”./apps/**\” dev”,
“build”: “pnpm run – recursive – filter \”./apps/**\” build”,
“test”: “pnpm run – recursive – filter \”./apps/**\” test”,
“lint”: “pnpm run – recursive – filter \”./apps/**\” lint”
}

تبریک می گویم! ما آن را انجام دادیم. این فرآیند نحوه راه اندازی monorepo را با استفاده از pnpm نشان می دهد. برای یک پروژه واقعی، من استفاده از هر یک از ابزارهای monorepo موجود را توصیه می کنم. در پست قبلی به چند مورد اشاره کردم. آنها مزایایی نسبت به pnpm دارند.

مخزن GitHub

در مقاله قبلی، ما در مورد اینکه چگونه یک ساختار monorepo می تواند بسته محور یا برنامه محور باشد، بسته به نیاز پروژه شما بحث کردیم. خوب، در این مقاله خاص، ما یک monorepo را با استفاده از pnpm راه‌اندازی می‌کنیم و مسیر برنامه محور را در پیش می‌گیریم.

Pnpm چیست؟

Pnpm نسل جدیدی از ابزارهای مدیریت بسته است. درست مانند NPM و نخ کار می کند اما مزایایی دارد.

## install pnpm
npm install -g pnpm # install pnpm globally

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

mkdir monorepo # creates a new folder

or

git clone repository-link # clones a git repository (note: replace the link with repository URL)`

بیایید فهرست فعلی خود را به دایرکتوری اخیراً ایجاد شده یا مخزن کلون شده تغییر دهیم.

cd monorepo # change directory

در مرحله بعد، ما می خواهیم مدیریت بسته را با pnpm مقداردهی کنیم.

pnpm init

اختیاری: اگر دایرکتوری از GitHub یا GitLab کلون نشده است git را راه اندازی کنید.

git init # initializes git

touch .gitignore

node_modules و پوشه‌های خروجی ساخت رایج را اضافه کنید تا از فشار دادن آنها به مخزن خود جلوگیری کنید.

# .gitignore  

node_modules  
dist  
build
.env

پس از انجام تمام این کارها، می توانید پوشه خود را در ویرایشگر کد مورد علاقه خود باز کنید. اگر از Visual Studio Code استفاده می کنید، می توانید با استفاده از دستور زیر، پوشه را باز کنید

code . # opens up the folder in vs code

کد . درست کار نکرد اینجا

فضای کاری را تنظیم کنید

برای راه اندازی یک فضای کاری، یک فایل جدید pnpm-workspace.yaml ایجاد کنید

touch pnpm-workspace.yaml # creates a new file 

پیکربندی زیر را به فایل فضای کاری اضافه کنید:

# pnpm-workspace.yaml

packages:
 - 'apps/*'
 - 'packages/*'

این پیکربندی به pnpm می گوید که فضای کاری شما شامل همه فهرست های موجود در پوشه های برنامه ها و بسته ها است.

فهرست برنامه ها و بسته ها را ایجاد کنید

mkdir -p apps packages

ما برنامه های خود را به دو قسمت تقسیم می کنیم apps/website و apps/api.

**apps/website **دایرکتوری وب سایت که با استفاده از NextJS پیکربندی می کنیم. برای پیکربندی این، باید فهرست کاری فعلی خود را به برنامه ها تغییر دهیم.

cd apps

pnpm create next-app website

apps/api دایرکتوری api که با استفاده از NestJs پیکربندی می کنیم.

# monorepo/apps (current working directory)

nest new api --package-manager=pnpm # creates a new NestJS project

یک کتابخانه مشترک رابط کاربری ایجاد کنید

کار عالی! شما برنامه های خود را راه اندازی کرده اید. اکنون، بیایید با ایجاد یک کتابخانه UI مشترک، همه چیز را به سطح بعدی ببریم. اینجاست که جادوی مونورپوس شروع به درخشش می کند.

packages/library دایرکتوری کتابخانه شامل اجزای رابط کاربری مشترک ما خواهد بود.

# monorepo 

cd packages 

mkdir library && cd library && pnpm init

# monorepo/packages/library/package.json 
{
  "private": true,  
  "name": "library",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

توجه داشته باشید که با تنظیم privateproperty روی true آن را به عنوان خصوصی اعلام می کنیم. این به این دلیل است که ما نمی‌خواهیم آن را در NPM یا جای دیگری منتشر کنیم، بلکه فقط می‌خواهیم آن را به صورت محلی در فضای کاری خود ارجاع دهیم و از آن استفاده کنیم.

در پوشه کتابخانه خود موارد زیر را نصب خواهیم کرد: React به عنوان یک وابستگی و TypeScript به عنوان یک وابستگی توسعه.

# monorepo

pnpm add --filter library react  
pnpm add --filter library typescript -D

را --filter library در دستور نصب، به pnpm می گوید که این بسته های NPM را به صورت محلی در بسته کتابخانه نصب کند.

برای ساده نگه داشتن کارها، از کامپایلر TypeScript برای کامپایل بسته خود استفاده می کنیم. ما می‌توانیم با استفاده از چیزی مانند Rollup یا Vite، ترتیب جامع‌تری برای بسته‌بندی فایل‌های متعدد با هم داشته باشیم.

برای استفاده از کامپایلر TypeScript، می‌خواهیم یک فایل tsconfig.json در ریشه دایرکتوری کتابخانه خود ایجاد کنیم و پیکربندی زیر را اضافه کنیم.

# monorepo/packages/library/tsconfig.json 
{  
  "compilerOptions": {  
    "jsx": "react-jsx",  
    "allowJs": true,  
    "esModuleInterop": true,  
    "allowSyntheticDefaultImports": true,  
    "module": "commonjs",  
    "outDir": "./dist"  
  },  
  "include": ["."],  
  "exclude": ["dist", "node_modules", "**/*.spec.ts"]  
}

در مرحله بعد، ویژگی اصلی فایل package.json را به روز می کنیم تا با فهرست خروجی مشخص شده در آن مطابقت داشته باشد tsconfig.json و همچنین یک اسکریپت ساخت اضافه کنید.

# monorepo/packages/library/package.json 
{
  "private": true,
  "name": "library",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "rm -rf dist && tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18"
  },
  "devDependencies": {
    "typescript": "^5.5.4"
  }
}

ایجاد اولین مؤلفه رابط کاربری کتابخانه مشترک ما

اجازه دهید ابتدا یک کامپوننت انتخاب ساده ایجاد کنیم. فایل را در فهرست راهنمای کتابخانه خود ایجاد کنیم.

# monorepo/packages/library 

touch Select.tsx
# monorepo/packages/library/Select.tsx 

function CustomSelect(props: any) {  
   return <select onChange={(e) => props.onChange(e)}>
            {props.children}
          </select>;  
}

export default CustomSelect;

ما همچنین می‌خواهیم یک API عمومی داشته باشیم که در آن مؤلفه‌هایی را صادر می‌کنیم تا در خارج از بسته کتابخانه ما استفاده شوند. برای رسیدن به این هدف، یک فایل index.tsx ایجاد می کنیم و کامپوننت Select را که به تازگی ایجاد کرده ایم صادر می کنیم.

# monorepo/packages/library 

touch index.tsx
# monorepo/packages/library/index.tsx 

export * from './Select';

ساخت کتابخانه ما

pnpm --filter library build

در حال مصرف بسته کتابخانه ما از برنامه NextJs

تبریک می گویم! شما فقط مؤلفه کتابخانه UI مشترک خود را ایجاد کردید. برای استفاده از این کتابخانه در داخل برنامه NextJS ما در فهرست برنامه‌ها، می‌توانید آن را با استفاده از pnpm یا دستی اضافه کنید.

pnpm add library --filter website --workspace

این بسته کتابخانه را به عنوان وابستگی وب سایت اضافه می کند

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  ...,
  "dependencies": {
    "library": "workspace:*",
    ...
  },
  "devDependencies": {
    ...  
  }
}

ما تقریباً تمام شده ایم. اجازه دهید مقدار وابستگی کتابخانه را به روز کنیم "workspace:*". این بدان معنی است که ما می خواهیم بسته را به صورت محلی حل کنیم نه از رجیستری مانند NPM، و * به این معنی است که می خواهیم همیشه از آخرین نسخه استفاده کنیم.

اکنون برای استفاده از Select Component، تنها کاری که باید انجام دهیم این است که آن را وارد کنیم.

سرور توسعه را راه اندازی کنید تا مؤلفه را در عمل ببینید.

pnpm --filter website dev

تنظیم اسکریپت برای monorepo

در ریشه ما package.json فایل، ما قصد داریم چند اسکریپت اضافه کنیم تا گردش کارمان راحت تر شود.

# monorepo/package.json

"scripts": {
 "dev": "pnpm run - parallel - filter \"./apps/**\" dev",
 "build": "pnpm run - recursive - filter \"./apps/**\" build",
 "test": "pnpm run - recursive - filter \"./apps/**\" test",
 "lint": "pnpm run - recursive - filter \"./apps/**\" lint"
}

تبریک می گویم! ما آن را انجام دادیم. این فرآیند نحوه راه اندازی monorepo را با استفاده از pnpm نشان می دهد. برای یک پروژه واقعی، من استفاده از هر یک از ابزارهای monorepo موجود را توصیه می کنم. در پست قبلی به چند مورد اشاره کردم. آنها مزایایی نسبت به pnpm دارند.

مخزن GitHub