Entwickeln von Office-Add-Ins mit Visual Studio Code

In diesem Artikel wird die Verwendung von Visual Studio Code (VS Code) zum Erstellen eines Office-Add-Ins beschrieben.

Hinweis

Informationen zur Verwendung von Visual Studio zum Erstellen eines Office-Add-Ins finden Sie unter Entwickeln eines Office Add-Ins mit Visual Studio.

Voraussetzungen

  • Node.js (die aktuellsteLTS-Version). Besuchen Sie die Node.js Website , um die richtige Version für Ihr Betriebssystem herunterzuladen und zu installieren.

  • Die neueste Version von Yeoman und des Yeoman-Generators für Office-Add-Ins. Um diese Tools global zu installieren, führen Sie den folgenden Befehl an der Eingabeaufforderung aus.

    npm install -g yo generator-office
    

    Hinweis

    Selbst wenn Sie bereits den Yeoman-Generator installiert haben, empfehlen wir Ihnen, das npm-Paket auf die neueste Version zu aktualisieren.

  • Office in Verbindung mit einem Microsoft 365-Abonnement (einschließlich Office im Internet).

    Hinweis

    Wenn Sie noch nicht über Office verfügen, können Sie sich über das Microsoft 365-Entwicklerprogramm für ein Microsoft 365 E5-Entwicklerabonnement qualifizieren. Weitere Informationen finden Sie in den häufig gestellten Fragen. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

Erstellen Sie ein Add-In-Projekt mit dem Yeoman-Generator

Wenn Sie VS Code als integrierte Entwicklungsumgebung (IDE) verwenden, sollten Sie das Office-Add-In-Projekt mit dem Yeoman-Generator für Office Add-Inserstellen. Der Yeoman-Generator erstellt ein Node.js-Projekt, das mit VS Code oder einem beliebigen anderen Editor verwaltet werden kann.

Wenn Sie ein Office-Add-In mit dem Yeoman-Generator erstellen möchten, folgen Sie den Anweisungen in der Anleitung 5-Minuten-Schnellstart die dem Typ des Add-Ins entspricht, das Sie erstellen möchten.

Entwickeln Sie das Add-In mithilfe von VS Code

Öffnen Sie den Stammordner des Projekts mit VS Code, wenn der Yeoman-Generator das Erstellen des Add-In-Projekts abgeschlossen hat.

Tipp

In Windows können Sie über die Befehlszeile zum Stammverzeichnis des Projekts navigieren und dann code . eingeben, um diesen Ordner in VS Code zu öffnen. Auf einem Mac müssen Sie den code-Befehl zum Pfad hinzufügenbevor Sie diesen Befehl verwenden können, um den Projektordner in VS Code zu öffnen.

Der Yeoman-Generator erstellt ein Basis-Add-In mit eingeschränkter Funktionalität. Sie können das Add-In an Ihre Wünsche anpassen, indem Sie dieManifest-, HTML-, JavaScript-, oder TypeScript- und die CSS-Dateien in VS Code bearbeiten. Eine genauere Beschreibung der Projektstruktur und der Dateien im Add-In-Projekt, das vom Yeoman-Generator erstellt wird, finden Sie in der Anleitung zum Yeoman-Generator, die in der jeweiligen Anleitung zum 5-Minuten-Schnellstart enthalten ist, die dem von Ihnen erstellten Add-In entspricht.

Testen und Debuggen Sie das Add-In

Die Methoden zum Testen, und Debuggen von Office-Add-Ins und zur Problembehandlung variieren je nach Plattform. Weitere Informationen finden Sie unter Testen und Debuggen von Office-Add-Ins.

Veröffentlichen Sie das Add-In

Ein Office-Add-In besteht aus einer Webanwendung und einer Manifest-Datei. Die Webanwendung definiert die Benutzeroberfläche und die Funktionalität des Add-Ins, während das Manifest den Speicherort der Webanwendung angibt sowie die Einstellungen und Funktionen des Add-Ins definiert.

Während Sie das Add-in entwickeln, können Sie das Add-in auf Ihrem lokalen Webserver (localhost) ausführen. Wenn Sie jedoch bereit sind, es für den Zugriff durch andere Benutzer zu veröffentlichen, müssen Sie die Webanwendung auf einem Webserver oder Webhosting-Dienst bereitstellen (beispielsweise Microsoft Azure), und das Manifest aktualisieren, um die URL der bereitgestellten Anwendung anzugeben.

Führen Sie die folgenden Schritte aus, wenn Ihr Add-In wie gewünscht funktioniert und Sie bereit sind, es für andere Benutzer freizugeben.

  1. Führen Sie in der Befehlszeile im Stammverzeichnis Ihres Add-in-Projekts den folgenden Befehl aus, um alle Dateien für die Produktionsbereitstellung vorzubereiten.

    npm run build
    

    Nach Abschluss des Builds enthält der Ordner Dist (Distribution/Verteilung) im Stammverzeichnis Ihres Add-in-Projekts diejenigen Dateien, die Sie in den nachfolgenden Schritten bereitstellen.

  2. Laden Sie den Inhalt des Ordners Dist auf den Webserver hoch, auf dem Ihr Add-In gehostet wird. Sie können jede Art von Webserver oder Webhosting-Dienst verwenden, um Ihr Add-In zu hosten.

  3. Öffnen Sie in VS Code die Manifest-Datei des Add-Ins, die sich im Stammverzeichnis des Projekts (manifest.xml) befindet. Ersetzen Sie alle vorkommenden https://localhost:3000 durch die URL der Webanwendung, die Sie im vorherigen Schritt auf einem Webserver bereitgestellt haben.

  4. Wählen Sie diejenige Methode aus, die Sie verwenden möchten, um Ihr Office-Add-In bereitzustellen und folgen Sie den Anweisungen zum Veröffentlichen der Manifest-Datei.

Weitere Artikel