Usare pacchetti npm
Importa qualsiasi pacchetto npm che funzioni in un browser, e lo Studio dei widget lo scarica per te. Non c’è nulla da installare.
import { format } from "date-fns@4";
Prima controlla la libreria Blotch. Forse ha già quello che ti serve, disegnato per l’inchiostro elettronico (e-ink), e mantiene il tuo widget più leggero. Per i grafici, usa i grafici della libreria invece di un pacchetto di grafici.
Solo pacchetti per il browser
Il tuo widget viene eseguito in un browser, quindi i pacchetti pensati per Node.js, che usano cose come fs o child_process, non funzionano. I pacchetti che funzionano in entrambi vanno bene.
Fissare la versione
Aggiungi sempre una versione al nome del pacchetto. Senza versione, il tuo widget riceve la versione più recente ogni volta che viene disegnato, e una nuova versione principale del pacchetto può romperlo senza preavviso.
| Scrivi | Ottieni | In package.json equivale a |
|---|---|---|
date-fns@4 | La 4.x.x più recente | ^4.0.0 |
date-fns@4.1 | La 4.1.x più recente | ~4.1.0 |
date-fns@4.1.0 | Esattamente la 4.1.0 | 4.1.0 |
date-fns | La versione più recente, qualunque sia | * |
Funzionano anche i pacchetti con ambito e i percorsi all’interno di un pacchetto, come @scope/package@2 o package@2/subpath.
Digita @ dopo il nome di un pacchetto per vederne le versioni. Quando il pacchetto ha i suoi tipi, vengono scaricati insieme a lui, così il completamento automatico funziona.
Importare per nome
Importa le esportazioni con nome o quella predefinita:
import { format } from "date-fns@4";
import dayjs from "dayjs@1";
Altre due forme di importazione non vengono scaricate per te, quindi evitale:
- Le importazioni di namespace con lettere maiuscole nel nome, come
import * as Lib from "lib@1". Scrivi il nome in minuscolo,import * as lib from "lib@1", oppure importa per nome. - Le importazioni solo per i loro effetti collaterali, come
import "lib@1".
React
I widget usano sempre la versione di React fornita da Blotch, qualunque versione tu importi. Importa React senza versione:
import { useState } from "react";