Einrichten Ihrer SharePoint Framework-EntwicklungsumgebungSet up your SharePoint Framework development environment

Sie können Visual Studio oder Ihre eigene benutzerdefinierte Entwicklungsumgebung verwenden, um SharePoint Framework-Lösungen zu erstellen. Sie können auch eine Mac-, PC- oder Linux-Umgebung verwenden.You can use Visual Studio or your own custom development environment to build SharePoint Framework solutions. You can use a Mac, PC, or Linux environment as well.

Hinweis

Bevor Sie die Schritte in diesem Artikel durchführen, müssen Sie Ihren Microsoft 365-Mandanten einrichten.Before following the steps in this article, be sure to Set up your Microsoft 365 tenant.

Sie können die nachfolgend beschriebene Anleitung auch anhand dieses Videos in unserem YouTube-Kanal „SharePoint Patterns & Practices“ nachvollziehen:You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:

Installieren von Node.jsInstall Node.js

Installieren Sie die neueste Version von Node.js LTS 10. x.Install the latest version of Node.js LTS 10.x.

Dies ist die aktuell empfohlene und unterstützte Version von Node.js zur Verwendung mit dem SharePoint-Framework (sofern weiter unten nicht anders angegeben).This version is the currently recommended and supported version of Node.js to use with the SharePoint Framework (unless otherwise specified below). Node.js wird häufig aktualisiert und ist auf verschiedenen Plattformen wie Windows, macOS und Linux verfügbar.Node.js is frequently updated and available on multiple platforms including Windows, macOS, and Linux. Das ist der Grund, warum wir auf dieser Seite nicht alle Versionen oder direkte Downloads aufführen.That's why we are not listing all versions or direct downloads on this page.

Wichtig

Zu diesem Zeitpunkt ist Node.js v12.x die aktive LTS-Version, die auf der Node.js-Website als Standarddownload aufgeführt ist.At this time, Node.js v12.x is the Active LTS version listed on the Node.js homepage as the default download. Verwenden Sie zum Herunterladen von Node.js v10.x die Seite Node.js > Downloads > Vorherige Versionen.To download Node.js v10.x, use the Node.js > Downloads > Previous Releases page.

Weitere Informationen zum Node.js-LTS-Zeitplan (Long Term Support) finden Sie unter: Node.js > Releases.For more information about Node.js's Long Term Support (LTS) schedule, see: Node.js > Releases.

  • Windows-Benutzer können je nach ihrer Windows-Installation die *.msi-Installationsprogramme für x86 oder x64 verwenden.Windows users can use the *.msi installers for x86 or x64 depending on your Windows installation. Normalerweise gibt es nur zwei *.msi-Dateien mit node-v{version-number}-x[86|64].msi ähnlichen Namen.There are usually only two available *.msi files with names similar to node-v{version-number}-x[86|64].msi.
  • macOS-Benutzer können das *.pkg-Installationsprogramm verwenden, dessen Name in der Regel node-v{version-number}.pkg lautet.macOS users can use the *.pkg installer that's usually is named node-v{version-number}.pkg.

Sie können überprüfen, ob Node.js sowie welche Version bereits installiert ist, indem Sie über die Befehlszeile node -v ausführen.You can check if you already have Node.js already installed and the installed version by running node -v from the command line. Es muss Version v8.x.x zurückzugeben werden (falls Sie Lösungen für SharePoint Server 2016 entwickeln) oder v10.x.x (falls Sie Lösungen für SharePoint Server 2019 oder SharePoint Online entwickeln).You'll need this to return version v8.x.x (if you're developing solutions for SharePoint Server 2016) or v10.x.x (if you're developing solutions for SharePoint Server 2019 or SharePoint Online). Wenn eine andere Hauptversion zurückgegeben wird, folgen Sie den oben angegebenen Anweisungen, um eine unterstützte Version zu erhalten.If it returns a different major version, refer to the instructions above to obtain a supported version.

Wichtig

Node.js v9.x, v11.x und v12.x werden derzeit bei der SharePoint-Framework-Entwicklung nicht unterstützt.Node.js v9.x, v11.x, and v12.x are not currently supported with SharePoint Framework development.

Hinweis

Wenn Sie SharePoint-Framework-Komponenten für SharePoint Server 2016 erstellen, finden Sie im Abschnitt SPFx & SharePoint Server 2016 weitere Informationen dazu, welche Version von Node.js Sie installieren sollten.If you're building SharePoint Framework components for SharePoint Server 2016, see SPFx & SharePoint Server 2016 section for additional details on which version of Node.js you should install.

Installieren eines Code-EditorsInstall a code editor

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.:You can use any code editor or IDE that supports client-side development to build your web part, such as:

Die Schritte und Beispiele in dieser Dokumentation verwenden Visual Studio Code, aber Sie können einen beliebigen Editor verwenden.The steps and examples in this documentation use Visual Studio Code, but you can use any editor of your choice.

Installationsvoraussetzungen für die EntwicklungstoolketteInstall development toolchain prerequisites

Die SharePoint Framework-Entwicklungs- und Erstellungstoolkette stützt sich auf verschiedene beliebte Open-Source-Werkzeuge.The SharePoint Framework development and build toolchain leverages various popular open-source tools. Obwohl die meisten Abhängigkeiten in jedem Projekt enthalten sind, müssen Sie einige Abhängigkeiten global auf Ihrer Arbeitsstation installieren.While most dependencies are included in each project, you need to install a few dependencies globally on your workstation.

Tipp

Sie können alle drei der folgenden Tools in einer einzigen Zeile installieren:You can install all three of the following tools in a single line:

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

Installieren von GulpInstall Gulp

Gulp ist ein JavaScript-basiertes Taskausführungstool zur Automatisierung von sich wiederholenden Aufgaben.Gulp is a JavaScript-based task runner used to automate repetitive tasks. Die SharePoint-Framework-Erstellungstoolkette verwendet Gulp-Aufgaben zum Erstellen von Projekten und JavaScript-Bundles und die resultierenden Pakete zur Bereitstellung von Lösungen.The SharePoint Framework build toolchain uses Gulp tasks to build projects, create JavaScript bundles, and the resulting packages used to deploy solutions.

Geben Sie den folgenden Befehl zur Installation von Gulp ein:Enter the following command to install Gulp:

npm install gulp --global

Installieren von YeomanInstall 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.Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. Clientseitige SharePoint-Entwicklungstools umfassen einen Yeoman-Generator zum Erstellen neuer Webparts.SharePoint client-side development tools include a Yeoman generator for creating new web parts. Der Generator stellt allgemeine Buildtools, häufig verwendeten Boilerplate-Code und eine allgemeine Umgebungswebsite zum Hosten von Webparts für Tests bereit.The generator provides common build tools, common boilerplate code, and a common playground website to host web parts for testing.

Geben Sie den folgenden Befehl zur Installation von Yeoman ein:Enter the following command to install Yeoman:

npm install yo --global

Installieren des Yeoman SharePoint-GeneratorsInstall Yeoman SharePoint generator

Der Yeoman SharePoint-Webpart-Generator hilft Ihnen beim schnellen Erstellen eines clientseitigen SharePoint-Lösungsprojekts mit den richtigen Tools und der richtigen Projektstruktur.The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

Geben Sie den folgenden Befehl ein, um den SharePoint-Framework-Yeoman-Generator global zu installieren:To install the SharePoint Framework Yeoman generator globally, enter the following command:

npm install @microsoft/generator-sharepoint --global

Weitere Informationen zu dem Yeoman-Generator von SharePoint finden Sie unter Erstellen von Gerüsten für Projekte unter Verwendung des Yeoman-Generators von SharePoint.For more information about the Yeoman SharePoint generator, see Scaffold projects by using Yeoman SharePoint generator.

Installieren eines modernen WebbrowsersInstall a modern web browser

Sie sollten einen modernen Webbrowser wie Microsoft Edge, Google Chrome oder Firefox als Entwicklungsbrowser verwenden.You should be using a modern web browser like Microsoft Edge, Google Chrome, or Firefox as the development browser. Die Verwendung von Internet Explorer 11 wird von der lokalen Workbench nicht unterstützt.Local workbench doesn't support usage of Internet Explorer 11.

Vornehmen der Einstellungen zum Vertrauen des selbstsignierten EntwicklerzertifikatsTrusting the self-signed developer certificate

Der lokale Webserver von SharePoint-Framework, der beim Testen Ihrer benutzerdefinierten Lösungen in Ihrer Entwicklungsumgebung genutzt wird, verwendet standardmäßig HTTPS.The SharePoint Framework's local webserver, used when testing your custom solutions from your development environment, uses HTTPS by default. Dies wird mithilfe eines selbstsignierten SSL-Zertifikats für die Entwicklung implementiert.This is implemented using a development self-signed SSL certificate. Selbstsignierten SSL-Zertifikaten wird von Ihrer Entwicklerumgebung nicht vertraut.Self-signed SSL certificates are not trusted by your developer environment. Sie müssen Ihre Entwicklungsumgebung zunächst so konfigurieren, dass dem Zertifikat vertraut wird.You must first configure your development environment to trust the certificate.

In jedem SharePoint-Framework-Projekt ist eine Hilfsprogrammaufgabe in Form einer Gulp-Aufgabe enthalten.A utility task is included in every SharePoint Framework project in the form of a gulp task. 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.You can elect to do this now, or wait until you create your first project as covered in the Build your first SharePoint client-side web part (Hello World part 1) tutorial.

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.Once a project has been created with the Yeoman generator for the SharePoint Framework, execute the following command from within the root folder of the project.

gulp trust-dev-cert

Hinweis

Dies setzt voraus, dass Sie alle Abhängigkeiten mit npm install nach dem Erstellen des Projekts installiert haben.This assumes you have installed all dependencies with npm install after creating the project. Bei diesem Schritt werden im Rahmen eines Projekts alle Gulp-Aufgaben installiert.This step will install all gulp tasks as part of a project.

Optionale ToolsOptional tools

Hier sind einige Tools, die auch nützlich sein können:Following are some tools that might come in handy as well:

SPFx & SharePoint Server 2016SPFx & SharePoint Server 2016

SharePoint Server 2016 verwendet das SharePoint-Framework (SPFx) v1.1.SharePoint Server 2016 uses the SharePoint Framework (SPFx) v1.1. Zu diesem Zeitpunkt der Version 1.1 wurde Node.js von Node.js v6.x auf v8.x umgestellt.Around this the time of the v1.1 release, Node.js was transitioning from Node.js v6.x to v8.x. In diesem Update hat Node.js eine Änderung eingeführt, bei der das Standard-HTTP-Protokoll von HTTP1 zu HTTP2 gewechselt wurde.In this update, Node.js introduced a change where the default HTTP protocol switched from HTTP1 to HTTP2. SPFx v 1.1 wurde für HTTP1 und nicht für HTTP2 geschrieben. Deshalb wirkt sich diese Änderung auf den lokalen Webserver für SPFx v 1.1-Projekte aus.SPFx v1.1 was written for HTTP1, not HTTP2, so this change affected the local web server for SPFx v1.1 projects.

In Node.js v8.x können Sie HTTP1 erzwingen, indem Sie die folgende Umgebungsvariable festlegen, um Node.js anzuweisen, HTTP1 anstelle der Standardoption HTTP2 zu verwenden: NODE_NO_HTTP2=1.In Node.js v8.x, you can force HTTP1 by setting the following environment variable to instruct Node.js to use HTTP1 instead of the default HTTP2: NODE_NO_HTTP2=1. Diese Umgebungsvariable ist nur in Node.js v8.x vorhanden.This environment variable only exists in Node.js v8.x. Daher sollten Sie beim Erstellen von SPFx-Lösungen für SharePoint Server 2016 Node.js v8.x verwenden.That's why if you're building SPFx solutions for SharePoint Server 2016, you should use Node.js v8.x.

Dieses Problem wirkt sich nicht auf spätere Versionen von SPFx aus, da sie zur Unterstützung von HTTPS aktualisiert wurden.This issue doesn't impact later versions of SPFx because they've been updated to support HTTPs.

Weitere Informationen finden Sie unter Problem #1002.For more information, see issue #1002.

Nächste SchritteNext steps

Sie können jetzt Ihr erstes clientseitiges Webpart erstellen!You're now ready to build your first client-side web part!

ProblembehandlungTroubleshooting

Vertrauen des selbstsignierten Entwicklungszertifikats nicht möglichUnable to Trust the Self-signed Development Certificate

Wenn Sie SharePoint Server 2016/SPFx v1.1 verwenden, lesen Sie zuerst den Abschnitt SPFx & SharePoint Server 2016 oben, um sicherzustellen, dass Sie eine unterstützte Version von Node.js ausführen.If you're working with SharePoint Server 2016 / SPFx v1.1, first check the SPFx & SharePoint Server 2016 section to ensure you're running a supported version of Node.js.

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 some cases, executing the command gulp trust-dev-cert, doesn't have the wanted effect of trusting the self-signed development certificate on your machine. In seltenen Fällen wie diesem müssen Sie einen ausgeblendeten Ordner löschen, der in Ihrem Profilordner generiert wurde.In rare cases such as these, you may need to delete a hidden folder that's generated in your profile folder. Suchen und löschen Sie den Ordner <homedir>/.gcb-serve-data, und versuchen Sie dann erneut, dem selbstsignierten Entwicklungszertifikat zu vertrauen.Locate & delete the folder <homedir>/.gcb-serve-data and then try to trust the self-signed development certificate again.

Installieren von Paketen mit NPM nicht möglich – UnternehmensproxiesUnable to Install Packages with NPM - Corporate Proxies

Wenn Ihre Entwicklungsumgebung hinter einen Unternehmensproxy geschaltet ist, müssen Sie NPM so konfigurieren, dass der Proxy verwendet wird.If your development environment is behind a corporate proxy, you need to configure NPM to use that proxy. Informationen zum Konfigurieren Ihrer Entwicklungsumgebung hinter einem Unternehmensproxy (insbesondere der proxy & http-proxy-Einstellungen) finden Sie in den npm-config-Dokumenten.Refer to the npm-config documents on how to configure your development environment behind a corporate proxy... specifically the proxy & http-proxy settings. Weitere Informationen: Einrichten von Node.js und Npm hinter einem UnternehmenswebproxyMore information: How to setup Node.js and Npm behind a corporate web proxy