npm-Pakete verwenden

Importieren Sie ein beliebiges npm-Paket, das im Browser läuft, und das Widget-Studio lädt es für Sie. Installieren müssen Sie nichts.

import { format } from "date-fns@4";

Sehen Sie zuerst in der Blotch-Bibliothek nach. Vielleicht hat sie schon, was Sie brauchen, passend für E-Ink gezeichnet, und Ihr Widget bleibt schlanker. Nehmen Sie für Diagramme die Diagramme der Bibliothek statt eines Diagrammpakets.

Nur Pakete für den Browser

Ihr Widget läuft in einem Browser. Pakete für Node.js, die etwa fs oder child_process verwenden, funktionieren deshalb nicht. Pakete, die in beiden Umgebungen laufen, sind kein Problem.

Die Version festlegen

Geben Sie beim Paketnamen immer eine Version an. Ohne Version bekommt Ihr Widget bei jedem Zeichnen die neueste, und eine neue Hauptversion des Pakets kann es ohne Vorwarnung lahmlegen.

Sie schreiben	Sie bekommen	Entspricht in package.json
date-fns@4	Die neueste 4.x.x	^4.0.0
date-fns@4.1	Die neueste 4.1.x	~4.1.0
date-fns@4.1.0	Genau 4.1.0	4.1.0
date-fns	Die neueste Version, egal welche	*

Pakete mit Scope und Pfade innerhalb eines Pakets funktionieren ebenfalls, etwa @scope/package@2 oder package@2/subpath.

Tippen Sie nach einem Paketnamen @, um seine Versionen zu sehen. Hat ein Paket Typen, werden sie mitgeladen, sodass die Autovervollständigung funktioniert.

Nach Namen importieren

Importieren Sie benannte Exporte oder den Standardexport:

import { format } from "date-fns@4";
import dayjs from "dayjs@1";

Zwei andere Importformen werden nicht für Sie geladen. Vermeiden Sie sie daher:

• Namespace-Importe mit Großbuchstaben im Namen, etwa import * as Lib from "lib@1". Schreiben Sie den Namen klein, import * as lib from "lib@1", oder importieren Sie nach Namen.
• Importe nur für Nebeneffekte, etwa import "lib@1".

React

Widgets verwenden immer die React-Version, die Blotch bereitstellt, egal welche Version Sie importieren. Importieren Sie React ohne Version:

import { useState } from "react";