Yeoman-Generator für SharePoint-Framework

Artikel
04/08/2023

Mit dem SharePoint Online SPFx-Yeoman-Generator können Sie schnell ein clientseitiges SharePoint-Lösungsprojekt mit den richtigen Tools und der richtigen Projektstruktur erstellen. Es wird zusammen mit Yeoman verwendet, um Sie mit Fragen zum Erstellen des Projektgerüsts (die Ordnerdateien & ) aufzufordern.

Wichtig

Auf dieser Seite wird davon ausgegangen, dass Sie bereits alle erforderlichen Voraussetzungen für die Entwicklung von SharePoint-Framework-Lösungen installiert haben. Lesen Sie die aktualisierten Anweisungen auf der Seite Einrichten Ihrer SharePoint-Framework-Entwicklungsumgebung.

Der SharePoint Online SPFx-Yeoman-Generator (der "SPFx-Generator") verwendet die Antworten auf die Fragen, die dem Entwickler angezeigt werden, um ein neues SharePoint-Framework (SPFx)-Projekt zu erstellen. Abhängig von bestimmten Antworten werden andere Fragen gestellt.

Wenn Sie z. B. den WebPart-Komponententyp auswählen, werden nur Fragen zum Webpartnamen und Vorlagentyp angezeigt. Wenn Sie jedoch den Erweiterungskomponententyp auswählen, werden Sie auch zur Angabe des Erweiterungstyps wie Anwendungsanpasser, Feldanpasser oder ListView-Befehlssatz aufgefordert.

Im Folgenden wird die Erstellung einer neuen Lösung namens sfpxplay-01 im aktuellen Ordner mit einem Webpart namens HelloWorld veranschaulicht, für das die Projektvorlage Minimal verwendet wird:

yo @microsoft/sharepoint --skip-install

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  SharePoint Online SPFx  │
   `---------´   │          Yeoman          │
    ( _´U`_ )    │     Generator@1.14.0     │
    /___A___\   /╰──────────────────────────╯
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Let's create a new SharePoint solution.
? What is your solution name? spfxplay-01
? Which type of client-side component to create? WebPart
Add new Web part to solution spfxplay-01.
? What is your Web part name? HelloWorld
? Which template would you like to use? Minimal

   create package.json
    force .yo-rc.json
   create config/package-solution.json
   create config/config.json
   create config/serve.json
   create tsconfig.json
   create .vscode/launch.json
   create .vscode/settings.json
   create config/deploy-azure-storage.json
   create config/write-manifests.json
   create src/index.ts
   create README.md
   create .gitignore
   create .npmignore
   create gulpfile.js
   create tslint.json
   create src/webparts/helloWorld/loc/en-us.js
   create src/webparts/helloWorld/loc/mystrings.d.ts
   create src/webparts/helloWorld/HelloWorldWebPart.module.scss
   create src/webparts/helloWorld/HelloWorldWebPart.ts
   create src/webparts/helloWorld/HelloWorldWebPart.manifest.json
   create teams/55564fc2-179d-4bc1-bd63-9ede8183dadc_outline.png
   create teams/55564fc2-179d-4bc1-bd63-9ede8183dadc_color.png

Changes to package.json were detected.
Skipping package manager install.

      _=+#####!
   ###########|       .------------------------------------.
   ###/    (##|(@)    |          Congratulations!          |
   ###  ######|   \   |  Solution spfxplay-01 is created.  |
   ###/   /###|   (@) |   Run gulp serve to play with it!  |
   #######  ##|   /   '------------------------------------'
   ###     /##|(@)
   ###########|
      **=+####!

Tipp

Alle verschiedenen Komponententypen und -optionen werden in der Dokumentation auf dieser Website behandelt. Auf dieser Seite wird nicht jede Option behandelt. Weitere Informationen zu den Details zu den einzelnen Komponententypen finden Sie in den jeweiligen Artikeln in der Dokumentation.

Installieren des SharePoint Online SPFx Yeoman-Generators

Der SPFx-Generator ist als npm-Paket verfügbar. Installieren Sie die neueste Version des SPFx Generators, indem Sie den folgenden Befehl in einer Konsole ausführen:

npm install @microsoft/generator-sharepoint -g

Sie können auch eine bestimmte Version des Generators installieren, indem Sie die Versionsnummer im Paketnamen angeben, die durch einen @1getrennt ist. Führen Sie beispielsweise den folgenden Befehl aus, um den SPFx Generator v1.10 zu installieren:

npm install @microsoft/generator-sharepoint@1.10 -g

Projektvorlagenoptionen

Vor SPFx, Version 1.14 hat der Generator Entwicklern zwei Projektvorlagen bereitgestellt:

Kein JavaScript-Framework:
React

Hinweis

Eine dritte Option, Knockout, war in allen SPFx Versionen bis SPFx, Version 1.10 verfügbar. Knockout wurde als Option mit SPFx, Version 1.11 eingestellt.

Diese Vorlagen enthielten den mindesterforderlichen Code, der für ein Projekt benötigt wurde, um mit dem Erstellen von Lösungen zu beginnen. Die Vorlage Kein JavaScript-Framework verwendete HTML und CSS zum Formatieren einer Basiskomponente, während die React-Vorlage hierfür HTML, React und CSS verwendete.

In SPFx v1.14 aktualisierte Projektvorlagen mit Designunterstützung

Im SPFx v1.14-Release hat der SPFx-Generator neue & aktualisierte Projektvorlagen eingeführt. Das Ziel dieser Vorlagen besteht darin, den Code einzuschließen, der erforderlich ist, um das Design in der aktuellen Umgebung zu unterstützen, in der die Komponente ausgeführt wird (SharePoint oder Microsoft Teams).

Der in diesen Vorlagen enthaltene Code vereinfacht die anfängliche Arbeit, die Entwickler ausführen müssen, damit ihre Komponenten Designs unterstützen. Wenn Sie beispielsweise diese Vorlagen verwenden, ist der gesamte Code, der zum Bestimmen der Farben und Schriftarten erforderlich ist, die auf der aktuellen SharePoint-Site verwendet werden, innerhalb des Webparts verfügbar, und das Webpart wird benachrichtigt, wenn das Design geändert wird, um die neuen Designeinstellungen übernehmen.

SPFx-Komponenten, die im Kontext von Microsoft Teams verwendet werden, erhalten die Designdetails zum aktuellen Microsoft Teams-Client, z. B. Standard (hell), Dunkel und hoher Kontrast.

Darüber hinaus enthalten diese Vorlagen den Code, um festzustellen, ob die Komponente derzeit in einem SharePoint-Kontext oder in einem Microsoft Teams-Kontext ausgeführt wird.

Beispielsweise sind die folgenden Methoden in beiden Vorlagen enthalten. Die _getEnvironmentMessage()-Methode gibt eine Zeichenfolge zurück, die angibt, ob die Komponente derzeit in SharePoint oder Microsoft Teams ausgeführt wird und ob sie in der Produktion oder in der Entwicklung bereitgestellt wird (bereitgestellt von localhost). Die onThemeChanged()-Methode bestimmt, ob sich das aktuelle Design im dunklen Modus befindet, und wendet einige Änderungen auf Eigenschaften basierend auf den aktuellen Designfarben an:

private _getEnvironmentMessage(): string {
  if (!!this.context.sdks.microsoftTeams) { // running in Teams
    return this.context.isServedFromLocalhost
        ? strings.AppLocalEnvironmentTeams
        : strings.AppTeamsTabEnvironment;
  }

  return this.context.isServedFromLocalhost
        ? strings.AppLocalEnvironmentSharePoint
        : strings.AppSharePointEnvironment;
}

protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
  if (!currentTheme) {
    return;
  }

  this._isDarkTheme = !!currentTheme.isInverted;
  const {
    semanticColors
  } = currentTheme;
  this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);
  this.domElement.style.setProperty('--link', semanticColors.link);
  this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);

}

Projektvorlage "Minimal"

Die neue Projektvorlagenoption Minimal wurde dem SPFx-Generator in SPFx, Version 1.14 hinzugefügt. Diese Projektvorlagenoption enthält keinen Design- oder Hostumgebungscode in neuen Projekten.

Ein neues Webpartprojekt beginnt beispielsweise mit dem folgenden Code, der den mindesterforderlichen Code darstellt, der zum Ausführen des Webparts erforderlich ist:

export default class HelloWorldMinimalWebPart
          extends BaseClientSideWebPart<IHelloWorldMinimalWebPartProps> {

  protected onInit(): Promise<void> {
    return super.onInit();
  }

  public render(): void {
    this.domElement.innerHTML = `<div class="${ styles.helloWorldMinimal }"></div>`;
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

Veraltete Generator-Aufforderungen

Bei jeder Version des SharePoint-Framework werden im Yeoman-Generator evtl. Aufforderungen entfernt oder neue hinzugefügt. Einige Aufforderungen wurden entfernt, um die Projekterstellung zu vereinfachen.

Im folgenden Abschnitt finden Sie die zurückgezogenen Aufforderungen mit entsprechenden Anleitungen.

Unterschiedliche SharePoint-Umgebungen als Ziel

Ab SPFx, Version 1.13 wurde die folgende Eingabeaufforderung eingestellt:

Welche Basisplanpakete möchten Sie für Ihre Komponente(n) als Ziel festlegen?

Diese Aufforderung bot dem Entwickler die Möglichkeit, ein auf bestimmte SharePoint-Bereitstellungen ausgerichtetes Projekt zu erstellen, einschließlich:

Nur SharePoint Online (aktuellste)
Ab SharePoint 2016, einschließlich 2019 und SharePoint Online
Ab SharePoint 2019, einschließlich SharePoint Online

Ab SPFx, Version 1.13 kann der Generator nur Projekte für SharePoint Online erstellen.

Überspringen der Featurebereitstellung: `skipFeatureDeployment`

In SPFx, Version 1.14 wurde die folgende Eingabeaufforderung eingestellt:

Möchten Sie den Mandantenadministratoren erlauben, festzulegen, ob die Lösungen unmittelbar für alle Websites bereitgestellt werden, ohne die Bereitstellung von Features oder das Hinzufügen von Apps zu Websites?

Hierbei wurde gefragt, ob die Lösung automatisch für alle Sites im Mandanten installiert oder ob sie auf jeder Site manuell installiert werden sollte? Die Standardoption war [N]o.

Hinweis

Erfahren Sie mehr über diese Aufforderung: Mandantenweite Lösungsbereitstellung für SharePoint-Framework-Lösungen.

Das Ergebnis dieser Frage wurde zum Festlegen der skipFeatureDeployment-Eigenschaft in der Datei ./config/package-solution.json des Projekts verwendet.

Ab SPFx, Version 1.14 ist die skipFeatureDeployment-Eigenschaft standardmäßig auf true festgelegt. Sie können den Wert dieser Eigenschaft nach dem Erstellen des Projekts bei Bedarf ändern.

Domänenisolierte Webparts: `isDomainIsolated`

In SPFx, Version 1.14 wurde die folgende Eingabeaufforderung eingestellt:

Benötigen die Komponenten in der Lösung Berechtigungen für den Zugriff auf eindeutige, nicht für andere Komponenten des Mandanten freigegebene Web-APIs?

Hierbei wurde gefragt, ob die Webparts in der Lösung innerhalb eines IFRAME in einer eindeutigen Domäne oder in einem DIV als aktuelle Seite gerendert werden sollten. Die Standardoption war [N]o.

Hinweis

Weitere Informationen zu dieser Eingabeaufforderung: Isolierte Webparts.

Das Ergebnis dieser Frage wurde zum Festlegen der isDomainIsolated-Eigenschaft in der Datei ./config/package-solution.json des Projekts verwendet.

Ab SPFx, Version 1.14 ist die isDomainIsolated-Eigenschaft standardmäßig auf false festgelegt. Sie können den Wert dieser Eigenschaft nach dem Erstellen des Projekts bei Bedarf ändern.

Welches Framework möchten Sie verwenden?

In SPFx, Version 1.14 wurde die folgende Eingabeaufforderung geändert:

Welches Framework möchten Sie verwenden?

Diese Eingabeaufforderung wurde für bestimmte Projekttypen angezeigt, z. B. Webparttypen & von SPFx-Erweiterungen. Dabei konnten Entwickler aus verschiedenen Projektvorlagen auswählen: kein JavaScript-Framework oder React.

Das vom Yeoman-Generator erstellte Standardprojektgerüst wurde anhand der ausgewählten Option bestimmt.

Ab SPFx, Version 1.14 wurde diese Aufforderung folgendermaßen geändert und dem Benutzer werden drei Optionen angezeigt: Minimal, Kein Framework oder React:

Welche Vorlage möchten Sie verwenden?

Beschreibungen von Komponenten

In SPFx, Version 1.14 wurden die folgenden Eingabeaufforderungen eingestellt:

Wie lautet die Beschreibung Ihres Webparts?

Wie lautet die Beschreibung des Application Customizer?:

Wie lautet die Beschreibung des Feldanpassers?

Wie lautet die Beschreibung des ListView-Befehlssatzes?

Wie lautet die Beschreibung Ihrer Bibliothek?

Wie lautet die Beschreibung Ihrer Erweiterung für adaptive Karten?

Die Werte dieser Eingabeaufforderungen wurden für die preConfiguredEntries[0].description.default&preConfiguredEntries[0].properties.description Eigenschaften in der *.manifest.json-Datei der Komponente festgelegt.

Ab SPFx, Version 1.14 sind diese Eigenschaften auf leere Zeichenfolgen festgelegt. Sie können den Wert dieser Eigenschaften nach dem Erstellen des Projekts bei Bedarf ändern.

Befehlszeilenoptionen für SPFx-Generator

Sie können die Befehlszeilenoptionen des SPFx Generators verwenden, um Projekte in einem Befehl zu erstellen, anstatt die Eingabeaufforderungen zu durchlaufen. Führen Sie den folgenden Befehl aus, um die Liste der für den SharePoint-Generator verfügbaren Befehlszeilenoptionen anzuzeigen:

yo @microsoft/sharepoint --help

Freigeben über

Yeoman-Generator für SharePoint-Framework

Installieren des SharePoint Online SPFx Yeoman-Generators

Projektvorlagenoptionen

In SPFx v1.14 aktualisierte Projektvorlagen mit Designunterstützung

Projektvorlage "Minimal"

Veraltete Generator-Aufforderungen

Unterschiedliche SharePoint-Umgebungen als Ziel

Überspringen der Featurebereitstellung: `skipFeatureDeployment`

Domänenisolierte Webparts: `isDomainIsolated`

Welches Framework möchten Sie verwenden?

Beschreibungen von Komponenten

Befehlszeilenoptionen für SPFx-Generator

Zusätzliche Ressourcen

Freigeben über

Yeoman-Generator für SharePoint-Framework

Installieren des SharePoint Online SPFx Yeoman-Generators

Projektvorlagenoptionen

In SPFx v1.14 aktualisierte Projektvorlagen mit Designunterstützung

Projektvorlage "Minimal"

Veraltete Generator-Aufforderungen

Unterschiedliche SharePoint-Umgebungen als Ziel

Überspringen der Featurebereitstellung: skipFeatureDeployment

Domänenisolierte Webparts: isDomainIsolated

Welches Framework möchten Sie verwenden?

Beschreibungen von Komponenten

Befehlszeilenoptionen für SPFx-Generator

Zusätzliche Ressourcen

Überspringen der Featurebereitstellung: `skipFeatureDeployment`

Domänenisolierte Webparts: `isDomainIsolated`