Einrichten der Entwicklungsumgebung

Artikel
02/13/2024

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 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 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. Clientseitiger Code kann nicht mit dem integrierten Visual Studio-Debugger debuggt 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 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.

Node.js Umgebung
Visual Studio-Umgebung

Folgende Standard Tools müssen installiert werden:

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.

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"
  ]
}
```
Ö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",
```
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.

Hinweis

Ab Version 115 von Chromium-basierten Browsern wie Chrome und Edge wird die Speicherpartitionierung getestet, um eine bestimmte seitenkanalübergreifende Nachverfolgung zu verhindern (siehe auch Microsoft Edge-Browserrichtlinien). Diese Änderung verhindert, dass Script Lab Codeausschnitte in Outlook im Web ausgeführt werden. Um dies zu umgehen, wechseln Sie in Ihrem Browser zu chrome://flags oder edge://flags , und legen Sie dann das Flag Storage Partitioning (#third-party-storage-partitioning) von Drittanbietern auf Deaktiviert fest.

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.