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

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. Es gibt zwei Projekterstellungs- und Gerüstbautools, aus denen Sie wählen können: ein Befehlszeilentool namens Office Yeoman Generator (auch "Yo Office" genannt) und eine Erweiterung für Visual Studio Code namens Teams Toolkit.
  • 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 nicht die Projektgerüstvorlagen für Office-Add-Ins. Wenn Ihr Entwicklungscomputer ein Mac ist, sollten Sie also 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

  • Ein Projekterstellungstool:

    • Office Yeoman Generator (Yo Office)
    • Teams-Toolkit (erfordert Visual Studio Code)

  • 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 eines Tools für die Projekterstellung

Sie können Office-Add-In-Projekte entweder mit dem Office Yeoman-Generator (Yo Office) oder der Teams Toolkit-Erweiterung für Visual Studio Code erstellen.

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 des Teams-Toolkits

Installieren Sie Visual Studio Code , und installieren Sie dann die neueste Version des Teams-Toolkits, wie unter Installieren des Teams-Toolkits beschrieben.

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 des Skriptlabs

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 unter 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 mithilfe von Script Lab.

Hinweis

Ab Version 115 von Chromium-basierten Browsern wie Chrome und Edge ist die Speicherpartitionierung aktiviert, um bestimmte seitenkanalübergreifende Nachverfolgung zu verhindern (siehe auch Microsoft Edge-Browserrichtlinien). Diese Änderung verhindert, dass Skript-Lab-Codeausschnitte in Outlook im Web ausgeführt werden.

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