ES-MODULER · IMPORT OCH EXPORT

En fil, ett jobb

Dela upp koden i små filer med ett ansvar var. Den blir lättare att läsa, återanvända och felsöka, och variabler i olika filer krockar inte med varandra.

math.js

export gör något synligt utanför filen. Allt annat stannar inne.

export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

main.js

import hämtar det du behöver. Sökvägen börjar med ./ och slutar på .js.

import { add, PI } from "./math.js";

console.log(add(2, 3));

index.html

Utan type="module" fungerar inte import. Bara huvudfilen länkas in.

<script type="module"
  src="main.js"></script>
ES-MODULER1 / 2

ES-MODULER · EXTERNA BIBLIOTEK

Kod som någon annan skrivit

Node och npm

Node kör JavaScript utanför webbläsaren. npm är dess pakethanterare. Paketen hamnar i mappen node_modules.

npm install canvas-confetti

Därför funkar det inte direkt

Webbläsaren vet inte vad node_modules är. Den förstår bara sökvägar och URL:er, inte bara ett paketnamn.

import confetti from "canvas-confetti";
// fel i webbläsaren

Lösning 1: CDN

Finns biblioteket på ett CDN importerar du det med en URL. Inget att installera.

import confetti from
  "https://esm.sh/canvas-confetti@1.9.4";

Lösning 2: bundler, t.ex. Vite

En bundler letar upp paketen i node_modules och packar ihop allt till filer webbläsaren förstår. Vite gör det, och ger en dev-server på köpet.

npm create vite@latest
npm run dev
ES-MODULER2 / 2