Freigeben über

Einrichten der Entwicklungsumgebung

  • Artikel

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 sich über das Microsoft 365-Entwicklerprogramm für ein Microsoft 365 E5-Entwicklerabonnement qualifizieren, das alle Office-Apps umfasst. Ausführliche 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.

Installieren der Umgebung

Es stehen drei Arten von Entwicklungsumgebungen zur Auswahl. Das Gerüst für Office-Add-In-Projekte, die in den drei Umgebungen erstellt werden, unterscheidet sich. 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 ist ein Befehlszeilentool namens Office Yeoman-Generator (auch "Yo Office" genannt), obwohl Sie weiterhin die in der nächsten Option erwähnten Visual Studio Code-Erweiterungen verwenden können.
  • Visual Studio Code: Wählen Sie diese Umgebung aus, wenn Sie Visual Studio Code verwenden und Projekte lieber aus Erweiterungen anstelle von Befehlszeilentools erstellen möchten. Die Projekterstellungs- und Gerüstbautools sind die Erweiterungen Teams Toolkit oder Office Add-Ins Development Kit.
  • 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 entwickeln möchten, z. B. ASP.NET. Die Add-In-Projektvorlagen in Visual Studio werden nicht so häufig aktualisiert wie die Vorlagen in der Node.js Umgebung. Weitere Informationen später auf der Visual Studio-Umgebungsregisterkarte .

Hinweis

Visual Studio für Mac enthält keine 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.

Folgende Standard Tools müssen installiert werden:

  • Node.js
  • npm
  • Einen Code-Editor Ihrer Wahl
  • Office Yeoman Generator (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. Wenn Sie ein Add-In-Projekt entweder mit dem Yeoman-Generator für Office-Add-Ins oder dem Teams Toolkit erstellen, wird der Linter für Sie installiert und konfiguriert. Fahren Sie mit Linter ausführen fort.

Wenn Sie Ihr Projekt manuell erstellt haben, installieren und konfigurieren Sie den Linter mit den folgenden Schritten.

  1. Führen Sie im Stammverzeichnis des Projekts 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

  2. Erstellen Sie im Stammverzeichnis des Projekts eine Textdatei mit dem Namen .eslintrc.json, sofern 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 verfügt möglicherweise über zusätzliche Eigenschaften und zusätzliche Member der beiden Arrays.

    {
  "plugins": [
    "office-addins"
  ],
  "extends": [
    "plugin:office-addins/recommended"
  ]
}

  3. Öffnen Sie im Stammverzeichnis des Projekts die package.json Datei, und stellen Sie sicher, dass das scripts Array über den folgenden Member verfügt.

    "lint": "office-addin-lint check",

Ausführen des Linters

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 zuvor einen Schnellstart abgeschlossen haben und ein etwas komplexeres Add-In erstellen möchten, sollten Sie ein Tutorial 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