Klassen en modules in JavaScript met ontwikkelaarstools

Een klasse beschrijft objecten met dezelfde structuur en hetzelfde gedrag. Elk object dat op basis van de klasse wordt gemaakt, is een instantie. Gebruik een klasse wanneer meerdere objecten dezelfde bewerkingen nodig hebben; voor één instellingenwaarde is een gewoon object vaak genoeg.

Geef elk object eigen gegevens

Klassenamen gebruiken volgens afspraak PascalCase, zoals Rectangle. De constructor wordt telkens uitgevoerd wanneer new een instantie maakt. Daarbinnen verwijst this naar het nieuwe object. Een toewijzing aan this.width slaat een instantie-eigenschap op; een parameter met alleen de naam width is een lokale variabele.

class Rectangle {
  constructor(width, height) {
    this.width = width; // cm
    this.height = height;
  }
  area() {
    return this.width * this.height;
  }
  perimeter() {
    return 2 * (this.width + this.height);
  }
}
const a = new Rectangle(3, 4);
const b = new Rectangle(5, 2);
a.area();      // 12
a.perimeter(); // 14
b.area();      // 10

Bij a.area() roept JavaScript de methode aan met this ingesteld op a. De breedte van 3 cm vermenigvuldigd met de hoogte van 4 cm geeft 12 cm². Voor de omtrek tel je de twee verschillende zijden op en verdubbel je die som, wat 14 cm geeft. Als je b.width wijzigt, verandert alleen b.

Methoden hebben geen sleutelwoord function en geen komma's ertussen. Een klasse heeft hoogstens één constructor. Als je die bij een klasse zonder extends weglaat, krijgt de klasse een lege standaardconstructor. new geeft de gemaakte instantie automatisch terug.

Een veld declareert een eigenschap in het klassenlichaam: unit = "cm"; geeft elke instantie een eigen waarde. label; begint als undefined. In een klasse zonder extends worden instantievelden geïnitialiseerd voordat het constructorlichaam wordt uitgevoerd.

Lees en wijs toe via getters en setters

Een getter wordt uitgevoerd wanneer een eigenschap wordt gelezen. Bij get area() { return this.width * this.height; } lees je a.area zonder haakjes. Dit is een alternatief voor de methode hierboven, die a.area() gebruikt.

Een setter wordt uitgevoerd bij een toewijzing en kan ongeldige invoer afwijzen. Een setter heeft aparte opslag nodig: set width(value) { this.width = value; } roept zichzelf herhaaldelijk aan totdat de aanroepstapel overloopt. Sla de waarde onder een andere naam op, zoals het privéveld #width.

Behoud het ontvangende object wanneer je een methode doorgeeft

class Counter {
  count = 0;
  increment() { this.count++; }
}
const counter = new Counter();
const inc = counter.increment;
// inc(); // TypeError: this is undefined
const safeInc = () => counter.increment();
safeInc(); // counter.count is 1

Klassenmethoden worden in strikte modus uitgevoerd. Een losgekoppelde aanroep heeft geen ontvangend object vóór de punt, dus is this gelijk aan undefined. De aanroeper van een callback kan ook een ander ontvangend object meegeven. Een omhullende pijlfunctie behoudt de aanroep op counter; counter.increment.bind(counter) maakt een gebonden functie. Een veld met een pijlfunctie, increment = () => { this.count++; };, legt ook de this van de instantie vast.

Rectangle(3, 4) aanroepen zonder new werpt een TypeError op. Een klasse gebruiken voordat de declaratie ervan is geïnitialiseerd, werpt een ReferenceError op. Klassen verschillen hierin van functiedeclaraties die eerder in een bestand kunnen worden aangeroepen.

JSON bewaart gegevens, geen klassegedrag. JSON.stringify(a) slaat de eigen publieke breedte en hoogte op. Bij het ontleden van die tekst ontstaat een gewoon object; maak opnieuw een instantie met new Rectangle(data.width, data.height) om de methoden te gebruiken.

Een object kan een kleine publieke interface aanbieden en de opslag tegelijk privé houden. Dit is inkapseling. De interface bepaalt welke wijzigingen geldig zijn; afscherming alleen controleert geen waarde die aan een publieke setter wordt doorgegeven.

Valideer aan de grens

Een privéveld begint met # en moet in het klassenlichaam worden gedeclareerd. Code binnen die klasse leest het via this.#target. Code buiten de klasse kan t.#target niet lezen of beschrijven: dat is een syntaxisfout, geen leesactie die undefined teruggeeft.

class Thermostat {
  static MIN = 10;
  static MAX = 30;
  #target = 20;

  get target() { return this.#target; }
  set target(value) {
    if (!Number.isFinite(value) ||
        value < Thermostat.MIN ||
        value > Thermostat.MAX) {
      throw new RangeError("Target must be between 10 and 30 °C");
    }
    this.#target = value;
  }
}
const t = new Thermostat();
t.target = 22;
t.target; // 22
// t.target = 35; // throws RangeError

De getter maakt de waarde leesbaar zonder toegang tot de opslag te geven. De setter wijst eerst invoer af die geen eindig getal is en daarna waarden buiten het bereik van 10 tot en met 30 °C. Alleen een geaccepteerde waarde bereikt de toewijzing. Na een afgewezen poging om 35 °C in te stellen, blijft de doelwaarde 22 °C. Een numerieke string zoals "22" komt ook niet door Number.isFinite.

De getter en setter gebruiken #target, dus het toewijzen aan t.target roept de setter niet recursief aan. De namen target en #target zijn verschillend. Een onderstrepingsteken aan het begin, zoals in _target, vraagt andere programmeurs alleen om een publieke eigenschap als intern te behandelen; JavaScript staat toegang ertoe nog steeds toe.

Privévelden verschijnen niet in Object.keys, for...in of JSON-serialisatie. Deze thermostaat heeft geen eigen publieke velden, dus geeft JSON.stringify(t) de tekst "{}". Om een object op te slaan, kan daarom een expliciete publieke methode nodig zijn die de op te slaan gegevens teruggeeft.

Houd interne hulpmethoden privé

Een methode zoals #check(value) { ... } kan validatiestappen bevatten en wordt binnen de klasse aangeroepen als this.#check(value). De methode maakt geen deel uit van de publieke interface. Binnen de klasse controleert #target in obj of een object dat privéveld heeft.

Een subklasse kan de privénaam van de ouderklasse niet rechtstreeks gebruiken. De subklasse kan wel de publieke getter of setter van de ouderklasse gebruiken, die wordt uitgevoerd in de klasse die het veld heeft gedeclareerd. Zo houdt de ouderklasse controle over haar eigen toestand.

Plaats gedeeld werk op de klasse

Een statisch lid hoort bij de klasse. Thermostat.MIN is 10, terwijl t.MIN gelijk is aan undefined. Deze statische grenzen zijn publieke velden; static maakt ze op zichzelf niet alleen-lezen.

class Tracked {
  static count = 0;
  constructor() { Tracked.count++; }
}
new Tracked();
new Tracked();
new Tracked();
Tracked.count; // 3

Elke constructor verhoogt één teller op klasseniveau. Een instantieveld zou elk object daarentegen een aparte teller geven. Een statische fabrieksmethode, zoals static square(side) { return new Rectangle(side, side); }, hoort binnen Rectangle en wordt aangeroepen als Rectangle.square(5). Een statische vergelijkingsfunctie kan aan sort worden doorgegeven wanneer die de te vergelijken objecten als argumenten ontvangt.

Binnen een statische methode is this de klasse waarop de methode is aangeroepen; het is geen instantie van een rechthoek met een breedte. Een initialisatieblok static { ... } voert de initialisatie één keer uit wanneer de klasse wordt gedefinieerd en heeft toegang tot de privéleden van die klasse.

Overerving modelleert een “is een”-relatie. Een cirkel is een vorm, dus kan een klasse Circle de gedeelde beschrijving van een vorm overerven en tegelijk een eigen oppervlakteberekening aanbieden. Een subklasse erft gedrag over zonder elke methode naar haar eigen lichaam te kopiëren.

Initialiseer eerst de ouderklasse

class Circle extends Shape maakt Circle een subklasse en Shape haar superklasse. In een constructor van een subklasse roept super(...) de constructor van de ouderklasse aan. Die aanroep moet worden uitgevoerd voordat this voor het eerst wordt gebruikt. Een subklasse zonder constructor krijgt er een die haar argumenten doorgeeft aan de ouderklasse.

class Shape {
  constructor(name) { this.name = name; }
  area() { return 0; }
  describe() {
    return this.name + " with area " +
      this.area().toFixed(2) + " cm²";
  }
}
class Circle extends Shape {
  constructor(radius) {
    super("Circle");
    this.radius = radius;
  }
  area() { return Math.PI * this.radius ** 2; }
}
class Rectangle extends Shape {
  constructor(width, height) {
    super("Rectangle");
    this.width = width;
    this.height = height;
  }
  area() { return this.width * this.height; }
}

De aanroep new Circle(2).describe() geeft "Circle with area 12.57 cm²". Eerst stelt super de naam in. De cirkel slaat zijn straal op. De overgeërfde methode describe() roept vervolgens this.area() aan, waarmee de methode van de cirkel wordt gevonden. toFixed(2) maakt het resultaat op voor weergave. new Rectangle(3, 4).describe() geeft "Rectangle with area 12.00 cm²".

Overschrijf of breid een methode uit

Een subklasse overschrijft een methode door dezelfde naam te declareren. Zij kan de versie van de ouderklasse aanroepen via super.methodName().

class Square extends Rectangle {
  constructor(side) {
    super(side, side);
    this.name = "Square";
  }
  describe() {
    return super.describe() +
      " (all sides " + this.width + " cm)";
  }
}
new Square(5).describe();
// "Square with area 25.00 cm² (all sides 5 cm)"

super(side, side) initialiseert gelijke waarden voor breedte en hoogte. De overgeërfde oppervlaktemethode vermenigvuldigt die en de overschreven methode voegt informatie toe aan de overgeërfde beschrijving. Als je vereiste argumenten voor de ouderklasse vergeet, kunnen haar eigenschappen undefined blijven; super() aanroepen is niet genoeg als de ouderklasse waarden nodig heeft.

Polymorfisme betekent dat dezelfde aanroep verschillend gedrag kan selecteren. Een lus kan s.describe() aanroepen op cirkels en rechthoeken; elke beschrijving roept de juiste area() aan. Als je een vorm met een eigen oppervlaktemethode toevoegt, is er geen nieuw geval in die lus nodig.

new Circle(2) instanceof Circle en new Circle(2) instanceof Shape zijn allebei waar. Statische leden worden ook overgeërfd. De relatie van een instantie met een klasse volgt uit haar prototypeketen; dat is wat instanceof normaal controleert.

Kies een bruikbare relatie

Een klasse kan slechts één ouderklasse uitbreiden. Gebruik voor een “heeft een”-relatie compositie: een auto heeft een motor en vraagt this.engine.start() om werk te doen. Alleen een hulpmethode delen is geen reden om te stellen dat een niet-verwante klasse een soort van de andere is. Een mixin kopieert een groep methoden naar een prototype, bijvoorbeeld met Object.assign(Rectangle.prototype, serializable). Diepe ketens van ouderklassen kunnen wijzigingen moeilijk te volgen maken.

Ook ingebouwde klassen kunnen worden uitgebreid. Een constructor van ValidationError extends Error roept super(message) aan, stelt this.name = "ValidationError" in en kan this.field = field opslaan. Een catch-blok kan err instanceof ValidationError gebruiken om die fout anders af te handelen en het overgeërfde bericht te lezen.

Een object heeft een verborgen verwijzing naar een ander object, zijn prototype, of naar null. Als een eigenschap ontbreekt, wordt bij het lezen die verwijzing gevolgd. JavaScript blijft zoeken totdat het de eigenschap vindt of null bereikt; een zoekactie zonder resultaat geeft undefined terug.

Onderscheid opgeslagen en overgeërfde waarden

const defaults = { theme: "light", fontSize: 16 };
const settings = Object.create(defaults);
settings.fontSize = 18;
settings.theme;                   // "light"
settings.fontSize;                // 18
defaults.fontSize;                // 16
Object.hasOwn(settings, "theme"); // false
"theme" in settings;              // true
Object.keys(settings);            // ["fontSize"]

Object.create(defaults) maakt een leeg object met defaults als prototype. Door een waarde aan fontSize toe te wijzen, maak je een eigen eigenschap die de overgeërfde waarde overschaduwt. Daarbij blijft defaults.fontSize ongewijzigd. Na delete settings.fontSize bereikt de zoekactie weer de overgeërfde waarde 16.

Een ontbrekende eigen eigenschap kan nog steeds in de keten bestaan. Klassenmethoden zijn niet opsombaar, dus vermeldt for...in ze normaal gesproken niet. Gebruik Object.getPrototypeOf(settings) om het prototype te lezen. Geef de voorkeur aan deze Object-methoden boven de oudere accessor __proto__.

Bekijk hoe klassen methoden delen

Voor een rechthoekinstantie r is Object.getPrototypeOf(r) === Rectangle.prototype waar. De breedte is een eigen eigenschap, terwijl area normaal op Rectangle.prototype is opgeslagen. Object.hasOwn(r, "area") is onwaar, hoewel r.area() werkt. Een veld met een pijlfunctie is anders: dat maakt op elke instantie een eigen functie-eigenschap.

Een overgeërfde methode ontvangt nog steeds het object vóór de punt als this. De gedeelde oppervlaktemethode kan daardoor voor elke rechthoek andere afmetingen lezen zonder op elk object een aparte methode op te slaan.

Voor de vormenhiërarchie verloopt het opzoeken als volgt:

circle -> Circle.prototype -> Shape.prototype
       -> Object.prototype -> null

De oppervlaktemethode van de cirkel wordt als eerste gevonden. De beschrijving komt van Shape.prototype en toString kan van Object.prototype komen. Shape.prototype in de keten verklaart ook waarom circle instanceof Shape waar is.

De naam Rectangle.prototype betekent het prototype dat aan rechthoekinstanties wordt gegeven. De naam duidt niet het verborgen prototype van de functie Rectangle zelf aan; voor deze klasse is dat Shape wanneer zij Shape uitbreidt, of Function.prototype voor een klasse zonder superklasse.

Herken oudere constructorcode

function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}
Rectangle.prototype.area = function () {
  return this.width * this.height;
};

Constructorfuncties gebruiken dezelfde basisstructuur tussen instantie en prototype. Klassensyntaxis voegt regels toe: new is vereist, het lichaam is strikt, methoden zijn niet opsombaar en privéleden zijn beschikbaar. typeof Rectangle is bij beide vormen "function".

Arrays vinden map op Array.prototype; stringmethoden komen van String.prototype. Voeg geen eigen methoden toe aan ingebouwde prototypes: bibliotheken en toekomstige standaarden kunnen dezelfde namen voor ander gedrag gebruiken. Het bestaande gebruik van flatten door een bibliotheek heeft ertoe bijgedragen dat de standaardarraymethode flat werd genoemd.

Een gewone toewijzing aan een gegevenseigenschap maakt of wijzigt een eigen eigenschap, maar een overgeërfde setter kan de toewijzing onderscheppen. Het prototype van een bestaand object wijzigen met Object.setPrototypeOf is toegestaan maar kan de prestaties schaden; kies het prototype wanneer je het object maakt.

Een ES-module heeft een eigen bereik. Declaraties op het hoogste niveau blijven binnen het bestand, tenzij ze worden geëxporteerd. Importeurs vragen specifieke functionaliteit op, waardoor afhankelijkheden zichtbaar worden zonder alles in globale variabelen te plaatsen.

Gebruik de juiste import bij de export

// geometry.js
export const round2 = (n) => Math.round(n * 100) / 100;
export function circleArea(r) {
  return Math.PI * r * r;
}

// shapes.js
import { circleArea, round2 } from "./geometry.js";
export default class Circle {
  constructor(r) { this.r = r; }
  area() { return round2(circleArea(this.r)); }
}

// main.js
import Circle from "./shapes.js";
console.log(new Circle(3).area()); // 28.27

De startmodule importeert één klasse. De module van de klasse importeert twee hulpfuncties. Bij een straal van 3 cm is de oppervlakte ongeveer 28,274 cm²; de afrondingsfunctie geeft 28,27. De startmodule krijgt niet automatisch toegang tot de hulpfuncties die binnen een andere module worden gebruikt.

Een module kan veel benoemde exports hebben, maar hoogstens één standaardexport. Benoemde imports gebruiken de geëxporteerde naam tussen accolades; de lokale naam voor een standaardimport wordt door de importeur gekozen. Met import { Circle } vraag je de standaardexport niet op, ook niet als de geëxporteerde klasse Circle heet.

Hernoem, groepeer en herexporteer

import { circleArea as areaOfCircle } from "./geometry.js"; geeft geïmporteerde functionaliteit een andere lokale naam. export { circleArea as area }; wijzigt de geëxporteerde naam. Een exportlijst kan ook declaraties beschikbaar maken die eerder in het bestand zijn gedaan.

import * as geometry from "./geometry.js"; maakt een modulenaamruimteobject. Roep geometry.circleArea(3) aan. Een naamruimte bevat een standaardexport onder de eigenschap default als de module er een heeft.

Een bestand kan exports van andere bestanden verzamelen: export { circleArea } from "./geometry.js"; geeft een benoemde export door. export * from "./geometry.js"; geeft benoemde exports door, maar niet de standaardexport van die module.

Begrijp gedeelde uitvoering en actuele bindingen

Modules worden in strikte modus uitgevoerd en hebben undefined als this op het hoogste niveau. Afhankelijkheden worden uitgevoerd vóór het eigen lichaam van de importerende module. Als verschillende bestanden dezelfde opgeloste module importeren, hergebruiken ze één uitgevoerde module en haar toestand.

Stel dat een module let count = 0 exporteert en increment() die waarde wijzigt. Nadat een importeur increment() heeft aangeroepen, geeft de geïmporteerde count bij het lezen 1. Imports zijn actuele bindingen, geen momentopnamen. De importeur kan de binding zelf niet opnieuw toewijzen. Als een export een object is, kun je nog wel een eigenschap van dat object wijzigen en zien andere importeurs die wijziging.

Houd statische importdeclaraties op het hoogste niveau van een module. Een statische import binnen een if of functie is een syntaxisfout; dynamische import() verzorgt het later laden. Neem .js op in relatieve ES-modulepaden voor browsers en Node.js: deze laders voegen de extensie niet toe. Een padfout of een onjuiste combinatie van benoemde import en standaardimport verhindert dat de module wordt geladen. Herstel daarom de import voordat je een fout zoekt in de code die daarna had moeten worden uitgevoerd.

Dezelfde ES-modulesyntaxis werkt in een browser en in Node.js. Elke omgeving moet nog steeds weten dat een bestand een module is en heeft een eigen manier om de gevraagde paden op te lossen.

Start een browsermodule

<script type="module" src="main.js"></script>

Laad alleen de startmodule met een scripttag. De imports halen de andere bestanden automatisch op. Modulescripts zonder async worden uitgesteld: ze worden uitgevoerd nadat de HTML is ontleed, in documentvolgorde. De pagina-elementen die ze gebruiken, zijn dan beschikbaar.

Maak de map via HTTP beschikbaar met een lokale server, zoals python3 -m http.server of npx serve, en open het localhostadres ervan. Als je de HTML vanaf schijf opent, mislukken moduleverzoeken meestal door de beveiligingsregels van de browser. De server moet JavaScript ook teruggeven met een geschikt MIME-type, zoals text/javascript.

Moduledeclaraties worden geen globale variabelen. Een inline eventhandler zoals onclick="save()" kan een functie die lokaal is voor een module niet vinden. Koppel de eventhandler in plaats daarvan vanuit JavaScript:

const button = document.querySelector("#save");
function save() { console.log("Saved"); }
button.addEventListener("click", save);

Los paden en pakketnamen op

De moduleaanduiding is de string die de module aanduidt. ./geometry.js is relatief ten opzichte van het importerende bestand; ../geometry.js gaat één map omhoog. Een pad dat met / begint, start bij de hoofdmap van de website, terwijl een volledige HTTPS-URL de complete locatie aangeeft.

Een naam zonder pad, zoals "date-fns", heeft geen padvoorvoegsel. Een browser kan er niet naar zoeken in node_modules. Een importmap vóór de modulescripts koppelt zo'n naam aan een URL. Een ontwikkelserver of bundler kan in plaats daarvan geïnstalleerde pakketten oplossen en voorbereiden voor de browser. Alleen een pakket installeren verandert de lader van de browser niet.

Maak het moduleformaat van Node.js expliciet

Node.js leest type uit de dichtstbijzijnde package.json in een bovenliggende map. Zonder expliciet type kunnen huidige versies ES-modulesyntaxis herkennen in een verder dubbelzinnig .js-bestand. Stel "type": "module" in een nieuw ES-moduleproject in, zodat hulpmiddelen het eens zijn over het bedoelde formaat. De extensies .mjs en .cjs gaan boven die instelling.

Met de drie bestanden uit het cirkelvoorbeeld en { "type": "module" } drukt node main.js 28.27 af. Dezelfde bestanden werken via een browsermodulescript dat via HTTP wordt aangeboden.

Herken CommonJS en ingebouwde modules

CommonJS is het oudere modulesysteem van Node.js. Het gebruikt require() om synchroon te laden en module.exports om waarden aan te bieden. Een ES-module kan module.exports van een CommonJS-pakket als standaardimport importeren. Huidige Node.js-versies kunnen ook synchrone ES-modulegrafen laden met require; await op moduleniveau in zo'n graaf verhindert synchroon laden.

Gebruik in een ES-module import { readFile } from "node:fs/promises"; voor een ingebouwde Node.js-module. require, module en __dirname zijn CommonJS-variabelen, geen globale variabelen van ES-modules. import.meta.url geeft de URL van de module; recente Node.js-versies bieden ook import.meta.dirname voor lokale bestandsmodules.

Als een importinstructie wordt afgewezen omdat die buiten een module staat, controleer dan de instelling van de lader: type="module" in browser-HTML, of het pakkettype of de extensie in Node.js.

Een statische import declareert een afhankelijkheid die nodig is bij het laden van een module. Dynamische import is een expressie: die begint te laden wanneer de uitvoering de expressie bereikt en geeft een promise terug. Gebruik dit voor functionaliteit die bij veel bezoeken niet nodig is.

Wacht op het naamruimteobject

const button = document.querySelector("#show-chart");
button.addEventListener("click", async () => {
  try {
    const { drawChart } = await import("./chart.js");
    drawChart(measurements);
  } catch (err) {
    console.error("Could not load the chart module", err);
  }
});

Hier zijn measurements de gegevens die de pagina heeft verzameld. De eerste klik laadt de grafiekmodule en roept haar geëxporteerde functie aan. Latere klikken hergebruiken de uitgevoerde module. De promise kan worden afgewezen bij een fout tijdens het laden of uitvoeren, dus vangt de eventhandler die af.

import("./chart.js").drawChart probeert een eigenschap van de promise te lezen, niet van de geladen module. Wacht op de promise of gebruik .then. Gebruik voor een standaardexport de eigenschap default van de naamruimte: const { default: Chart } = await import("./chart.js");. Anders dan een statische declaratie kan deze expressie binnen een functie of voorwaarde voorkomen en kan het pad tijdens de uitvoering worden berekend.

Wacht tijdens de initialisatie van een module

Een ES-module kan await op moduleniveau buiten een functie gebruiken:

const response = await fetch("./config.json");
export const config = await response.json();

Modules die afhankelijk zijn van deze module wachten totdat de uitvoering ervan is voltooid voordat hun eigen lichamen worden uitgevoerd. Onafhankelijke modules kunnen verdergaan. Een traag configuratieverzoek vertraagt daardoor de afhankelijke modules, niet noodzakelijk elk deel van het programma. Klassieke scripts en CommonJS staan await op moduleniveau niet toe; gebruik deze modulefunctie voor initialisatie die afhankelijke modules echt eerst nodig hebben.

Geef elke module één duidelijke taak

Een takenapplicatie kan deze grenzen gebruiken:

De gegevens- en opslagmodules importeren de gebruikersinterface niet. Je kunt ze testen en hergebruiken zonder pagina-elementen te maken. Als je berekeningen en opslag buiten eventhandlers houdt, zijn fouten ook gemakkelijker te vinden.

Privétoestand op het hoogste niveau wordt gedeeld tussen importeurs. In let nextId = 1; export function createId() { return nextId++; } blijft de variabele privé terwijl de functie gecontroleerde toegang biedt. Twee importeurs die de functie elk één keer aanroepen, krijgen 1 en 2, geen twee aparte tellers die bij 1 beginnen.

Beheers het werk tijdens het importeren

import "./setup.js"; is een import voor neveneffecten: die laadt en voert de module uit zonder lokale namen op te vragen. Neveneffecten kunnen nuttig zijn voor initialisatie, maar een herbruikbare module is gemakkelijker te testen wanneer die op het hoogste niveau functionaliteit definieert en haar functies het werk expliciet starten.

Een indexbestand of herexportverzamelbestand verzamelt herexports. Het kan een interface vereenvoudigen, maar grote herexportverzamelbestanden kunnen extra code binnenhalen en een cyclus verbergen. Een circulaire afhankelijkheid ontstaat wanneer modules rechtstreeks of via andere modules van elkaar afhankelijk zijn. Een cyclus kan werken, maar als je een binding leest voordat de exporterende module die initialiseert, ontstaat een ReferenceError. Verplaats gedeelde definities naar een derde module die beide kanten importeren om die afhankelijkheidscyclus te doorbreken.

npm is de pakketbeheerder die met Node.js wordt meegeleverd. De naam verwijst zowel naar een opdrachtregelprogramma als naar het openbare pakketregister. Een pakket is een map die wordt beschreven door package.json; de hoofdmap van een project is de map die dat bestand bevat.

Maak de projectbeschrijving

Voer node -v en npm -v uit om de geïnstalleerde hulpmiddelen te controleren. Ga naar de bedoelde projectmap voordat je npm init uitvoert. De interactieve opdracht stelt vragen; npm init -y accepteert de standaardwaarden. Bewerk daarna het bestand om het project te beschrijven.

{
  "name": "shape-lab",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "node src/main.js",
    "test": "node --test",
    "lint": "eslint ."
  },
  "dependencies": {},
  "devDependencies": {}
}

Dit is JSON, geen JavaScript-objectliteral. Sleutels en strings gebruiken dubbele aanhalingstekens. Commentaar en afsluitende komma's zijn ongeldig. Een ontleedfout kan npm stoppen voordat het een opdracht uitvoert.

De name bestaat uit kleine letters en is geschikt voor een URL; namen van gepubliceerde pakketten hebben maximaal 214 tekens. version beschrijft dit project, niet de Node.js-versie ervan. private: true voorkomt onbedoelde publicatie via npm. Met type: "module" laat je Node.js de .js-bestanden van het pakket als ES-modules laden.

Gepubliceerde pakketten kunnen main en exports gebruiken om toegangspunten voor hun gebruikers te definiëren. Een optionele vermelding engines, zoals { "node": ">=22" }, geeft de ondersteunde Node.js-versies aan. Lees die vereisten wanneer een project op een oudere installatie mislukt.

Gebruik scripts als takenmenu

npm run toont de beschikbare scripts. In dit voorbeeld voert npm run lint eslint . uit, voert npm start de applicatie uit en voert npm test de testrunner uit. start en test hebben deze korte vormen; andere taaknamen gebruiken normaal npm run.

npm voegt de map node_modules/.bin van het project tijdelijk toe aan het zoekpad voor opdrachten. Een lokaal geïnstalleerd hulpmiddel kan daardoor rechtstreeks op naam in een script worden opgenomen. Iedereen die het project gebruikt, voert hetzelfde vastgelegde hulpmiddel uit in plaats van afhankelijk te zijn van een globale installatie.

Extra argumenten volgen na --: npm run lint -- --fix geeft --fix door aan ESLint. Het script geeft de taak een vaste naam, ook als het team het achterliggende hulpmiddel verandert. Begin bij het veld scripts wanneer je leert werken met een onbekend project.

Lees versienummers

Semantische versienummering gebruikt MAJOR.MINOR.PATCH. Vanaf 2.4.1 wordt een compatibele foutoplossing 2.4.2; een compatibele functie wordt 2.5.0; een ingrijpende wijziging wordt 3.0.0. Een overstap naar een nieuwe majorversie kan wijzigingen vereisen in code die het pakket gebruikt. Vóór 1.0.0 bevindt een project zich in een vroege ontwikkelfase en kunnen uitgaven vrijer veranderen.

Voer af en toe een pakketopdracht uit

npx serve voert de geïnstalleerde opdracht uit als die lokaal beschikbaar is. Anders kan npx vragen om het pakket tijdelijk te downloaden en uit te voeren. Dit is handig voor een hulpmiddel dat geen permanente projectafhankelijkheid hoeft te worden. Controleer de exacte pakketnaam en de betrouwbaarheid van de code voordat je die installeert of uitvoert: pakketopdrachten en installatiescripts kunnen met jouw rechten worden uitgevoerd.

Een opdracht in de verkeerde map kan mislukken doordat package.json ontbreekt, of een installatie kan pakketbestanden op een onbedoelde plek maken. Controleer eerst de huidige map. Houd scripts begrijpelijk en vermijd opdrachttrucs die specifiek zijn voor één besturingssysteem wanneer het project op meerdere systemen moet werken.

Een afhankelijkheid is code waarop een project steunt. npm legt directe afhankelijkheden vast in package.json, installeert pakketten in node_modules en legt de exacte geïnstalleerde afhankelijkheidsboom vast in package-lock.json.

Scheid productcode van ontwikkeltools

npm install date-fns voegt een pakket voor de uitvoering toe aan dependencies. npm install --save-dev eslint voegt een ontwikkeltool toe aan devDependencies; -D is de korte vorm. Linters, codeopmakers, testrunners, bundlers en TypeScript horen normaal in de ontwikkellijst.

Wanneer een ander project een gepubliceerd pakket installeert, installeert npm de afhankelijkheden van dat pakket maar niet de ontwikkelafhankelijkheden. Een browserapplicatie kan uitvoeringsafhankelijkheden nog steeds in haar uiteindelijke bestanden bundelen, ook al is de buildtool zelf een devDependency.

npm install zonder pakketnaam installeert de afhankelijkheden die voor het project zijn vermeld. npm uninstall <package> verwijdert een pakket en de vermelding ervan. Na installatie van date-fns kunnen Node.js en buildtools import { format } from "date-fns"; oplossen. Een gewone browser heeft nog steeds een hulpmiddel nodig dat de naam oplost, zoals een importmap of ontwikkelserver.

Lees het toegestane bereik

De caret is de gebruikelijke standaard van npm. Voor versies vanaf 1.0.0 staat die compatibele minor- en patchupdates toe. Onder 1.0.0 is die strenger. Voor ^2.3.0 voldoen 2.3.5 en 2.9.0; 2.2.9 is te oud en 3.0.0 overschrijdt de majorgrens.

Een toegestaan bereik duidt niet één geïnstalleerde versie aan. Het vergrendelingsbestand doet dat wel, ook voor transitieve afhankelijkheden: de pakketten die de door jou gekozen pakketten nodig hebben.

Maak een installatie opnieuw

Deel package.json en package-lock.json met het project. Laat npm het vergrendelingsbestand onderhouden. De gegenereerde map node_modules kan opnieuw worden opgebouwd en is niet het bestand dat je moet delen.

Gebruik npm install tijdens de ontwikkeling wanneer vastgelegde afhankelijkheden mogen veranderen. Gebruik npm ci voor een schone, herhaalbare installatie: de opdracht vereist het vergrendelingsbestand, verwijdert een bestaande node_modules, installeert de vastgelegde boom en herschrijft geen van beide pakketbestanden. De opdracht mislukt als het pakketbestand en het vergrendelingsbestand niet overeenkomen. Herstel dat verschil bewust tijdens de ontwikkeling; het verwijderen van het vergrendelingsbestand kan ongemerkt veel versies veranderen.

Werk bij met een reden

npm outdated vergelijkt de huidige, toegestane en nieuwste versies. De toegestane versie is de nieuwste versie die binnen het gedeclareerde bereik valt; de nieuwste versie kan een majorversie daarbuiten zijn. npm update werkt bij binnen de bereiken en legt de resulterende boom vast. Om bewust een majorgrens over te steken, lees je de wijzigingsgeschiedenis, voer je npm install <package>@latest uit en controleer je het project met de tests.

Installeer projecthulpmiddelen lokaal zodat hun versies worden vastgelegd. Controleer voordat je een afhankelijkheid toevoegt het onderhoud, het gebruik, de licentie en of een ingebouwde functie het probleem al oplost. structuredClone() voorziet in de ondersteunde behoeften aan diepe kopieën; Intl.DateTimeFormat maakt datums op zonder datumpakket.

npm audit meldt bekende kwetsbaarheden in geïnstalleerde versies. Lees het rapport om de betreffende code en het gebruik ervan te begrijpen. npm audit fix kan compatibele oplossingen toepassen, maar bewijst niet dat elke kwetsbaarheid is opgelost of dat een update het gedrag van het project behoudt.

Een linter leest broncode zonder die uit te voeren en meldt waarschijnlijke fouten of riskante patronen. Een codeopmaker herschrijft de opmaak op een consistente manier. ESLint en Prettier werken vaak samen omdat die taken verschillende problemen oplossen.

Configureer de controles

npm init @eslint/config@latest stelt vragen over het project, installeert ontwikkelpakketten en maakt een configuratiebestand. Huidige ESLint-versies gebruiken vlakke configuratie, meestal in eslint.config.js.

import js from "@eslint/js";
import globals from "globals";

export default [
  js.configs.recommended,
  {
    languageOptions: { globals: globals.browser },
    rules: {
      eqeqeq: "error",
      "no-unused-vars": "warn",
    },
  },
];

De aanbevolen configuratie schakelt regels in die fouten opsporen. De globale browsernamen vertellen ESLint dat namen zoals document bestaan. Zo wordt een bestaande functie van de omgeving niet als een ongedefinieerde naam behandeld.

Meldingsniveaus van regels zijn "off", "warn" en "error", ook geschreven als 0, 1 en 2. Fouten veroorzaken een afsluitcode voor mislukking; alleen waarschuwingen laten de opdracht standaard niet mislukken. Een waarschuwing blijft informatie die je moet lezen, ook als het script succesvol eindigt.

Lees een lintrapport

function total(items) {
  let sum = 0;
  let unused = 5;
  for (const item of items) {
    if (item.quantity == "2") sum += item.price;
  }
  return summ;
}

Onder de bovenstaande configuratie levert dit vijf meldingen op. total wordt nooit gebruikt. sum wordt bijgewerkt, maar de waarde wordt buiten die bijwerkingen nooit gebruikt. unused wordt niet gebruikt. De regel eqeqeq markeert == en no-undef vindt de verkeerd gespelde naam summ. Een aanroep van deze functie zou bij die ongedefinieerde naam mislukken, maar de linter kan de fout zonder aanroep vinden.

Begin bij de regelnaam en locatie in het rapport. Corrigeer het bedoelde gedrag en voer de opdracht opnieuw uit. npm run lint -- --fix vraagt om veilige automatische oplossingen wanneer het project een script lint heeft. De opdracht kan niet voor elke waarschuwing de juiste bedrijfslogica bepalen. Schakel een regel alleen voor één regel code uit wanneer daar een reden voor is en leg die reden naast het commentaar vast.

Laat één codeopmaker de opmaak verzorgen

npm install --save-dev --save-exact prettier
npx prettier . --write
npx prettier . --check

--write wijzigt bestanden; --check meldt verschillen in opmaak zonder de bestanden te wijzigen. Met de standaardinstellingen wordt const point={x:1,y:2} omgezet in const point = { x: 1, y: 2 };. Opties zoals "singleQuote": true komen in .prettierrc.

De aanbevolen regels van ESLint schrijven de opmaak van Prettier niet voor, zodat die configuratie opmaakconflicten voorkomt. Als een andere ESLint-configuratie conflicterende stijlregels toevoegt, schakelt eslint-config-prettier die regels uit. Als je twee concurrerende codeopmakers uitvoert, kunnen bestanden steeds heen en weer veranderen.

Voeg scripts lint en format toe zodat controles gemakkelijk te herhalen zijn. Editorextensies kunnen na configuratie tijdens het typen meldingen tonen en bij het opslaan opmaken. Beide hulpmiddelen slaan node_modules standaard over; voeg gegenereerde uitvoer zoals dist toe aan de juiste negeerinstellingen. Een functie zonder lintmeldingen kan nog steeds de omtrek berekenen terwijl die de oppervlakte moet berekenen; gedrag heeft tests nodig.

Een browser kan enkele ES-modules rechtstreeks laden, maar grotere projecten gebruiken ook geïnstalleerde pakketten en bestanden die transformatie nodig hebben. Een ontwikkelserver bereidt bestanden voor terwijl je bewerkt. Een bundler volgt afhankelijkheden om bestanden te maken die geschikt zijn voor uitgave.

Doorloop de Vite-cyclus

npm create vite@latest shape-lab
cd shape-lab
npm install
npm run dev
npm run build
npm run preview

Kies voor dit project het JavaScript-sjabloon Vanilla. De generator levert ontwikkel- en buildscripts. npm run dev toont een lokaal adres, vaak http://localhost:5173. Open dat adres tijdens het bewerken. In Vite is index.html het toegangspunt en laadt dit bestand doorgaans /src/main.js met een modulescript.

De ontwikkelserver lost pakketnamen op en transformeert bestanden waar nodig. Als je een bestand opslaat, wordt een update gestart. Modulevervanging tijdens uitvoering, of HMR, vervangt een gewijzigde module in de actieve pagina; bij ondersteunde updates kan de toestand behouden blijven zonder een volledige herlaadactie af te dwingen.

npm run build schrijft geoptimaliseerde uitvoer naar dist. npm run preview maakt die uitvoer lokaal beschikbaar zodat je de daadwerkelijke productiebuild kunt controleren. Voor de voorbeeldweergave is een bestaande build nodig; er wordt geen nieuwe gemaakt. Bewerk bronbestanden, want een volgende build vervangt de gegenereerde uitvoer.

Begrijp de wijzigingen voor productie

Een hulpmodule kan bijvoorbeeld zowel formatArea als formatVolume exporteren. Als alleen formatArea wordt gebruikt en het veilig is om de andere code te verwijderen, kan de verwijdering van ongebruikte code formatVolume weglaten. Statische imports en exports maken afhankelijkheden zichtbaar. Neveneffecten op het hoogste niveau van een module moeten mogelijk blijven bestaan, ook als geen van de exports wordt gebruikt.

Een dynamische import() geeft de buildtool een grens aan voor later laden. Buildtools kunnen hiervoor aparte stukken maken; de indeling hangt af van de build, dus wordt een bronmodule niet altijd precies één uitvoerbestand.

Een naam zoals assets/index-4f2a9c1b.js verandert met de inhoud, zodat browsers bestanden lang kunnen cachen zonder na een update een oud bestand aan te bieden. Een sourcemap verbindt gegenereerde locaties met de oorspronkelijke bronregels, wat aanroepsporen en debuggen gemakkelijker maakt wanneer sourcemaps beschikbaar zijn.

Neem assets en openbare configuratie op

Vite verwerkt ook assets: import "./style.css"; neemt stijlen op en import logoUrl from "./logo.png"; levert de uiteindelijke URL van de afbeelding. De build kan die verwijzingen bijwerken zodat ze overeenkomen met gegenereerde bestandsnamen.

Lees modusinformatie via import.meta.env.MODE. De standaardwaarden zijn "development" voor ontwikkeling en "production" voor een build; een eigen modus kan een andere naam gebruiken. Eigen omgevingswaarden die met VITE_ beginnen, worden standaard beschikbaar gemaakt aan browsercode. Alles wat naar de browser wordt verstuurd, is openbaar: bewaar geheime sleutels en wachtwoorden op een server, buiten browsercode en beschikbaar gemaakte omgevingsvariabelen.

Controleer niet alleen de ontwikkelpagina. Maak vóór een uitgave een build en bekijk die om problemen in getransformeerde uitvoer en assetpaden te vinden. dist/index.html rechtstreeks vanaf schijf openen geeft niet dezelfde situatie als de site via HTTP aanbieden. Een kleine pagina met enkele gewone modules heeft mogelijk alleen een statische server nodig, zonder volledige buildtool.

Een geautomatiseerde test voert code uit met bekende invoer en controleert het resultaat met asserties. Een unittest richt zich op een klein onderdeel, zoals een functie of methode. De testrunner vindt tests, voert ze uit, meldt fouten en eindigt zonder succes wanneer een test mislukt.

Voorbereiden, uitvoeren, controleren

Bereid de invoer voor, roep de code aan en controleer het verwachte resultaat. Een bruikbare testnaam beschrijft gedrag. Voor een rechthoekklasse waarvan de constructor een negatieve zijde afwijst:

import { test } from "node:test";
import assert from "node:assert/strict";
import { Rectangle } from "./rectangle.js";

test("area multiplies width by height", () => {
  assert.equal(new Rectangle(3, 4).area(), 12);
});
test("rejects a negative width", () => {
  assert.throws(() => new Rectangle(-1, 4), RangeError);
});

De eerste assertie controleert 12 cm², een onafhankelijk bekend resultaat. De tweede geeft een functie door aan assert.throws, zodat de assertie de fout kan waarnemen. Als je node --test uitvoert, worden bestanden met namen zoals rectangle.test.js gevonden; een pakketscript "test": "node --test" maakt npm test mogelijk.

De strikte assertiemodus gebruikt Object.is voor assert.equal zonder impliciete typeconversie. assert.deepEqual vergelijkt de inhoud van objecten en arrays. Verschillende arrays met dezelfde waarden zijn niet hetzelfde object, dus is een strikte identiteitsvergelijking niet de juiste controle voor gelijke inhoud.

Gebruik dezelfde principes in Vitest

import { describe, it, expect } from "vitest";
import { Rectangle } from "./rectangle.js";

describe("Rectangle", () => {
  it("computes the area", () => {
    expect(new Rectangle(3, 4).area()).toBe(12);
  });
  it("rejects a negative width", () => {
    expect(() => new Rectangle(-1, 4)).toThrow(RangeError);
  });
});

Vitest gebruikt describe om te groeperen en it voor afzonderlijke tests. Voer npx vitest uit om op wijzigingen te letten, of npx vitest run voor één uitvoering. Jest biedt een vergelijkbare stijl. Gebruik toEqual voor inhoud en toBe voor identiteit of primitieve waarden.

Neem grenzen en numerieke beperkingen mee

Test de exacte eindpunten van een toegestaan bereik en invoer die daar net buiten valt. Een thermostaat die 10 tot en met 30 °C accepteert, heeft tests nodig die 10 en 30 accepteren en tests die 9,5 en 30,5 afwijzen. Voeg aparte controles toe voor niet-numerieke en niet-eindige waarden als de interface die afwijst. Tests mogen niet afhangen van een object dat door een eerdere test is gewijzigd of van de uitvoeringsvolgorde.

Rekenen met drijvendekommagetallen komt mogelijk niet exact overeen met een geschreven decimaal getal: 0.1 + 0.2 is 0.30000000000000004. Gebruik voor een geschikte tolerantie assert.ok(Math.abs(actual - expected) < 1e-9). Een cirkel met straal 3 heeft een oppervlakte van ongeveer 28,274333882 cm²; Vitests toBeCloseTo(28.27, 2) controleert of de waarde bij die decimale precisie dichtbij genoeg ligt. Kies een tolerantie die past bij wat de test moet vaststellen.

Leer van een mislukte test

Lees het genoemde gedrag, de verwachte en werkelijke waarden en de locatie in de broncode. Bepaal of de implementatie of de verwachting van de test fout is. Bij testgestuurde ontwikkeling schrijf je een test die mislukt, implementeer je genoeg om die te laten slagen en verbeter je daarna de code terwijl de tests blijven slagen.

Exporteer logica uit modules en geef invoer door als argumenten. Een eventhandler kan dan paginagegevens verzamelen en die logica aanroepen, in plaats van berekeningen met DOM-werk te vermengen. Code die afhankelijk is van het DOM kan een gesimuleerde browser zoals jsdom gebruiken. Wacht in een asynchrone test op asynchroon werk, zodat de test niet kan eindigen voordat de controles zijn uitgevoerd. Een test die alleen de formule van de implementatie herhaalt, kan ook de fout daarin herhalen; gebruik verwacht gedrag en onafhankelijke voorbeelden.

TypeScript voegt statische typesyntaxis toe aan JavaScript. Een type beschrijft wat voor soort waarde code verwacht. De typecontrole gebruikt die beschrijvingen voordat het programma wordt uitgevoerd, zodat fouten aan het licht kunnen komen voordat een gebruiker ermee te maken krijgt.

Controleer een aanroep vóór de uitvoering

function area(width: number, height: number): number {
  return width * height;
}
area(3, "4"); // type error: the second argument is a string

Beide parameters moeten getallen zijn. De geschreven waarde "4" is een string, dus meldt de typecontrole dat de typen niet overeenkomen. Gewoon JavaScript zou die string bij de vermenigvuldiging impliciet converteren: 3 * "4" geeft 12. Bij optellen geeft 3 + "4" de string "34". Een typefout duidt aan dat de bedoelde invoer niet overeenkomt, ook wanneer JavaScript de expressie zou kunnen uitvoeren.

Een interface beschrijft de structuur van een object:

interface Shape {
  name: string;
  area(): number;
}

Een klasse die met implements Shape is gedeclareerd, moet de opgegeven eigenschappen en methoden met compatibele typen aanbieden. De typecontrole kan ook verkeerd gespelde eigenschappen, een onjuist aantal argumenten en mogelijke undefined-waarden opsporen wanneer strikte controle is ingeschakeld.

Scheid controleren van het verwijderen van typen

TypeScript-projectinstellingen staan in tsconfig.json. Een Vite-build stelt op zichzelf niet vast dat alle typen correct zijn. Projecten voeren tsc --noEmit meestal afzonderlijk uit. Huidige Node.js-versies kunnen ondersteunde .ts-bestanden rechtstreeks uitvoeren, maar ook bij het verwijderen van typesyntaxis worden de typen niet gecontroleerd.

Behoud controles tijdens de uitvoering aan gegevensgrenzen

Typeannotaties worden vóór de uitvoering verwijderd. Het verwachte type declareren van gegevens uit fetch() of JSON.parse() controleert de werkelijke waarde niet. Controleer externe gegevens in de draaiende code voordat je erop vertrouwt. Een server kan een string sturen ook als een typedeclaratie zegt dat een veld numeriek is.

TypeScripts private en readonly zijn beperkingen van de typecontrole; ze bieden niet de afscherming die JavaScripts # tijdens de uitvoering biedt. Privévelden van JavaScript blijven afgedwongen wanneer het programma draait. TypeScript laat een programma ook niet sneller draaien en bewijst niet dat berekeningen correct zijn.

Het type any schakelt nuttige controles voor een waarde uit. Het kan een foutmelding onderdrukken terwijl de oorspronkelijke fout blijft bestaan. Een onjuiste aanname corrigeren of een echte gegevenscontrole toevoegen geeft de typecontrole betere informatie.

Voer TypeScript in beheersbare stappen in

Een JavaScript-bestand kan beginnen met // @ts-check en JSDoc gebruiken zoals /** @param {number} width */ om controles te krijgen in editors die dit ondersteunen, zonder een .ts-bestand te worden. Een project kan later bestanden één voor één hernoemen. Bibliotheken kunnen typedefinities in .d.ts-bestanden leveren; definities van de gemeenschap worden vaak verspreid onder @types/....

Grotere, lang bestaande projecten krijgen duidelijkere interfaces, veiliger herstructurering en betere automatische aanvulling in de editor. Voor een klein script zijn een extra buildstap en nieuwe syntaxis misschien nog niet de moeite waard. Tests blijven in beide gevallen nuttig: een oppervlaktefunctie met correcte typen kan nog steeds een verkeerde numerieke berekening teruggeven.

Een bibliotheek levert code die je programma aanroept. Een framework biedt een applicatiestructuur en roept je code op de juiste momenten aan. Deze verandering in de aansturing helpt grotere interfaces te coördineren, maar steunt nog steeds op JavaScript, modules en een gereedschapsketen voor het project.

Deel een interface in componenten in

React, Vue, Svelte en Angular organiseren gebruikersinterfaces met componenten: herbruikbare onderdelen zoals een navigatiebalk of een taak. Een component combineert opmaak en gedrag, vaak met stijlen. Wanneer de toestand van een component verandert, coördineert het gebruikersinterfacesysteem de relevante updates van de pagina.

Metaframeworks zoals Next.js, Nuxt, SvelteKit en Astro voegen een uitgebreidere inrichting toe, waaronder routering, renderen op de server en buildondersteuning. Hun precieze functies verschillen. Kennis van JavaScript-functies, events, asynchrone code en modulegrenzen helpt bij het leren van elk van deze frameworks.

Een pagina met enkele onafhankelijke interactieve functies kan met gewoon JavaScript overzichtelijk zijn. Een framework wordt nuttig wanneer veel weergaven veranderende gegevens moeten delen. Kies het voor die behoefte in plaats van aan te nemen dat elke pagina de grootste gereedschapsketen vereist.

Volg hoe de hulpmiddelen samenwerken

Frameworkpakketten worden via npm geïnstalleerd en als modules geïmporteerd. Buildtools transformeren syntaxis zoals JSX of frameworkspecifieke bestanden. TypeScript kan interfaces tussen onderdelen controleren. Linten, opmaken en testen behouden hun eigen taken, ongeacht de keuze voor de gebruikersinterface.

Begin een eenvoudig project en voeg de hulpmiddelen toe die het team gebruikt:

npm create vite@latest shape-lab
cd shape-lab
npm install
npm install --save-dev eslint @eslint/js globals prettier vitest

Een Vite-sjabloon levert ontwikkel- en buildtools. Extra pakketten installeren configureert ze niet: voeg de ESLint-configuratie toe, maak tests en stel editorextensies in om bij het opslaan te linten en op te maken. Een scriptsveld kan deze taken aanbieden:

{
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint .",
  "format": "prettier . --write",
  "test": "vitest run"
}

Deze vermeldingen horen binnen "scripts" in package.json. Voer tijdens het bewerken npm run dev uit; de editor kan linten en opmaken wanneer bestanden veranderen. Voer npm test uit voordat je werk deelt. Voer vóór een uitgave npm run build en npm run preview uit. De gebouwde map dist van een statische site kan daarna naar een geschikte statische host worden geüpload.

Zoek het bestand dat een taak bepaalt

Begin bij een onbekend project met package.json: de scripts laten zien hoe het project wordt uitgevoerd en de afhankelijkheidslijsten tonen welke hulpmiddelen die scripts nodig hebben. Gegenereerde mappen kunnen opnieuw worden gemaakt; instellingen en broncode verklaren hoe je dat doet.

Leer nieuwe hulpmiddelen één voor één, zodat een fout nog een herkenbare oorzaak heeft. Gebruik de officiële documentatie voor de geïnstalleerde versie wanneer opdrachten of standaardinstellingen verschillen, omdat uitgaven van hulpmiddelen en frameworks vaker veranderen dan de basissyntaxis van JavaScript.