ጠንካራ JS/TS Monorepo መገንባት፡ ከ Yarn፣ NX እና Changesets ጋር ያሉ ምርጥ ልምዶች

መግቢያ

ለምን ሞኖሬፖ?

በአሁኑ ጊዜ የሶፍትዌር ልማት ፈጣን እድገትን መካድ አይቻልም። ቡድኖቹ እያደጉ ናቸው, ፕሮጀክቶች ይበልጥ ውስብስብ ይሆናሉ. ኩባንያዎች ብዙ ቁርጥራጮችን ያካተተ የተከፋፈለ ኮድ ቤዝ ለማቆየት ከፍተኛ ሀብቶችን ያጠፋሉ. ሞኖሬፖን አስገባ - ሁሉንም ኮድህን አንድ ላይ የሚያሰባስብ ነጠላ፣ የተዋሃደ ማከማቻ። አዝማሚያ ከመሆን የራቀ፣ ሞኖሬፖስ በቅርቡ መላውን ኮድ ቤዝ በአንድ ቦታ ለማስቀመጥ የሕንፃ አቀራረብ ሆኗል። ቡድኖች የተሻሻለ አውድ መጋራት፣ ለስላሳ ትብብር እና በተፈጥሮ ኮድን እንደገና መጠቀምን የሚያበረታታ መሳሪያ ያገኛሉ።

የ yarn የስራ ቦታዎችን በማዘጋጀት ላይ

የ Yarn Workspaces ምንድን ናቸው?

የስራ ቦታዎች ብዙውን ጊዜ ጥቅሎች ተብለው የሚጠሩት የ monorepo ጥቅሎች ናቸው። በአንድ ማከማቻ ውስጥ ብዙ ፓኬጆችን ያለችግር እንዲያስተዳድሩ ይረዱዎታል። ከስራ ቦታዎች ጋር። ትችላለህ፥

• ጥገኞችን በቀላሉ ያጋሩ፡

  በፕሮጀክትዎ ውስጥ ያሉ የተለመዱ ጥገኞችን ያለችግር ያጋሩ።

• የጥገኝነት አስተዳደርን ቀላል ማድረግ፡

  ክር በራስ-ሰር የአካባቢያዊ ፓኬጆችን ያገናኛል፣ ማባዛትን ይቀንሳል እና ልማትን ያቃልላል።

• ጭነቶችን ማፋጠን;

  ከ Yarn አፈጻጸም ማሻሻያዎች እና የመሸጎጫ ስልቶች (ማለትም አብሮ የተሰራ plug'n'play ) ጥቅም።

• በሞኖሬፖ ላይ ቁጥጥርን አሻሽል፡-

  ገደቦችን (ህጎችን) ይግለጹ እና ወጥነትን ለመጠበቅ በደርዘን የሚቆጠሩ የሚገኙ ተሰኪዎችን ይጠቀሙ።

  
  

ለቀላልነቱ፣ ለፍጥነቱ እና ለሰፊው የማዋቀሪያ አማራጮች ምስጋና ይግባውና ለዚህ ጽሁፍ የተመረጠ ስራ አስኪያጅ ቢሆንም ትክክለኛው ምርጫ በፕሮጀክትዎ ልዩ ፍላጎቶች፣ የቡድን ምርጫዎች እና አጠቃላይ የስራ ሂደት ላይ የተመሰረተ መሆኑን ልብ ማለት ያስፈልጋል። ለምሳሌ፣ PNPM እና Turborepo ሰፋ ያሉ ባህሪያትን የሚያቀርቡ ሌሎች ዘመናዊ መሣሪያዎች ናቸው።

የመጀመሪያ ውቅር

ክር ማቀናበር ቀጥተኛ ሂደት ነው. በፕሮጀክትዎ ውስጥ Yarnን ለመጫን እና ለማዋቀር ኦፊሴላዊውን መመሪያ ይከተሉ: የክር መጫኛ መመሪያ .

መጫኑን ከጨረሱ በኋላ ወደ ውቅረት እንሂድ። plug'n'play እየተጠቀምን ስለሆነ የእርስዎ አይዲኢ ጥገኞችን በትክክል እንደሚያውቅ ማረጋገጥ አለቦት። VSCcode እየተጠቀሙ ከሆነ፣ ያሂዱ፡-

 # Typescript is required for VSCode SDK to set up correctly yarn add -D typescript@^5 yarn dlx @yarnpkg/sdks vscode

በዚህ ጊዜ ክር መጠቀም ለመጀመር ዝግጁ ነዎት።

የሞኖሬፖ መዋቅርን ማደራጀት

አሁን የጥቅል አስተዳዳሪው ተዋቅሯል፣ ሊሰፋ የሚችል የፕሮጀክት ድርጅት ለመንደፍ ጊዜው አሁን ነው። ግልጽ ፣ በደንብ የተገለጸ መዋቅር ማከማቻውን በቀላሉ ለማሰስ ብቻ ሳይሆን የተሻለ የኮድ መልሶ መጠቀምንም ያበረታታል። በዚህ ምሳሌ፣ ኮድ ቤዝ በሦስት ዋና ምድቦች እንከፍለዋለን።

• መተግበሪያዎች

  • ደንበኛ፡ የመጨረሻውን፣ ሊተገበሩ የሚችሉ የደንበኛ ምርቶችን ይይዛል።
  • አገልጋይ፡- የመጨረሻውን፣ ሊተገበሩ የሚችሉ የአገልጋይ ምርቶችን ይይዛል።

• ባህሪያት

  • ደንበኛ፡ ለብቻው UI ፍርግሞች።
  • አገልጋይ፡ ለብቻው የኋላ ቢዝነስ ሎጂክ ቁርጥራጮች።

• ሊብስ

  ቤቶች የጋራ ኮድ እንደ የንድፍ ስርዓት ክፍሎች፣ ቋሚዎች፣ ንብረቶች እና መገልገያዎች። እንደገና ጥቅም ላይ ሊውል የሚችል አመክንዮ ለማከማቸት ይህ ከአውድ-ነጻ ዞን ነው።

  
  

የዚህን የአቃፊ መዋቅር ሃይል ለማሳየት እነዚህን ዋና ዋና ማህደሮች ወደ Yarn's workspaces ዝርዝር በማከል እንጀምር። በእርስዎ root package.json ውስጥ፣ የሚከተለውን ያክሉ፡-

 "workspaces": [ "apps/**", "features/**", "libs/**" ]

ይህ ውቅረት Yarn በእነዚህ አቃፊዎች ውስጥ ያሉ ጥቅሎችን እንደ አካባቢያዊ ጥቅሎች እንዲይዝ ይነግረዋል። ተከታይ ተከላዎች ለእያንዳንዱ ጥቅል ጥገኛዎች በትክክል መዘጋጀታቸውን እና መገናኘታቸውን ያረጋግጣሉ.

የማስነሻ ኮድ ቤዝ

በዚህ ክፍል ውስጥ፣ ሞኖሬፖን እንዴት ማስነሳት እንደሚቻል የሚያሳይ አነስተኛ የኮድቤዝ ምሳሌ ውስጥ እንሄዳለን። ሙሉ የኮድ ቅንጥቦችን ከማካተት ይልቅ፣ ለዚህ ጽሑፍ በተዘጋጀው ማከማቻ ውስጥ ካሉ የተሟሉ ፋይሎች ጋር አገናኞችን የያዘ አጭር ምሳሌዎችን እሰጣለሁ።

የማስነሻ አገልጋይ መተግበሪያ

ለተጠቃሚ ማረጋገጫ በቀላል ኤክስፕረስ ኤፒአይ እንጀምራለን። ይህ የአገልጋይ መተግበሪያ ከሌላ ጥቅል ተቆጣጣሪ የሚጠቀም አንድ የመጨረሻ ነጥብ ( /auth/signIn ) ያጋልጣል።

 import express from "express"; import cors from "cors"; import { signInHandler } from "@robust-monorepo-yarn-nx-changesets/sign-in-handler"; const app = express(); const port = process.env.PORT || 1234; app.use(express.json()); app.use( cors({ origin: process.env.CORS_ORIGIN || "http://localhost:3000", }) ); app.post("/auth/signIn", signInHandler); app.listen(port, () => { console.log(`Server is running at http://localhost:${port}`); });

ከጥቅሉ ጋር አገናኝ

እንደሚመለከቱት፣ የ /auth/signIn መጨረሻ ነጥብ ከሌላ ጥቅል የመጣ ተቆጣጣሪ ይጠቀማል። ያ ወደ ቀጣዩ ክፍላችን ያመጣናል፡ የአገልጋይ ባህሪ።

የማስነሻ አገልጋይ ባህሪ

የአገልጋዩ ባህሪ የማረጋገጫ ሎጂክን ያጠቃልላል። በዚህ ፓኬጅ ውስጥ፣ የመግባት ተቆጣጣሪውን እንገልፃለን፣ ይህም ከሊብዎቹ የጋራ ማረጋገጫ መገልገያ ይጠቀማል።

 import type { RequestHandler } from "express"; import { passwordValidator, usernameValidator, } from "@robust-monorepo-yarn-nx-changesets/validator"; const signInHandler: RequestHandler = (req, res) => { if (!req.body) { res.status(422).send("Request body is missing"); return; } if (typeof req.body !== "object") { res.status(422).send("Request body expected to be an object"); return; } const { username, password } = req.body; const usernameValidationResult = usernameValidator(username); if (typeof usernameValidationResult === "string") { res .status(422) .send("Invalid username format: " + usernameValidationResult); return; } const passwordValidationResult = passwordValidator(password); if (typeof passwordValidationResult === "string") { res .status(422) .send("Invalid password format: " + passwordValidationResult); return; } // Emulate a successful sign-in if (username === "test" && password === "test1234") { res.status(200).send("Sign in successful"); return; } return res.status(422).send("Username or password is incorrect"); }; export default signInHandler;

ከጥቅሉ ጋር አገናኝ

ይህ አቀራረብ የማረጋገጫ አመክንዮ በራሱ ጥቅል ውስጥ ያጠቃልላል, ራሱን ችሎ እንዲዳብር እና እንዲቆይ ያስችለዋል. አረጋጋጭ መገልገያዎች ከጋራ ሊብ እንዴት እንደሚመጡ ልብ ይበሉ።

የማስነሻ ደንበኛ መተግበሪያ

በመቀጠል፣ የደንበኛውን ጎን እንይ። በደንበኛ አፕሊኬሽን ውስጥ የአገልጋይ ኤፒአይን በመጥራት የተጠቃሚን ማረጋገጥ የሚያስችል ቀላል ድር ጣቢያ እንገነባለን።

 "use client"; import { SignInForm } from "@robust-monorepo-yarn-nx-changesets/sign-in-form"; const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:1234"; export default function Home() { const handleSubmit = async (username: string, password: string) => { const response = await fetch(`${API_URL}/auth/signIn`, { method: "POST", body: JSON.stringify({ username, password }), headers: { "Content-Type": "application/json", }, }); if (response.status === 200) { alert("Sign in successful"); return; } if (response.status === 422) { alert("Sign in failed: " + (await response.text())); return; } alert("Sign in failed"); }; return ( <div className="w-full h-screen overflow-hidden flex items-center justify-center"> <SignInForm onSubmit={handleSubmit} /> </div> ); }

ከጥቅሉ ጋር አገናኝ

በዚህ ምሳሌ፣ የ SignInForm አካል ከደንበኛ ባህሪ ፓኬጅ ነው የሚመጣው፣ ይህም ወደ መጨረሻው አካል ይመራናል።

የማስነሳት ደንበኛ ባህሪ

የደንበኛው ባህሪ ጥቅል የማረጋገጫ ቅጹን ከተጋራው የማረጋገጫ አመክንዮ ጋር ያቀርባል። ይህ ኮድ ማባዛትን ያስወግዳል እና ወጥነትን ያረጋግጣል።

 import { passwordValidator, usernameValidator, } from "@robust-monorepo-yarn-nx-changesets/validator"; interface SignInFormProps { onSubmit: (username: string, password: string) => void; } const SignInForm = ({ onSubmit }: SignInFormProps) => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); const username = (event.currentTarget[0] as HTMLInputElement).value; const usernameValidationResult = usernameValidator(username); if (typeof usernameValidationResult === "string") { alert(usernameValidationResult); return; } const password = (event.currentTarget[1] as HTMLInputElement).value; const passwordValidationResult = passwordValidator(password); if (typeof passwordValidationResult === "string") { alert(passwordValidationResult); return; } onSubmit(username!, password!); }; return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="Username" /> <input type="password" placeholder="Password" /> <button type="submit">Submit</button> </form> ); }; export default SignInForm;

ከጥቅሉ ጋር አገናኝ

እዚህ፣ የማረጋገጫ አመክንዮ የተማከለ እና በቀላሉ የሚጠበቅ መሆኑን በማረጋገጥ የማረጋገጫውን አጠቃቀም ከጋራ ሊቦቻችን እንደገና እናያለን።

ለአነስተኛ የኮድ ቤዝ ምሳሌያችን ያ ነው። ይህ ኮድ በአንድ ሞኖሬፖ ውስጥ በመተግበሪያዎች፣ ባህሪያት እና Libs መካከል ያለውን መሰረታዊ መዋቅር እና ግንኙነት ለማሳየት የታሰበ ቀለል ያለ ስእል መሆኑን ያስታውሱ። የፕሮጀክትዎን ልዩ መስፈርቶች ለማሟላት እነዚህን ምሳሌዎች እንደ አስፈላጊነቱ ማስፋት ይችላሉ።

ስክሪፕቶችን በNX በማስኬድ ላይ

በሞኖሬፖ ውስጥ ያሉ ስክሪፕቶችን ማስተዳደር ፈታኝ ሊሆን ይችላል። Yarn የተለያዩ ሁኔታዎችን በመጠቀም በተለያዩ ፓኬጆች ላይ ስክሪፕቶችን እንዲያካሂዱ የሚፈቅድልዎት ቢሆንም፣ ለበለጠ የጥራጥሬ ቁጥጥር ብጁ ስክሪፕት ሊፈልግ ይችላል። NX የሚመጣው እዚህ ላይ ነው፡ ከሳጥን ውጭ የሆነ ቅልጥፍና ለታለመ የስክሪፕት አፈጻጸም ያቀርባል።

የNX መግቢያ

NX በላቁ የሲአይኤ ችሎታዎች ለ monorepos የተመቻቸ የግንባታ ስርዓት ነው። በNX፣ የሚከተሉትን ማድረግ ይችላሉ፦

• በትይዩ ተግባራትን በብቃት ያሂዱ ፡ ግንባታዎችዎን ለማፋጠን ኮንፈረንስን ይጠቀሙ።
• የጥገኝነት ግንኙነቶችን ይለዩ ፡ በጥቅሎች እና በስክሪፕቶች መካከል ያለውን ግንኙነት ይረዱ።
• የመሸጎጫ ስክሪፕት ማስፈጸሚያ ውጤቶች ፡- ውጽዓቶችን በመሸጎጥ ከተደጋጋሚ ስራን ያስወግዱ።
• ባህሪን በተሰኪዎች ያብጁ ፡ በተሰኪዎች የበለጸገ ስነ-ምህዳር አማካኝነት ተግባራዊነትን ያስፋፉ።

የታለመ የስክሪፕት አፈጻጸም

የNXን ችሎታዎች ለመጠቀም መጀመሪያ የስክሪፕቶቻችንን የሕጎች ስብስብ ለመግለጽ nx.json ፋይል መፍጠር አለብን። ከዚህ በታች የምሳሌ ውቅር አለ፡-

 { "targetDefaults": { "build": { "dependsOn": [ "^build" ], "outputs": [ "{projectRoot}/dist" ], "cache": true }, "typecheck": { "dependsOn": [ "^build", "^typecheck" ] }, "lint": { "dependsOn": [ "^build", "^lint" ] } }, "defaultBase": "main" }

በእንግሊዝኛ ይህ ውቅር ማለት፡-

• ይገንቡ

  የጥቅል build ስክሪፕት የተመካው በሱ ጥገኞች ስኬታማ ግንባታ ላይ ነው፣ እና ውጤቱም ተደብቋል።

• የታይፕ ቼክ

  typecheck ስክሪፕት በሁለቱም በግንባታ እና በታይፕ ስክሪፕቶች ጥገኛዎቹ ላይ የተመሠረተ ነው።

• ሊንት

  lint ስክሪፕት ስክሪፕት በሁለቱም በግንባታ እና በተጣበቀ ሁኔታ ላይ የተመሠረተ ነው።

  
  

አሁን፣ ወደ package.json ስክሪፕቶችን እንጨምር፡-

 "scripts": { "build:all": "yarn nx run-many -t build", "build:affected": "yarn nx affected -t build --base=${BASE:-origin/main} --head=${HEAD:-HEAD}", "typecheck:all": "yarn nx run-many -t typecheck", "typecheck:affected": "yarn nx affected -t typecheck --base=${BASE:-origin/main} --head=${HEAD:-HEAD}", "lint:all": "yarn nx run-many -t lint", "lint:affected": "yarn nx affected -t lint --base=${BASE:-origin/main} --head=${HEAD:-HEAD}", "quality:all": "yarn nx run-many --targets=typecheck,lint", "quality:affected": "yarn nx affected --targets=typecheck,lint --base=${BASE:-origin/main} --head=${HEAD:-HEAD}" }

እዚህ፣ አራት ዓይነት የማስፈጸሚያ ስክሪፕቶችን እንገልጻለን፡

• መገንባት: ጥቅል ይሠራል.

• የጽሕፈት መኪና: የጥቅል ዓይነቶችን ይፈትሻል.

• lint: አንድ ጥቅል Lints.

• ጥራት ፡ ሁለቱንም የጽሕፈት መኪና እና ሊንት ይሰራል።'

  
  

እያንዳንዱ ስክሪፕት ሁለት ልዩነቶች አሉት

• ሁሉም ፡ ስክሪፕቱን በሁሉም ፓኬጆች ላይ ይሰራል።
• ተነካ ፡ ስክሪፕቱን የሚያሄደው በቅርብ ለውጦች በተጎዱ ጥቅሎች ላይ ብቻ ነው። የ BASE እና HEAD አካባቢ ተለዋዋጮች ክልልን እንዲገልጹ ያስችሉዎታል ( origin/main እና የአሁኑ HEAD ነባሪ)፣ በጉተታ ጥያቄዎች ላይ የጅምላ አፈፃፀምን ያስችላል። ይህ ጊዜን እና ሀብቶችን በእጅጉ ይቆጥባል።

ክብ ጥገኞችን ማስተዳደር

NX ጥገኝነት ግራፍ ለማመንጨት አብሮ የተሰራ ትእዛዝ ይሰጣል፣ ይህም የጥገኝነት ዑደቶችን ለመለየት ይረዳል። የሚከተለው ስክሪፕት ክብ ጥገኝነቶችን ለመፈተሽ የNX ግራፍ ውፅዓት ይጠቀማል እና ከተገኙ አይሳካም።

በ scripts/check-circulardeps.mjs ላይ ከሚከተለው ይዘት ጋር ፋይል ይፍጠሩ

 import { execSync } from "child_process"; import path from "path"; import fs from "fs"; const hasCycle = (node, graph, visited, stack, path) => { if (!visited.has(node)) { visited.add(node); stack.add(node); path.push(node); const dependencies = graph.dependencies[node] || []; for (const dep of dependencies) { const depNode = dep.target; if ( !visited.has(depNode) && hasCycle(depNode, graph, visited, stack, path) ) { return true; } if (stack.has(depNode)) { path.push(depNode); return true; } } } stack.delete(node); path.pop(); return false; }; const getGraph = () => { const cwd = process.cwd(); const tempOutputFilePath = path.join(cwd, "nx-graph.json"); execSync(`nx graph --file=${tempOutputFilePath}`, { encoding: "utf-8", }); const output = fs.readFileSync(tempOutputFilePath, "utf-8"); fs.rmSync(tempOutputFilePath); return JSON.parse(output).graph; }; const checkCircularDeps = () => { const graph = getGraph(); const visited = new Set(); const stack = new Set(); for (const node of Object.keys(graph.dependencies)) { const path = []; if (hasCycle(node, graph, visited, stack, path)) { console.error("🔴 Circular dependency detected:", path.join(" → ")); process.exit(1); } } console.log("✅ No circular dependencies detected."); }; checkCircularDeps();

ይህ ስክሪፕት፡-

• የጥገኝነት ግራፍ ለማመንጨት የNX ትዕዛዙን ያስፈጽማል።
• ግራፉን ከጊዜያዊ JSON ፋይል ያነባል።
• ዑደቶችን በተደጋጋሚ ይፈትሻል።
• ስህተቱን ይመዘግባል እና ክብ ጥገኝነት ከተገኘ ይወጣል።

ከክር ገደቦች ጋር ጥገኞችን ማረጋገጥ

ፕሮጀክቶች እያደጉ ሲሄዱ፣ ጥገኞች ላይ ወጥነትን መጠበቅ ፈታኝ ይሆናል። በጥገኛዎች፣ በመስቀለኛ መንገድ ስሪቶች እና ሌሎች አወቃቀሮች ዙሪያ ጥብቅ ደንቦችን መተግበር አላስፈላጊ የቴክኒክ ዕዳን ለማስወገድ አስፈላጊ ነው። የ Yarn Constraints እነዚህን ማረጋገጫዎች አውቶማቲክ ለማድረግ መንገድ ይሰጣሉ።

የክር ገደቦችን መረዳት

የ Yarn Constraints በእርስዎ ሞኖሬፖ ውስጥ ላሉ ጥቅል ህጎች ስብስብ ናቸው። እነሱን መጠቀም ጠቃሚ ጠቀሜታ እርስዎ የእነዚህ ደንቦች አስተዳዳሪ መሆንዎ ነው. ለምሳሌ፣ ሁሉም ፓኬጆች አንድ አይነት የሬክት ስሪት እንዲጠቀሙ ለማስገደድ ህግ መፍጠር ይችላሉ። አንዴ ከተዋቀረ፣ የአስተናጋጅ አፕሊኬሽን ከፍ ያለ የሬክት ስሪት ያለው ባህሪ/ሊብ መጠቀም በማይችልበት ጊዜ ችግር ውስጥ አይገቡም።

አንድ ትልቅ ሞኖሬፖ ወደ አዲስ የጥገኛ ዋና ስሪት ማዛወር ውስብስብ ሊሆን ቢችልም፣ ገደቦችን መጠቀም በመጨረሻ ለጠቅላላው ፕሮጀክት ወጥነት እና መረጋጋትን ያመጣል።

ወጥነትን ማስከበር

በእኛ ምሳሌ ማከማቻ ውስጥ፣ ለሚከተሉት ወጥነትን ለማስፈጸም የyarn.config.cjs ፋይልን እንጠቀማለን።

• የመስቀለኛ መንገድ ስሪት

• የክር ስሪት

• ጥገኛ ስሪቶች

  
  

በሽግግር ወቅት ተለዋዋጭነትን ለመፍቀድ የተወሰኑ ቼኮችን ለጊዜው ለማለፍ የማይካተቱትን መግለፅ ይችላሉ። ለምሳሌ፡-

 const workspaceCheckExclusions = []; const dependencyCheckExclusions = [];

እነዚህ ቋሚዎች የተወሰኑ የስራ ቦታዎችን ወይም ጥገኞችን ከማረጋገጫው ሂደት እንዲያስወግዱ ያስችሉዎታል፣ ይህም አስፈላጊ ሆኖ ሲገኝ ለስላሳ ሽግግርን ያረጋግጣል።

ሥሪትን በለውጦች ማስተዳደር

ከማከማቻው እድገት ጋር ሊያጋጥሙዎት የሚችሉት ሌላው ችግር የስሪት አስተዳደር እና መለቀቅ ነው። የለውጥ ስብስቦች ይህን ሂደት በራስ ሰር ለማሰራት የሚያምር መፍትሄ ይሰጣሉ፣ ይህም እያንዳንዱ ለውጥ ክትትል፣ ስሪት እና መለቀቁን ያረጋግጣል።

የለውጥ ስብስቦች መግቢያ

Changesets በሞኖሬፖ ማከማቻዎች ውስጥ ሥሪትን ለማስተዳደር የተነደፈ ክፍት ምንጭ መሣሪያ ነው። የለውጡን ዓላማ የሚይዙ ትንንሽ፣ ሰው ሊነበቡ በሚችሉ ሰነዶች በመመደብ ለውጦቹን የመከታተል ሂደትን ቀላል ያደርገዋል። እነዚህ ሰነዶች ለውጦች ተብለው ይጠራሉ. ዋና ጥቅሞች የሚከተሉትን ያካትታሉ:

• ሰነዶችን አጽዳ

  እያንዳንዱ የለውጥ ስብስብ የተደረጉ ለውጦችን ይዘረዝራል፣ ይህም ሁለቱም ገንቢዎች እና ሸማቾች በአዲስ ልቀት ውስጥ ምን እንደሚጠብቁ እንዲረዱ ያግዛል።

• የጥራጥሬ ሥሪት ቁጥጥር

  እያንዳንዱ ጥቅል በተናጥል ተዘጋጅቷል፣ ይህም የተጎዱት ጥቅሎች ብቻ መዘመንን ያረጋግጣል። ይህ የባዶ ስሪት እብጠቶች እና የጥገኝነት እረፍቶች ስጋትን ይቀንሳል።

• ትብብር - ወዳጃዊ

  እያንዳንዱ ለውጥ በለውጦች በኩል እንደሚመዘገብ፣ ቡድኖች ከትክክለኛው ልቀት በፊት ዝማኔዎችን መገምገም እና ማጽደቅ ይችላሉ።

ልቀቶችን በራስ ሰር ማድረግ

የ Changesets በጣም ኃይለኛ ከሆኑት ባህሪያት ውስጥ አንዱ ሂደቱን በራስ-ሰር የማድረግ ችሎታ ነው. የለውጥ ስብስቦችን ወደ CI/ሲዲ ቧንቧ መስመርዎ ማዋሃድ እና ስለ በእጅ ስሪት ለውጦች እና ስለ NPM ህትመት መርሳት ይችላሉ።

በምሳሌ ማከማቻ ውስጥ የተለቀቀውን.yaml የስራ ፍሰትን ይመልከቱ። create-release-pull-request-or-publish ደረጃ አለው። በ Changeets/Action GitHub ድርጊት የሚደገፍ እርምጃ ሁሉንም አስማት ይፈጥራል። ጥቅሎችዎን ለማተም NPM_TOKEN ብቻ ማዋቀር ያስፈልግዎታል። ከዚያ እያንዳንዱ ግፋ ወደ main ቅርንጫፍ ይሄዳል፡-

• የለውጥ ሰነዶች ካሉ ያረጋግጡ ።

  የለውጦች ሰነዶች ካሉ፣ ድርጊቱ አስፈላጊ ከሆኑ የስሪት እብጠቶች እና የለውጥ ሎግ ዝመናዎች ጋር የመሳብ ጥያቄን ይፈጥራል። ምንም ለውጦች ካልተገኙ, ምንም ነገር አይከሰትም.

• ለመታተም ዝግጁ የሆኑ ጥቅሎች ካሉ ያረጋግጡ ።

  ጥቅሎች ለመለቀቅ ዝግጁ ከሆኑ ድርጊቱ የቀረበውን NPM_TOKEN በመጠቀም አዲሶቹን ስሪቶች ወደ NPM ያትማል። ለመታተም ዝግጁ የሆኑ ጥቅሎች ከሌሉ ድርጊቱ ለውጦችን ሳያደርግ ይወጣል።

  
  

እነዚህን ተግባራት በራስ ሰር በማዘጋጀት፣ Changesets የእርስዎ ልቀቶች ወጥ እና አስተማማኝ መሆናቸውን ያረጋግጣሉ፣ ይህም የሰው ስህተትን እምቅ አቅም በመቀነስ እና የእድገት የስራ ፍሰትዎን ያቀላጥፋል።

ከ GitHub ድርጊቶች ጋር የስራ ፍሰት ውህደት

ይህ ክፍል አሁን የገነባነውን የሕንፃውን ኃይል እንዴት መልቀቅ እንደሚቻል በጥልቀት ያብራራል። GitHub Actionsን በመጠቀም የPR የጥራት ፍተሻዎችን፣ የቤተ-መጻህፍት ሥሪት ልቀቶችን እና ባህሪያትን እና የመተግበሪያ ዝርጋታዎችን በራስ ሰር እናደርጋለን። የትኩረት አቅጣጫው የኮድ ጥራትን እና የስራ ጥራትን እየጠበቀ አውቶማቲክን ከፍ ማድረግ ላይ ነው።

የ PR ጥራት ያረጋግጡ

የመጎተት ጥያቄ ኮድ ወጥነት ያለው እና የተረጋጋ መሆኑን ለማረጋገጥ የተወሰነ ጥራት ያለው .yaml የስራ ፍሰት እንፈጥራለን። ይህ የስራ ሂደት በርካታ ተግባራትን ያከናውናል፣ ለምሳሌ በእጅ የሚደረጉ ለውጦች አለመኖራቸውን ማረጋገጥ (ስሪት የሚተዳደረው በChangesets ስለሆነ)፡-

 - id: check_version name: Check version changes run: | BASE_BRANCH=${{ github.event.pull_request.base.ref }} git fetch origin $BASE_BRANCH CHANGED_FILES=$(git diff --name-only origin/$BASE_BRANCH HEAD) VERSION_CHANGED=false for FILE in $CHANGED_FILES; do if [[ $FILE == */package.json ]]; then if [ -f "$FILE" ]; then HEAD_VERSION=$(grep '"version":' "$FILE" | awk -F '"' '{print $4}') else continue fi HEAD_VERSION=$(cat $FILE | grep '"version":' | awk -F '"' '{print $4}') if git cat-file -e origin/$BASE_BRANCH:$FILE 2>/dev/null; then BASE_VERSION=$(git show origin/$BASE_BRANCH:$FILE | grep '"version":' | awk -F '"' '{print $4}') else BASE_VERSION=$HEAD_VERSION fi if [ "$BASE_VERSION" != "$HEAD_VERSION" ]; then VERSION_CHANGED=true echo "Version change detected in $FILE" fi fi done if [ "$VERSION_CHANGED" = true ]; then echo "Manual version changes are prohibited. Use changesets instead." exit 1 fi env: GITHUB_REF: ${{ github.ref }}

ከዚህ ቼክ ጎን ለጎን check-quality ስራ ጥገኞችን ይጭናል፣ ገደቦችን ያረጋግጣል፣ የክብ ጥገኝነቶችን ይፈትሻል እና አጠቃላይ የኮድ ጥራትን ከዚህ ቀደም በNX የገለፅነውን ያረጋግጣል

 - id: install-dependencies name: Install dependencies run: yarn --immutable - id: check-constraints name: Check constraints run: yarn constraints - id: check-circulardeps name: Check circular dependencies run: yarn check-circulardeps:all - id: check-quality name: Check quality run: BASE=origin/${{ github.event.pull_request.base.ref }} yarn quality:affected

የጥራት ፍተሻው አሁን ባለው የመሳብ ጥያቄ በተጎዱ ጥቅሎች ላይ ብቻ እንዲሰራ ታስቦ የተዘጋጀ ነው። እነዚህን ስራዎች በተሳካ ሁኔታ ማጠናቀቅ የመሳብ ጥያቄው ለመዋሃድ ዝግጁ መሆኑን ያሳያል (የኮድ ግምገማዎችን ከመቀበል በተጨማሪ)።

ለፕሮጀክትዎ ተጨማሪ ፍተሻዎች ከተፈለገ የእርስዎን nx.json እና የጥራት ስክሪፕት የስራ ሂደቱ እንዳይቀየር ማዘመን ይችላሉ።

ቤተ-መጻሕፍት እና ባህሪያትን አትም

PR ከተዋሃደ በኋላ የመልቀቂያው የስራ ሂደት (በChangesets ምዕራፍ ላይ እንደተገለጸው) ተቀስቅሷል። ይህ የስራ ሂደት የተጎዱትን ፓኬጆችን ይገነባል እና ከስሪት እብጠቶች ጋር PR ይፈጥራል። አንዴ ይህ PR ከፀደቀ እና ከተዋሃደ፣ release.yaml እንደገና ይሰራል - በዚህ ጊዜ፣ PR ከመፍጠር ይልቅ፣ የስሪት ለውጦችን ፈልጎ የተሻሻሉ ጥቅሎችን ወደ NPM ይለቃል

 - id: build-packages name: Build packages run: yarn build:affected - id: create-release-pull-request-or-publish name: Create Release Pull Request or Publish to NPM uses: changesets/action@v1 with: version: yarn changeset version publish: yarn release commit: "chore: publish new release" title: "chore: publish new release" env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} release-apps: needs: release-libs-features uses: ./.github/workflows/release-apps.yaml with: publishedPackages: ${{ needs.release-libs-features.outputs.publishedPackages }}

ይህን ተከትሎ፣ ለመተግበሪያዎች ማሰማራት ሃላፊነት ያለው release-apps የሚባል ስራ ተፈፅሟል። ከቀዳሚው ደረጃ የታተሙ ፓኬጆችን ዝርዝር ይቀበላል እና ወደ ቀጣዩ ምዕራፍ ያመጣናል።

መተግበሪያዎችን ያትሙ

የመልቀቂያ ሂደቱ የመጨረሻ ክፍል ማመልከቻዎችዎን ማሰማራትን ያካትታል (መተግበሪያዎች በ NPM ላይ አይታተሙም, ምክንያቱም በ package.json ውስጥ private ስለሆኑ). የመልቀቂያ-apps.yaml የስራ ፍሰት በራስ-ሰር በ release.yaml ይነሳሳል ወይም በቀጥታ በ GitHub ላይ ካለው የተግባር ትር ላይ ሊተገበር ይችላል

 name: Release Apps on: workflow_call: inputs: publishedPackages: description: "List of published packages" required: false type: string default: "[]" workflow_dispatch: inputs: publishedPackages: description: "List of published packages (optional)" required: false type: string default: "[]"

የትኛዎቹ ጥቅሎች እንደታተሙ ለማወቅ ይህ የስራ ሂደት publishedPackages ግብአትን ይቀበላል። የማትሪክስ ስትራቴጂን በመጠቀም የታተሙ ጥገኞች መኖራቸውን እያንዳንዱን የማትሪክስ መተግበሪያ ይፈትሻል፡

 - id: check-dependency-published name: Check if any app dependency is published run: | PUBLISHED_PACKAGES="${{ inputs.publishedPackages }}" PACKAGE_NAME="${{ matrix.package }}" APP="${{ matrix.app }}" DEPENDENCIES=$(jq -r '.dependencies // {} | keys[]' "apps/$APP/package.json") for DEP in $DEPENDENCIES; do if echo "$PUBLISHED_PACKAGES" | grep -w "$DEP"; then echo "published=true" >> $GITHUB_OUTPUT exit 0 fi done echo "published=false" >> $GITHUB_OUTPUT

ይህ ቼክ የመተግበሪያ ማሰማራትን ለመጀመር አንድ ቅድመ ሁኔታ ነው። ሌላኛው ሁኔታ የመተግበሪያው ስሪት መቀየሩን ያረጋግጣል (ምንም ጥገኞች ያልተዘመኑም ባይሆኑም እንደገና ማሰማራት አስፈላጊ መሆኑን ያሳያል)።

 - id: check-version-change name: Check if app version has changed run: | APP="${{ matrix.app }}" PACKAGE_JSON_PATH="apps/$APP/package.json" CURRENT_VERSION=$(jq -r '.version' "$PACKAGE_JSON_PATH") PREVIOUS_VERSION=$(git show HEAD~1:"$PACKAGE_JSON_PATH" | jq -r '.version' || echo "") if [[ "$CURRENT_VERSION" == "$PREVIOUS_VERSION" ]]; then echo "changed=false" >> $GITHUB_OUTPUT else echo "changed=true" >> $GITHUB_OUTPUT fi

በመጨረሻም፣ አፕ ጥገኞችን ማዘመን ወይም ስሪቱ መቀየሩን ካረጋገጠ በኋላ የስራ ፍሰቱ አዲሱን ስሪት ሰርስሮ አፕሊኬሽኑን መገንባት እና ማሰማራት ይቀጥላል፡-

 - id: set-up-docker name: Set up Docker Buildx uses: docker/setup-buildx-action@v3 - id: get-app-version name: Get the app version from package.json run: echo "app-version=$(cat ./apps/${{ matrix.app }}/package.json | jq -r '.version')" >> $GITHUB_OUTPUT - id: build-image name: Build image if: steps.check-dependency-published.outputs.published == 'true' || steps.check-version-change.outputs.changed == 'true' uses: docker/build-push-action@v4 with: build-contexts: | workspace=./ context: "./apps/${{ matrix.app }}" load: true push: false tags: | ${{ matrix.app }}:v${{ steps.get-app-version.outputs.app-version }}

በዚህ ምሳሌ, Docker ምስሉን ወደ መዝገብ ቤት ሳንገፋው እንገነባለን. በምርት የስራ ፍሰትዎ ውስጥ፣ ይህንን ደረጃ በትክክለኛው የማሰማራት ሂደት ይተኩ።

ማጠቃለያ

የምርጥ ልምዶች ማጠቃለያ

በዚህ ጽሑፍ ውስጥ፣ የጠንካራ ሞኖሬፖ ማዋቀርን እና እሱን በብቃት ለማስተዳደር የሚረዱ መሳሪያዎችን መርምረናል። የእርስዎን ኮድ ቤዝ በማማለል የጥገኝነት አስተዳደርን ቀላል ማድረግ ብቻ ሳይሆን በቡድን መካከል ያለውን ትብብርም ያመቻቻሉ። ጥገኞችን ለመጋራት፣ መጫኑን በPnP ለማፋጠን እና አጠቃላይ የፕሮጀክት ወጥነትን ለማሻሻል Yarn እንዴት መጠቀም እንደሚቻል አሳይተናል። በተጨማሪም፣ ኤንኤክስን ለታለመ የስክሪፕት አፈጻጸም ማዋሃድ CI ፈጣን እና ቀልጣፋ መሆኑን ያረጋግጣል። የለውጦች ስብስቦች ሥሪትን በራስ ሰር ለመስራት፣የእጅ ስህተቶችን ለመቀነስ እና ልቀቶችን ለማሳለጥ ረድተዋል። በመጨረሻም፣ ለምርት ዝግጁ የሆነ የሲአይኤ/ሲዲ የቧንቧ መስመር ከ GitHub ድርጊቶች ጋር አስፈላጊውን ተግባራትን ብቻ ሠርተናል።

ቀጣይ እርምጃዎች

1. ሙከራ እና ማላመድ ፡ እነዚህን ምርጥ ተሞክሮዎች ለመፈተሽ አነስተኛ መጠን ያለው ሞኖሬፖ በማዘጋጀት ይጀምሩ። በተለያዩ የአቃፊ አወቃቀሮች ይሞክሩ እና በራስ መተማመንዎ እያደገ ሲሄድ ቀስ በቀስ ብዙ ጥቅሎችን ለማካተት ያስፋፉ።
2. ተጨማሪ መሳሪያዎችን ያዋህዱ ፡ እንደ PNPM ወይም Turborepo ያሉ ተጨማሪ መሳሪያዎችን በፕሮጀክትህ ልዩ መስፈርቶች እና የቡድን ምርጫዎች መሰረት ማዋሃድ ያስቡበት።
3. የሲአይ/ሲዲ ቧንቧዎችን ያሳድጉ ፡ የ GitHub Actions የስራ ፍሰቶችዎን በማስተካከል ለፕሮጀክትዎ ተስማሚ የሆኑ ተጨማሪ የጥራት ፍተሻዎችን፣ የኮድ ሽፋንን እና የደህንነት ቅኝቶችን ያካትቱ።
4. ማህበረሰብ እና ዝመናዎች ፡ በቅርብ ጊዜ የYarn፣ NX እና Changesets ልቀቶች እንደተዘመኑ ይቆዩ። በሞኖሬፖ አስተዳደር ውስጥ ግንዛቤዎችን ለመጋራት እና ስለ አዳዲስ አዝማሚያዎች ለማወቅ ከማህበረሰቡ ጋር ይሳተፉ።

መርጃዎች

• ምሳሌ ማከማቻ

  ለዚህ መመሪያ የተፈጠረውን የተሟላ ምሳሌ ማከማቻ ይድረሱ። የሞኖሬፖ ቅንብርን በተግባር የሚያሳዩ የፕሮጀክት አወቃቀሮችን፣ የኮድ ናሙናዎችን እና ስክሪፕቶችን ያስሱ።

• የታተሙ የNPM ጥቅሎች ፡-

  የዚህ ፕሮጀክት አካል ሆኖ የታተመውን ትክክለኛው የNPM ጥቅል ይመልከቱ። እነዚህ ጥቅሎች በአንቀጹ ውስጥ የተብራሩትን ፅንሰ-ሀሳቦች በገሃዱ ዓለም አጠቃቀም እና አተገባበር ያሳያሉ።