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

You can use Visual Studio or your own custom development environment to build SharePoint Framework solutions. You can use a Mac, PC, or Linux.You can use Visual Studio or your own custom development environment to build SharePoint Framework solutions. You can use a Mac, PC, or Linux.

Hinweis

Bevor Sie die Schritte in diesem Artikel durchführen, müssen Sie Ihren Office 365-Mandanten einrichten.Before following the steps in this article, be sure to Set up your Office 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 EntwicklertoolsInstall developer tools

Installieren von NodeJSInstall NodeJS

Installieren von LTS-Version 10 von NodeJS.Install NodeJS LTS version 10.

  • Wenn Sie Windows verwenden, können Sie die MSI-Installationsprogramme in diesem Link verwenden, um NodeJS auf einfache Weise einzurichten.If you are in Windows, you can use the msi installers in this link for the easiest way to set up NodeJS.
  • If you have NodeJS already installed, check that you have the latest version by using node -v. It should return the current LTS version.If you have NodeJS already installed, check that you have the latest version by using node -v. It should return the current LTS version.

Wichtig

Die derzeit unterstützte LTS-Versionen von NodeJS für das SharePoint-Framework sind Node.js v8.x und Node.js v10.x.The current supported LTS version of NodeJS for the SharePoint Framework is both 8.x and 10.x. Beachten Sie, dass die Versionen 9.x und 11.x bei der SharePoint-Framework-Entwicklung derzeit nicht unterstützt werden.Notice that 9.x or 11.x versions are currently not supported with SharePoint Framework development.

Hinweis

Wenn Sie SharePoint-Framework-Komponenten für SharePoint Server 2016 erstellen, finden Sie weitere Informationen dazu, welche Version von NodeJS Sie installieren sollten, im Abschnitt SPFx & SharePoint Server 2016.If you are building SharePoint Framework components for SharePoint Server 2016, refer to additional details in the SPFx & SharePoint Server 2016 section for additional details on which version of NodeJS 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.

Installieren von Yeoman und GulpInstall Yeoman and gulp

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 ein, um Yeoman und Gulp zu installieren:Enter the following command to install Yeoman and gulp:

npm install -g yo gulp

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 -g @microsoft/generator-sharepoint

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.

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): Anzeigen einer Vorschau des Webparts 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): Preview the web part 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 Development for 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 NodeJS von NodeJS v6.x auf v8.x umgestellt.Around this the time of the v1.1 release, NodeJS was transitioning from NodeJS v6.x to v8.x. In diesem Update hat NodeJS eine Änderung eingeführt, bei der das Standard-HTTP-Protokoll von HTTP1 zu HTTP2 gewechselt wurde.In this update, NodeJS introduced a change where the default changed 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 impacted the local web server for SPFx v1.1 projects.

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

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

Weitere Informationen finden Sie unter Problem Nr. 1002.For more information, refer to issue #1002.

Nächste SchritteNext steps

Sie können jetzt Ihr erstes clientseitiges Webpart erstellen!You are 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, aktivieren Sie zuerst den Abschnitt SPFx & SharePoint Server 2016 oben, um sicherzustellen, dass Sie eine unterstützte Version von NodeJS ausführen.If you are working with SharePoint Server 2016 / SPFx v1.1, first check the SPFx & SharePoint Server 2016 section above to ensure you are running a supported version of NodeJS.

In einigen Fällen hat das Ausführen des Befehls gulp trust-dev-cert nicht den gewünschten Effekt, das dem selbstsignierten Entwicklungszertifikat auf Ihrem Computer vertraut wird.In some cases, executing the command gulp trust-dev-cert, does not have the desired 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

Hinweis

Wenn Sie einen Fehler in der Dokumentation oder im SharePoint Framework finden, melden Sie ihn an das SharePoint Engineering unter Verwendung der Fehlerliste im sp-dev-docs-Repository.If you find an issue in the documentation or in the SharePoint Framework, report that to SharePoint engineering by using the issue list at sp-dev-docs repository. Vielen Dank im Voraus für Ihr Feedback.Thanks for your input in advance.