Migreer van een CDN naar pnpm

De dependencies op de aanbevolen manier installeren via pnpm is één van de eerste stappen wanneer je het prototype gaat doorontwikkelen.

Zoek alle plekken waar je de CDN in je prototype gebruikt. Bekijk hiervoor de Network-tab in de Developer Tools van je browser. Zoek welke andere servers daar voorkomen. Ken je de URL van de CDN? Zoek deze dan direct op in de code.

De aanpassingen van de code van je prototype die nodig zijn, zijn heel erg afhankelijk van welke build tools je gaat gebruiken. De volgende voorbeelden laten zien hoe je naar Vite kan migreren.

Dependencies installeren

Zoek in de code naar npm-packages die je via een CDN laadt. In de Network-tab staan vaak te veel packages. Dit komt door indirecte dependencies. Die hoef je niet zelf te installeren. Beperk je daarom alleen tot de npm-packages in de code.

Installeer elke npm dependency met pnpm add, en noem hetzelfde versienummer als die bekend is. Bijvoorbeeld, wanneer de volgende code in je prototype staat:

<script
  src="https://unpkg.com/@utrecht/web-component-library-stencil@4.1.0/dist/utrecht/utrecht.esm.js"
  type="module"
></script>

Dan installeer je de dependency zo via pnpm, met hetzelfde versienummer:

pnpm add @utrecht/web-component-library-stencil@4.1.0

Wanneer er geen versienummer bekend is, dan kun je de laatste versie installeren:

pnpm add @utrecht/web-component-library-stencil

Wanneer het prototype geen versienummer noemt, dan kan het zijn dat het prototype niet meer werkt met de laatste versie van de dependency. Probeer dan de versie van de dependency te vinden die wel werkt, door uit te zoeken wanneer het prototype gemaakt is en welke versie toen de laatste versie was.

Web Fonts installeren

De meeste open source lettertypes kun je vinden via Fontsource. Bijvoorbeeld: Roboto van Google Fonts kun je vervangen door de npm package voor Roboto van Fontsource.

pnpm add @fontsource-variable/roboto

CSS en Web Fonts migreren

De CSS en Web Fonts worden meestal vanaf de CDN ingeladen met een <link> element.

<link rel="stylesheet" href="https://unpkg.com/@fontsource/roboto/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@nl-design-system-candidate/button-css@1.1.0/dist/button.css" />

Bij Vite wordt de CSS ingeladen vanuit JavaScript in plaats van via HTML:

<script>
  import "@fontsource/roboto/index.css";
  import "@nl-design-system-candidate/button-css/button.css";
</script>

JavaScript migreren

Uit bestaande imports in code moeten de URL van de CDN en het versienummer verwijderd worden. Het versienummer is al vastgelegd door pnpm add.

Bijvoorbeeld, deze code die een CDN gebruikt:

import { Button } from "https://unpkg.com/@nl-design-system-candidate/button-react@1.1.0";

De aangepaste code zonder CDN en versienummer:

import { Button } from "@nl-design-system-candidate/button-react";