Kan globala sökvägsalias för relativa sökvägar i project.json hanteras av Nx eller Angular Schematics?

Effektivisera vägkonfigurationen i Nx Monorepos

Det kan vara svårt att hantera rutter i en storskalig Nx monorepo, särskilt när man arbetar med relativa vägar i project.json fil. Team expanderar och katalogstrukturer förändras, vilket ofta resulterar i stora underhållskostnader. Relativa vägar i nycklar som $schema, som leder till scheman och konfigurationer i projektet, är ett exempel på detta.

Utvecklare måste för närvarande mödosamt och med risk för misstag uppdatera dessa relativa sökvägar varje gång mappstrukturen ändras. Detta gäller särskilt för projekt som bygger eller konfigurerar nya Angular-applikationer med hjälp av automatiserade verktyg eller VSCode-plugins. Processen kan störas och eventuella felkonfigurationer kan bli resultatet av det ständiga kravet på uppgraderingar.

Lägga till ett globalt sökvägsalias, till exempel @arbetsyta, skulle kunna lösa detta problem genom att ersätta alla relativa rutter och effektivisera katalogadministrationen. Utvecklare kan minimera risken för konfigurationsfel och göra sig av med kravet på manuella uppdateringar genom att använda alias.

Den här artikeln kommer att undersöka om Nx eller Vinkelschema stöder för närvarande sådana globala sökvägsalias och utforska potentiella alternativ eller lösningar för mer effektiv väghantering i monorepos.

Automatisera Path Alias ​​Management i Nx Monorepo

Det första skriptexemplet som erbjuds koncentrerar sig på att automatisera processen att ersätta globala sökvägsalias, till exempel @arbetsyta, med relativa vägar in project.json filer. Använder Node.js, detta är en backend-lösning där skriptet söker i katalogstrukturen efter projektkonfigurationsfiler. Utvecklare kan ändra sökvägar utan att behöva manuellt ingripa genom att använda de väsentliga kommandona i det här skriptet, t.ex readFileSync och writeFileSync, som är speciellt gjorda för att ändra dessa konfigurationsfiler. Genom att använda denna metod blir konfigurationen mindre mottaglig för fel i utvecklingsmiljön och kräver färre manuella ändringar på grund av ändringar i kataloglayouten.

För att göra detta går skriptet först igenom mapparna med hjälp av readdirSync att hitta varje förekomst av project.json i Nx-arbetsytan. De lstatSync kommando avgör om en project.json fil är en fil eller en katalog när den har hittats, vilket gör att skriptet endast kan redigera relevanta filer. Det ersätter det globala aliaset för alla relativa rutter som pekar på "node_modules" efter att ha hittat nyckeln "$schema" i JSON-formatet. I slutändan kan utvecklare lita på en smidig och automatiserad procedur som writeFileSync garanterar att de modifierade sökvägarna skrivs tillbaka till filen och att ändringarna genomförs.

Det andra skriptexemplet tar upp samma problem med att använda Vinkelschema, men det gör det i byggnadsställningsstadiet för att bygga eller ändra en applikation. I Angular används scheman ofta för att generera kod, och besök kommando är viktigt i denna process. Uppgiften som tilldelas den här funktionen är att söka igenom det virtuella filträdet, hitta projektkonfigurationsfiler och sedan ändra "$schema"-sökvägen i dessa filer för att använda det globala aliaset. För att garantera att filer läses, redigeras och skrivs tillbaka till arbetsytan med rätt sökvägskonfiguration, JSON.parse och skriva över används.

Målet med båda dessa strategier är att göra stora Nx monorepos' sökvägsalias lättare att underhålla. Medan Angular Schematics-lösningen är perfekt för utvecklare som vill se till att nyproducerade projekt eller revisioner automatiskt använder det globala aliaset, kan Node.js-tekniken användas oberoende för att skanna och uppdatera befintliga projekt. Eftersom dessa skript är modulära och återanvändbara kan de utökas till att omfatta fler project.json nycklar som behöver ändras i sökvägen. Detta ökar arbetsytans flexibilitet och enklare underhåll när den expanderar med tiden.

// Import required modules
const fs = require('fs');
const path = require('path');
// Define the path alias
const workspaceAlias = '@workspace';
// Function to replace relative paths in project.json
function updateProjectJson(filePath) {
  const projectJson = JSON.parse(fs.readFileSync(filePath, 'utf8'));
  const schemaPath = projectJson['$schema'];
  // Replace relative paths with global alias
  if (schemaPath.includes('../../../node_modules')) {
    projectJson['$schema'] = schemaPath.replace('../../../node_modules', `${workspaceAlias}/node_modules`);
    fs.writeFileSync(filePath, JSON.stringify(projectJson, null, 2));
    console.log(`Updated schema path in ${filePath}`);
  }
}
// Function to traverse directories and find all project.json files
function traverseDir(dir) {
  const files = fs.readdirSync(dir);
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    if (fs.lstatSync(fullPath).isDirectory()) {
      traverseDir(fullPath);
    } else if (file === 'project.json') {
      updateProjectJson(fullPath);
    }
  });
}
// Start the directory traversal from the root of the workspace
const rootDir = path.resolve(__dirname, '../../');
traverseDir(rootDir);

import { Rule, Tree } from '@angular-devkit/schematics';
import { join } from 'path';
export function updateSchemaPaths(): Rule {
  return (tree: Tree) => {
    tree.getDir('/').visit((filePath) => {
      if (filePath.endsWith('project.json')) {
        const content = tree.read(filePath)?.toString();
        if (content) {
          const json = JSON.parse(content);
          if (json['$schema']) {
            json['$schema'] = json['$schema'].replace(
              '../../../node_modules',
              '@workspace/node_modules'
            );
            tree.overwrite(filePath, JSON.stringify(json, null, 2));
          }
        }
      }
    });
    return tree;
  };
}

Förbättra Path Management i stora Nx Monorepos

Att underhålla relativa vägar över olika projektkonfigurationsfiler är ett av de största problemen med att administrera en storskalig Nx monorepo. När katalogstrukturen ändras kommer dessa sökvägar – som de som pekar på scheman i project.json fil – kan bli utmanande att hantera. Utvecklingsprocesser blir mindre effektiva när team upplever problem när kataloger förändras och saknar ett enhetligt förhållningssätt för att hantera vägar. Lägger till globala vägalias, som @arbetsyta, kan avsevärt minska ansträngningen för att hålla dessa rutter underhållna.

Förutom att minska behovet av täta manuella uppdateringar, stärker användningen av ett globalt ruttalias projektkonfigurationens robusthet. Team kan koncentrera sig på sitt utvecklingsarbete utan att behöva oroa sig för banmodifieringar genom att abstrahera bort de relativa vägspecifikationerna. Detta är mycket användbart när du genererar och konfigurerar Angular-appar med automationsverktyg som t.ex VSCode-tillägg. När ett enhetligt sökvägsaliassystem finns på plats kan dessa tillägg fungera smidigare och undvika felkonfigurationer som orsakas av felaktiga sökvägsupplösningar.

Globala sökvägsalias över alla nycklar in project.json stöds inte av Nx- och Angular-verktygen som för närvarande är tillgängliga, men detta skulle vara ett användbart tillägg till ekosystemet. Att lägga till stöd för globala sökvägsalias skulle effektivisera konfigurationshanteringen och öka projektstrukturens anpassningsförmåga. Att skicka in en funktionsbegäran till Nx- eller Angular-teamen kan möjliggöra inkluderingen av den här funktionen i kommande utgåvor, vilket skulle vara fördelaktigt för många företag som hanterar invecklade monorepos.