figchat

Im Folgenden finden Sie die Schritte, um Ihr Widget zum Laufen zu bringen. Sie können auch Anweisungen finden bei:

https://www.figma.com/widget-docs/setup-guide/

Diese Widget -Vorlage verwendet TypeScript und NPM, zwei Standard -Tools beim Erstellen von JavaScript -Anwendungen.

Laden Sie zunächst Node.js herunter, der mit NPM geliefert wird. Auf diese Weise können Sie TypeScript und andere Bibliotheken installieren. Der Download -Link finden Sie hier:

https://nodejs.org/en/download/

Installieren Sie als Nächstes die Definitionen für Typscript, ESBuild und die neuesten Typ -Definitionen, indem Sie ausgeführt werden:

NPM Installation

Wenn Sie mit JavaScript vertraut sind, sieht TypeScript sehr vertraut aus. Tatsächlich ist ein gültiger JavaScript -Code bereits gültiger TypeScript -Code.

TypeScript fügt Variablen Typ Anmerkungen hinzu. Auf diese Weise können Code -Editoren wie Visual Studio Code Informationen über die Figma -API bereitstellen, während Sie Code schreiben, sowie bei der Hilfe von Fangfehlern, die Sie zuvor nicht bemerkt haben.

Weitere Informationen finden Sie unter https://www.typescriptlang.org/

Durch die Verwendung von TypeScript muss ein Compiler TypeScript (Widget-src/code.tsx) in JavaScript (dist/code.js) konvertieren, damit der Browser ausgeführt werden kann. Wir verwenden esbuild, um dies für uns zu tun.

Wir empfehlen, TypeScript -Code mit Visual Studio Code zu schreiben:

1. Laden Sie den Visual Studio -Code herunter, wenn Sie es noch nicht getan haben: https://code.visualstudio.com/.
2. Öffnen Sie dieses Verzeichnis im Visual Studio -Code.
3. Kompilieren Sie TypeScript in JavaScript: Führen Sie das Menüelement "Terminal> Build ..." aus und wählen Sie "NPM: Watch". Sie müssen dies jedes Mal erneut tun, wenn Sie den Visual Studio -Code wiedereröffnen.

Das war's! Visual Studio Code regeneriert die JavaScript -Datei jedes Mal, wenn Sie speichern.