Freigeben über

Entwickeln von Office-Add-Ins mit Visual Studio Code

  • Artikel

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.

Erstellen des Add-In-Projekts mit dem Office Add-Ins Development Kit (Vorschau)

Das Office Add-Ins Development Kit ist eine Visual Studio Code-Erweiterung, mit der Sie neue Projekte direkt aus VS Code erstellen können. Informationen zum Installieren der Erweiterung und zum Erstellen von Projekten aus Vorlagen und Beispielen finden Sie unter Erstellen von Office-Add-In-Projekten mithilfe des Office Add-Ins Development Kit für Visual Studio Code.

Wichtig

Die Office Add-Ins Development Kit-Erweiterung unterstützt nur das Erstellen von Add-Ins, die nur das Add-In-Manifest verwenden. Außerdem werden derzeit nur Excel-, PowerPoint- und Word-Add-Ins erstellt. Die Unterstützung für Outlook befindet sich in der Entwicklung, ebenso wie zusätzliche Beispiele und andere Verbesserungen. Wir freuen uns über ihr Feedback zum Tool. Probleme und Featureanforderungen sollten über GitHub Issues im Repository der Erweiterung übermittelt werden.

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