Utiliser des paquets npm
Importez n’importe quel paquet npm qui fonctionne dans un navigateur : le Studio de widgets le récupère pour vous. Il n’y a rien à installer.
import { format } from "date-fns@4";
Consultez d’abord la bibliothèque Blotch. Elle a peut-être déjà ce qu’il vous faut, conçu pour l’encre électronique (e-ink), et elle garde votre widget plus léger. Pour les graphiques, utilisez les graphiques de la bibliothèque plutôt qu’un paquet de graphiques.
Paquets pour navigateur uniquement
Votre widget s’exécute dans un navigateur. Les paquets conçus pour Node.js, qui utilisent par exemple fs ou child_process, ne fonctionnent donc pas. Ceux qui fonctionnent dans les deux environnements conviennent.
Fixer la version
Ajoutez toujours une version au nom du paquet. Sans elle, votre widget reçoit la version la plus récente chaque fois qu’il est dessiné, et une nouvelle version majeure du paquet peut le casser sans prévenir.
| Vous écrivez | Vous obtenez | Équivalent dans package.json |
|---|---|---|
date-fns@4 | La dernière 4.x.x | ^4.0.0 |
date-fns@4.1 | La dernière 4.1.x | ~4.1.0 |
date-fns@4.1.0 | Exactement 4.1.0 | 4.1.0 |
date-fns | La version la plus récente, quelle qu’elle soit | * |
Les paquets à portée et les chemins à l’intérieur d’un paquet fonctionnent aussi, par exemple @scope/package@2 ou package@2/subpath.
Tapez @ après le nom d’un paquet pour voir ses versions. Les types sont récupérés avec le paquet lorsqu’il en fournit, si bien que l’autocomplétion fonctionne.
Importer par nom
Importez des exports nommés ou par défaut :
import { format } from "date-fns@4";
import dayjs from "dayjs@1";
Deux autres formes d’import ne sont pas récupérées pour vous. Évitez-les :
- Les imports d’espace de noms dont le nom contient des majuscules, comme
import * as Lib from "lib@1". Écrivez-le en minuscules,import * as lib from "lib@1", ou importez par nom. - Les imports faits uniquement pour leurs effets de bord, comme
import "lib@1".
React
Les widgets utilisent toujours la version de React fournie par Blotch, quelle que soit celle que vous importez. Importez React sans version :
import { useState } from "react";