SPFx Series: Projectstructuur

De projectstructuur van een SharePoint Framework (SPFx)-project is ontworpen om een consistente en overzichtelijke manier te bieden om je code en bestanden te organiseren. Hieronder vind je een standaard projectstructuur, met enkele voorbeelden van de belangrijkste mappen en bestanden die je in een SPFx-project kunt tegenkomen:

.vscode-map

De standaardmap die door Visual Studio is aangemaakt. Deze bestanden bevatten de debug- en taakconfiguraties. Deze map bevat drie bestanden zoals hieronder:

• extensions.js: Dit bestand heeft geen betrekking op SPFx. Het geeft alleen de lijst aan van extensies die je in je VS Code hebt geïnstalleerd.
• launch.json: Dit bestand bevat de workbench-configuraties. We kunnen de locatie definiëren voor de lokale en SharePoint-gehoste workbench. Maar de SPFx-workbench is verouderd sinds versie 1.12.1.
• settings.json: settings.json heeft geen betrekking op SPFx en dit bestand definieert de gebruikersvoorkeuren zoals spaties, lettergrootte van code, enz. Je kunt dit bestand negeren omdat het niet belangrijk is.

Configuratiemap

Deze map bevat een set JSON-bestanden die ons helpen de configuraties voor onze SPFx-oplossing te definiëren. Deze configuraties omvatten toegangspunten voor webonderdelen, de startpagina van de workbench, enz. De configuratiemap bevat alle JSON-bestanden zoals hieronder:

• config.json: Dit is een van de hoofdbestanden in de SPFx-oplossing. Het bevat een lijst van alle webonderdelen die aanwezig zijn in je oplossing. Startpunt voor elk webonderdeel: zodat het webonderdeel precies weet waar het moet starten. Locatie van het manifestbestand voor elk webonderdeel: het manifestbestand bevat alle informatie over de webonderdelen, zoals webonderdeel-ID, naam, beschrijving, enz. Locatie van gelokaliseerde resources voor elk webonderdeel: gelokaliseerde resources geven je webonderdeel in verschillende talen weer.
• Je kunt ook externe JS-bestanden definiëren als je wilt dat ze worden geladen met je oplossing. Je kunt bijvoorbeeld het pad van jQuery-bestanden plaatsen zoals hieronder weergegeven onder externals:

• copy-assets.json: Als je je webonderdeel wilt hosten via CDN, kun je dit bestand gebruiken. Hier definiëren we het CDN-pad van de js-bestanden die worden gegenereerd wanneer we de bundle-opdracht uitvoeren. Je kunt dan vanuit je oplossing naar dit pad gaan en de .js-bestanden naar CDN kopiëren.

• deploy-azure-storage.json: Dit is het bestand dat je Azure Storage-accountgegevens bevat. De SPFx-webonderdelen worden voornamelijk geïmplementeerd op een van de CDN (Content Delivery Network)-opties: Azure CDN, Office 365 Public CDN.

• SharePoint-bibliotheek in je tenant

• Wanneer je je webonderdeel moet implementeren naar Azure CDN, moet je de Azure-opslagaccountgegevens configureren in dit JSON-bestand.

• package-solution.json: Dit bestand bevat details over de locatie voor het pakket dat wordt gegenereerd wanneer we de oplossing bouwen. Dit bestand bevat ook de configuraties zoals de naam van het webonderdeel, de beschrijving, de versiefuncties, de naam van het gezipt bestand, enz.

• serve.json: Dit bestand bevat de URL voor het laden van de eerste pagina wanneer je het webonderdeel uitvoert via de lokale workbench.

• write-manifests.json: Je kunt het CDN-pad opgeven als je hebt besloten de SPFx-app op een extern CDN te hosten anders dan Office 365 public CDN.

Node_modules

Bevat JavaScript-modules gedownload door Node.js.

Wanneer we de npm-installatie uitvoeren, worden alle benodigde externe modules gedownload en opgeslagen in de map node_modules. Deze map is alleen nodig voor builddoeleinden. We checken deze map niet in de repository in omdat het geen aangepaste map is. Wanneer we de repository klonen en de opdracht npm install uitvoeren, wordt deze map aangemaakt met alle benodigde modules.

Alle benodigde externe modules die we in onze oplossing gebruiken zijn gedefinieerd in het bestand package.json.

npm install

src

Dit is de eigenlijke bronmap waar de code van onze webonderdelen en extensies staat. Onder de src-map vind je de webpart-map voor webonderdelen en de extensie-map voor extensies.

• loc: Deze map bevat één interfacebestand en een of meer taallocalisatiebestanden zoals en-us.js, nl-NL.js, enz. SPFx biedt de mogelijkheid om het webonderdeel in verschillende talen te laden. Je kunt de taalreeksen in deze bestanden definiëren.
• webpart.manifest.json: Elk webonderdeel heeft zijn eigen manifestbestand. Het bevat de configuratie met betrekking tot de naam van het webonderdeel, de beschrijving, de groepsnaam, het pictogram van het webonderdeel, enz.
• webpart.module.scss: Dit is een stijlbestand voor je webonderdeel. Het wordt SCSS (Sassy CSS) genoemd, een geavanceerde versie van CSS.
• webpart.ts: Dit bestand definieert het startpunt voor het webonderdeel. Dit bestand heeft één webonderdeelklasse die BaseClientSideWebPart uitbreidt. BaseClientSideWebPart zorgt voor de basiswerking van het webonderdeel. Dit bestand bevat ook de configuraties van het eigenschappenvenster van het webonderdeel.
• Components-map: Deze map is alleen beschikbaar als je React als framework gebruikt. Deze map bevat de status- en props-interfacebestanden, het .scss-bestand en een belangrijk bestand genaamd webpart.tsx.

webpart.tsx: Dit bestand bevat voornamelijk de HTML voor je webonderdeel. Dit omvat ook de functieaanroep samen met de React-levenscyclus. Met behulp van dit bestand kun je de status van het webonderdeel bijwerken. Dit bestand is alleen beschikbaar als je React in je webonderdeel gebruikt.

Overige bestanden

• .gitignore: Dit bestand bevat alle bestanden die door git moeten worden genegeerd. Dit betekent dat wanneer je de code incheckt, de bestanden die in dit bestand worden vermeld worden genegeerd en niet worden geüpload naar de repository.
• .yo-rc.json: Wanneer we de Yeoman-generator uitvoeren op een gloednieuwe map, worden het project en de componenten aangemaakt. Dit bestand geeft de Yeoman-versie aan en de omgeving die we hebben gebruikt om de oplossing te maken. Deze versie staat ook bekend als de SPFx-versie. Als je het opnieuw uitvoert, detecteert het (door de aanwezigheid van het .yo-rc-bestand) dit en slaat alle algemene vragen over het project over en gaat direct naar de vragen voor het aanmaken van een nieuw component.
• gulpfile.js: De Gulp-taken die we gebruiken om de applicatie uit te voeren zijn in dit bestand gedefinieerd.
• package-lock.json: Het slaat een exacte afhankelijkheidsboom op met versies in plaats van versiebeheer met sterretjes te gebruiken zoals package.json zelf doet (bijv. 1.0.*). Dit betekent dat je de afhankelijkheden kunt garanderen voor andere ontwikkelaars of productiereleases, enz. Het heeft ook een mechanisme om de boomstructuur te vergrendelen, maar wordt over het algemeen opnieuw gegenereerd als package.json verandert.
• package.json: Dit bestand bevat meerdere metadata die relevant zijn voor het project. Dit bestand wordt gebruikt om informatie te verstrekken aan npm waarmee het het project kan identificeren en de afhankelijkheden van het project kan beheren.

Het kan ook andere metadata bevatten zoals een projectbeschrijving, de versie van het project in een bepaalde distributie, licentie-informatie, zelfs configuratiegegevens — alles wat essentieel kan zijn voor zowel npm als de eindgebruikers van het pakket.

• tsconfig.json: De aanwezigheid van het bestand tsconfig.json in een map geeft aan dat de map de root is van een TypeScript-project. Het bestand tsconfig.json specificeert de rootbestanden en de compileropties die nodig zijn om het project te compileren.
• eslint.json: ESLint controleert TypeScript-code op leesbaarheid, onderhoudbaarheid en functionaliteitsfouten. We kunnen de regels definiëren waarvoor de code controleert op build-waarschuwingen en -fouten.