Einrichten der Entwicklungsumgebung

Dieser Leitfaden hilft Ihnen beim Einrichten von Tools, damit Sie Office-Add-Ins erstellen können, indem Sie unsere Schnellstarts oder Tutorials befolgen. Wenn Sie diese bereits installiert haben, können Sie mit einem Schnellstart beginnen, z. B. diesen Excel-React Schnellstart.

Microsoft 365 herunterladen

Sie benötigen ein Microsoft 365-Konto. Sie können ein kostenloses, 90-tägiges, erneuerbares Microsoft 365-Abonnement erhalten, das alle Office-Apps enthält, indem Sie am Microsoft 365-Entwicklerprogramm teilnehmen.

Installieren der Umgebung

Es stehen zwei Arten von Entwicklungsumgebungen zur Auswahl. Das Gerüst für Office-Add-In-Projekte, die in den beiden Umgebungen erstellt werden, ist unterschiedlich. Wenn also mehrere Personen an einem Add-In-Projekt arbeiten, müssen alle dieselbe Umgebung verwenden.

  • Node.js Umgebung: Empfohlen. In dieser Umgebung werden Ihre Tools installiert und in einer Befehlszeile ausgeführt. Die Serverseite des Webanwendungsteils des Add-Ins ist in JavaScript oder TypeScript geschrieben und wird in einer Node.js Runtime gehostet. In dieser Umgebung gibt es viele hilfreiche Add-In-Entwicklungstools, z. B. einen Office-Linter und einen Bundler/Task-Runner namens WebPack. Das Projekterstellungs- und Gerüsterstellungstool Yo Office wird häufig aktualisiert.
  • Visual Studio-Umgebung: Wählen Sie diese Umgebung nur aus, wenn Ihr Entwicklungscomputer Windows ist und Sie die Serverseite des Add-Ins mit einer .NET-basierten Sprache und einem Framework wie ASP.NET entwickeln möchten. Die Add-In-Projektvorlagen in Visual Studio werden nicht so häufig aktualisiert wie die Vorlagen in der Node.js Umgebung. Clientseitiger Code kann nicht mit dem integrierten Visual Studio-Debugger gedebuggt werden, aber Sie können clientseitigen Code mit den Entwicklungstools Ihres Browsers debuggen. Weitere Informationen später auf der Visual Studio-Umgebungsregisterkarte .

Hinweis

Visual Studio für Mac enthält nicht die Projektgerüstvorlagen für Office-Add-Ins. Wenn Ihr Entwicklungscomputer also ein Mac ist, sollten Sie mit der Node.js-Umgebung arbeiten.

Wählen Sie die Registerkarte für die umgebung aus, die Sie auswählen.

Die wichtigsten zu installierenden Tools sind:

  • Node.js
  • npm
  • Einen Code-Editor Ihrer Wahl
  • Yo Office
  • Der Office-JavaScript-Linter

In diesem Leitfaden wird davon ausgegangen, dass Sie wissen, wie Sie ein Befehlszeilentool verwenden.

Installieren von Node.js und npm

Node.js ist eine JavaScript-Runtime, die Sie zum Entwickeln moderner Office-Add-Ins verwenden.

Installieren Sie Node.js, indem Sie die neueste empfohlene Version von ihrer Website herunterladen. Befolgen Sie die Installationsanweisungen für Ihr Betriebssystem.

npm ist eine Open Source Softwareregistrierung, aus der die Pakete heruntergeladen werden können, die bei der Entwicklung von Office-Add-Ins verwendet werden. Es wird in der Regel automatisch installiert, wenn Sie Node.js installieren. Führen Sie folgendes in der Befehlszeile aus, um zu überprüfen, ob npm bereits installiert ist und die installierte Version angezeigt wird.

npm -v

Wenn Sie es aus irgendeinem Grund manuell installieren möchten, führen Sie Folgendes in der Befehlszeile aus.

npm install npm -g

Tipp

Möglicherweise möchten Sie einen Node-Versions-Manager verwenden, um zwischen mehreren Versionen von Node.js und npm zu wechseln, aber dies ist nicht unbedingt erforderlich. Ausführliche Informationen hierzu finden Sie in den Npm-Anweisungen.

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.:

Installieren des Yeoman-Generators – Yo Office

Das Projekterstellungs- und Gerüsterstellungstool ist ein Yeoman-Generator für Office-Add-Ins, der liebevoll als Yo Office bekannt ist. Sie müssen die neueste Version von Yeoman und Yo Office installieren. Um diese Tools global zu installieren, führen Sie den folgenden Befehl über der Eingabeaufforderung aus.

npm install -g yo generator-office

Installieren und Verwenden des Office-JavaScript-Linters

Microsoft bietet einen JavaScript-Linter, mit dem Sie häufige Fehler bei der Verwendung der Office JavaScript-Bibliothek abfangen können. Führen Sie zum Installieren des Linters die folgenden beiden Befehle aus (nachdem Sie Node.js und npm installiert haben).

npm install office-addin-lint --save-dev
npm install eslint-plugin-office-addins --save-dev

Wenn Sie ein Office-Add-In-Projekt mit dem Yeoman-Generator für Office-Add-Ins erstellen, ist der Rest der Einrichtung für Sie erledigt. Führen Sie den Linter mit dem folgenden Befehl entweder im Terminal eines Editors wie Visual Studio Code oder in einer Eingabeaufforderung aus. Probleme, die vom Linter gefunden werden, werden im Terminal oder der Eingabeaufforderung angezeigt und auch direkt im Code angezeigt, wenn Sie einen Editor verwenden, der Lintermeldungen unterstützt, z. B. Visual Studio Code. (Informationen zum Installieren des Yeoman-Generators finden Sie unter Yeoman-Generator für Office-Add-Ins.)

npm run lint

Wenn Ihr Add-In-Projekt auf andere Weise erstellt wurde, führen Sie die folgenden Schritte aus.

  1. Erstellen Sie im Stammverzeichnis des Projekts eine Textdatei mit dem Namen .eslintrc.json, falls noch keine vorhanden ist. Stellen Sie sicher, dass sie über Eigenschaften namens plugins und extendsverfügt, die beide vom Typ Array sind. Das plugins Array sollte enthalten "office-addins" , und das extends Array sollte enthalten "plugin:office-addins/recommended". Nachfolgend sehen Sie ein einfaches Beispiel. Ihre .eslintrc.json-Datei kann zusätzliche Eigenschaften und zusätzliche Member der beiden Arrays aufweisen.

    {
      "plugins": [
        "office-addins"
      ],
      "extends": [
        "plugin:office-addins/recommended"
      ]
    }
    
  2. Öffnen Sie im Stammverzeichnis des Projekts die Datei package.json , und stellen Sie sicher, dass das scripts Array über den folgenden Member verfügt.

    "lint": "office-addin-lint check",
    
  3. Führen Sie den Linter mit dem folgenden Befehl entweder im Terminal eines Editors wie Visual Studio Code oder in einer Eingabeaufforderung aus. Probleme, die vom Linter gefunden werden, werden im Terminal oder der Eingabeaufforderung angezeigt und auch direkt im Code angezeigt, wenn Sie einen Editor verwenden, der Lintermeldungen unterstützt, z. B. Visual Studio Code.

    npm run lint
    

Installieren von Script Lab

Script Lab ist ein Tool für die schnelle Prototyperstellung von Code, der die Office JavaScript-Bibliotheks-APIs aufruft. Script Lab ist selbst ein Office-Add-In und kann über AppSource auf Script Lab installiert werden. Es gibt eine Version für Excel, PowerPoint und Word sowie eine separate Version für Outlook. Informationen zur Verwendung von Script Lab finden Sie unter Erkunden der Office JavaScript-API mit Script Lab.

Nächste Schritte

Versuchen Sie, ein eigenes Add-In zu erstellen, oder verwenden Sie Script Lab, um integrierte Beispiele auszuprobieren.

Erstellen eines Office-Add-Ins

Sie können schnell ein einfaches Add-In für Excel, OneNote, Outlook, PowerPoint, Project oder Word erstellen, indem Sie einen 5-Minuten-Schnellstartausführen. Wenn Sie bereits einen Schnellstart abgeschlossen haben und ein etwas komplexeres Add-In erstellen möchten, sollten Sie das Lernprogramm ausprobieren.

Erkunden der APIs mithilfe von Script Lab

Erkunden Sie die Bibliothek mit integrierten Beispielen in Script Lab, um eine Vorstellung von den Funktionen der Office JavaScript-APIs zu erhalten.

Siehe auch