Einrichten Ihrer SharePoint Framework-Entwicklungsumgebung

  • Artikel

Sie können einen beliebigen Text-Editor verwenden, um SharePoint-Framework (SPFx)-Lösungen zu erstellen. Sie können auch eine macOS-, Windows- oder Linux-Umgebung verwenden.

Hinweis

Bevor Sie die Schritte in diesem Artikel durchführen, müssen Sie Ihren Microsoft 365-Mandanten einrichten.

Sie können die Schritte auch anhand dieses Videos in unserem YouTube-Kanal „Microsoft 365 Platform Community (PnP)“ nachvollziehen:

Wichtig

Bei den folgenden Schritten wird davon ausgegangen, dass Sie Lösungen für SharePoint Online mit der neuesten Version von SharePoint-Framework erstellen. Wenn Sie Lösungen für SharePoint Server 2019 oder SharePoint Server 2016 erstellen, lesen Sie die zusätzliche Dokumentation, auf die im Abschnitt Siehe auch weiter unten verwiesen wird.

Installieren von Node.js

Installieren Sie die neueste LTS-Version von Node.js v16.

Dies ist die aktuell empfohlene Version von Node.js zur Verwendung mit dem SharePoint-Framework (sofern weiter unten nicht anders angegeben).

Wichtig

Node.js wird häufig aktualisiert und ist auf verschiedenen Plattformen wie macOS, Windows und Linux verfügbar. Da sich die genauen Downloadlinks häufig ändern, werden sie nicht von dieser Seite aus verlinkt. Verwenden Sie stattdessen die nachstehenden Angaben, um zu ermitteln, welches Installationsprogramm Sie für Ihre Plattform herunterladen müssen.

Beachten Sie, dass Node.js jederzeit zwei verschiedene Versionen verwaltet: LTS & Aktuelle Version. SharePoint-Framework wird nur in LTS-Versionen unterstützt. Weitere Informationen zu den LTS-Releases (Long Term Support) von Node.js finden Sie unter Node.js > Releases.

Tipp

Die Node.js Website empfiehlt immer das neueste Installationsprogramm für beide LTS & Current Releases. Um bestimmte Versionen von Node.js-Versionen herunterzuladen, verwenden Sie die Seite Node.js > Vorherige Versionen herunterladen>.

  • Windows-Benutzer können abhängig von Ihrer Windows-Installation die *.msi-Installationsprogramme für x86 oder x64 verwenden. Normalerweise sind nur zwei *.msi-Dateien verfügbar, deren Namen node-v{version-number}-x[86|64].msiähneln.
  • macOS-Benutzer können das *.pkg-Installationsprogramm verwenden, das normalerweise node-v{version-number}.pkg heißt.

Sie können überprüfen, ob und welche Version von Node.js bereits installiert ist, indem Sie den folgenden Befehl ausführen:

node --version

Die SharePoint-Framework v1.16.0 wird von den folgenden Node.js Versionen unterstützt:

  • Node.js v16 LTS (v16.13.x – v16.18.x, auch bekannt als Gallium)

Vorsicht

Wenn Sie SharePoint-Framework-Komponenten für lokale SharePoint-Bereitstellungen erstellen, finden Sie weitere Informationen auf den zusätzlichen Seiten im Abschnitt Siehe auch.

Installieren eines Code-Editors

Sie können einen beliebigen Code-Editor oder eine beliebige IDE verwenden, der bzw. die die clientseitige Entwicklung unterstützt, um Ihren Webpart zu erstellen, z. B.:

Die Schritte und Beispiele in dieser Dokumentation verwenden Visual Studio Code, aber Sie können einen beliebigen Editor verwenden.

Installationsvoraussetzungen für die Entwicklungstoolkette

Die SharePoint Framework-Entwicklungs- und Erstellungstoolkette stützt sich auf verschiedene beliebte Open-Source-Werkzeuge. Obwohl die meisten Abhängigkeiten in jedem Projekt enthalten sind, müssen Sie einige Abhängigkeiten global auf Ihrer Arbeitsstation installieren.

Tipp

Sie können alle drei der folgenden Tools in einer einzigen Zeile installieren:

npm install gulp-cli yo @microsoft/generator-sharepoint --global

Installieren von Gulp

Gulp ist ein JavaScript-basiertes Taskausführungstool zur Automatisierung von sich wiederholenden Aufgaben. Die SharePoint-Framework-Erstellungstoolkette verwendet Gulp-Aufgaben zum Erstellen von Projekten und JavaScript-Bundles und die resultierenden Pakete zur Bereitstellung von Lösungen.

Geben Sie den folgenden Befehl zur Installation von der Gulp-CLI ein:

npm install gulp-cli --global

Installieren von Yeoman

Yeoman hilft Ihnen bei den ersten Schritten mit neuen Projekten und stellt bewährte Methoden und Tools bereit, mit denen Sie produktiv arbeiten können. Clientseitige SharePoint-Entwicklungstools umfassen einen Yeoman-Generator zum Erstellen neuer Webparts. Der Generator stellt allgemeine Buildtools, häufig verwendeten Boilerplate-Code und eine allgemeine Umgebungswebsite zum Hosten von Webparts für Tests bereit.

Wichtig

Yeoman v4.x ist für spFx v1.13 forward erforderlich.

Geben Sie den folgenden Befehl zur Installation von Yeoman ein:

npm install yo --global

Installieren des Yeoman SharePoint-Generators

Der Yeoman SharePoint-Webpart-Generator hilft Ihnen beim schnellen Erstellen eines clientseitigen SharePoint-Lösungsprojekts mit den richtigen Tools und der richtigen Projektstruktur.

Geben Sie den folgenden Befehl ein, um den SharePoint-Framework-Yeoman-Generator global zu installieren:

npm install @microsoft/generator-sharepoint --global

Weitere Informationen zum Yeoman SharePoint-Generator finden Sie unter Yeoman-Generator für das SharePoint-Framework.

Installieren eines modernen Webbrowsers

Sie sollten einen modernen Webbrowser wie Microsoft Edge, Google Chrome oder Firefox als Entwicklungsbrowser verwenden.

Vornehmen der Einstellungen zum Vertrauen des selbstsignierten Entwicklerzertifikats

Der lokale Webserver von SharePoint-Framework, der beim Testen Ihrer benutzerdefinierten Lösungen in Ihrer Entwicklungsumgebung genutzt wird, verwendet standardmäßig HTTPS. Dies wird mithilfe eines selbstsignierten SSL-Zertifikats für die Entwicklung implementiert. Selbstsignierten SSL-Zertifikaten wird von Ihrer Entwicklerumgebung nicht vertraut. Sie müssen Ihre Entwicklungsumgebung zunächst so konfigurieren, dass dem Zertifikat vertraut wird.

In jedem SharePoint-Framework-Projekt ist eine Hilfsprogrammaufgabe in Form einer Gulp-Aufgabe enthalten. Sie können dies jetzt tun oder warten, bis Sie Ihr erstes Projekt erstellen, wie im Tutorial Erstellen Ihres ersten clientseitigen SharePoint-Webparts (Hello World Teil 1) beschrieben.

Nachdem Sie ein Projekt mit dem Yeoman-Generator für SharePoint-Framework erstellt haben, führen Sie den folgenden Befehl im Stammordner des Projekts aus.

gulp trust-dev-cert

Hinweis

Dies setzt voraus, dass Sie alle Abhängigkeiten mit npm install nach dem Erstellen des Projekts installiert haben. Bei diesem Schritt werden im Rahmen eines Projekts alle Gulp-Aufgaben installiert.

Optionale Tools

Hier sind einige Tools, die auch nützlich sein können:

Nächste Schritte

Sie können jetzt Ihr erstes clientseitiges Webpart erstellen!

SPFx & SharePoint Server (lokal)

SpFx ist in SharePoint Online (SPO), SharePoint Server 2019, & SharePoint Server 2016 verfügbar. Bei den Konfigurationsanweisungen auf dieser Seite wird davon ausgegangen, dass Sie Lösungen mit der neuesten Version von SPFx für SharePoint Online erstellen.

SharePoint Online enthält alle Versionen von SPFx, einschließlich aller vorherigen Versionen und der neuesten Version. Jede SPFx-Lösung enthält Informationen, um SPO mitzuteilen, von welcher SPFx-Runtime sie abhängt.

Wenn Sie Lösungen für eine lokale SharePoint Server-Bereitstellung erstellen, lesen Sie den Abschnitt Siehe auch, der Details zu bestimmten SharePoint-Versionen enthält. Jede lokale SharePoint-Bereitstellung unterstützt nur eine bestimmte Version von SPFx. Dies kann zu komplizierten Konfigurationen der Entwicklungsumgebung führen, wenn Sie verschiedene Lösungen für unterschiedliche SharePoint-Bereitstellungen erstellen.

  • SharePoint Server 2016 verwendet das SharePoint-Framework (SPFx) v1.1.
  • SharePoint Server 2019 verwendet das SharePoint-Framework (SPFx) v1.4.1.

Je nach Szenario müssen Sie möglicherweise unterschiedliche Entwicklungsumgebungen verwalten. Entwickler haben die folgenden Ansätze verwendet, um diese Herausforderungen zu bewältigen:

  • Virtuelle Computer
  • Docker
  • Node Version Manager (NVM)

Tipp

Weitere Informationen zu NVM finden Sie unter Better Node.js Install Management with Node Version Manager (Bessere Node.js Install Management with Node Version Manager).For more information on NVM, see Better Node.js Install Management with Node Version Manager.

Problembehandlung

Überprüfen der Version der global installierten Pakete

Um eine Liste aller global installierten Pakete zu erhalten, führen Sie den folgenden Befehl aus:

npm list --global --depth=0️

Vertrauen des selbstsignierten Entwicklungszertifikats nicht möglich

Wenn Beim Ausführen von gulp trust-dev-cert& Probleme beim Vertrauen auf Ihr selbstsigniertes Zertifikat auftreten, haben Sie überprüft, ob die richtigen Versionen aller Abhängigkeiten installiert sind. Eine Lösung, die in der Regel behoben wird, besteht darin, alle global installierten Pakete zu deinstallieren, Node.js zu deinstallieren, den Neustart & erneut zu starten.

In einigen Fällen hat das Ausführen des Befehls gulp trust-dev-cert nicht den gewünschten Effekt, das selbstsignierte Entwicklungszertifikat auf Ihrem Computer als vertrauenswürdig anzuerkennen. In seltenen Fällen wie diesem müssen Sie einen ausgeblendeten Ordner löschen, der in Ihrem Profilordner generiert wurde.

Suchen Sie & den Ordner {{homedir}}/.gcb-serve-data für spFx-Version vor v1.12.1 löschen. Löschen Sie für spätere Versionen den Ordner {{homedir}}/.rushstack, und versuchen Sie dann erneut, dem selbstsignierten Entwicklungszertifikat zu vertrauen. Andernfalls hat das Ausführen von gulp untrust-dev-cert dieselbe Auswirkung, um die Zertifikatdateien aus dem Profilordner zu entfernen.

Für den Fall, dass das Zertifikat der vertrauenswürdigen Stammzertifizierungsstelle nicht hinzugefügt wird, obwohl gulp trust-dev-cert ausgeführt wurde, weil einige Richtlinien die Aktion blockieren, kann die Datei rushstack-serve.pem über ein lokales Administratorkonto manuell aus dem Ordner {{homedir}}/.rushstack in den Zertifikat-Manager unter "Vertrauenswürdige Stammzertifizierungsstelle" importiert werden.

Installieren von Paketen mit NPM nicht möglich – Unternehmensproxies

Wenn Ihre Entwicklungsumgebung hinter einen Unternehmensproxy geschaltet ist, müssen Sie NPM so konfigurieren, dass der Proxy verwendet wird. Informationen zum Konfigurieren Ihrer Entwicklungsumgebung hinter einem Unternehmensproxy (insbesondere der proxy&http-proxy-Einstellungen) finden Sie in den npm-config-Dokumenten. Weitere Informationen: Konfigurieren des NPMs für einen Unternehmenswebproxy

Siehe auch