js/main.js ir js/config.js — pirmieji moduliai

Dabar — JavaScript. Kodo stulpelyje — abu pirmieji moduliai (naudok skirtukus): js/main.js importuoja iš js/config.js ir įrašo tekstą į puslapį. To pakanka įrodyti, kad platforma veikia be jokių įrankių.

config.js — viena vieta visoms konstantoms:

// js/config.js — konfigūracija vienoje vietoje.
export const API_KEY = 'DEMO_KEY';   // gauk savo nemokamą raktą: https://api.nasa.gov
export const API_URL = 'https://api.nasa.gov/planetary/apod';

export padaro reikšmę matomą kitiems failams; import ją paima. Tai ir yra ES moduliai — kalbos dalis, veikianti naršyklėje tiesiogiai, be bundlerio. (Pradedame nuo DEMO_KEY; savo raktą ir kodėl jo reikia nagrinėsime 4 pamokoje.)

Paleisk per serverį. ES moduliai naršyklėje atsisiunčiami (fetch), tad puslapį reikia serviruoti per http, ne atidaryti kaip failą. Paprasčiausias būdas be jokio npm — Python (jis jau yra daugumoje sistemų):

cd vanilla
python -m http.server 8000
# atidaryk http://localhost:8000

(Arba VS Code „Live Server" plėtinys — dešiniu pelės mygtuku ant index.html → „Open with Live Server".)

Patikrink. Naršyklėje http://localhost:8000 turėtum matyti:

Cosmos is running. It will fetch pictures from https://api.nasa.gov/planetary/apod

Jei matai šį sakinį — turi veikiantį HTML, CSS ir JavaScript modulį, kuris importavo kitą modulį. Be jokių surinkimo įrankių.

Spąstai (moduliai reikalauja serverio). Dvigubu spustelėjimu atidaryk index.html tiesiai iš failų naršyklės — adresas taps file:///…/index.html. Puslapis neveiks, o naršyklės konsolėje (F12) pamatysi CORS klaidą:

Access to script at 'file:///…/js/main.js' from origin 'null'
has been blocked by CORS policy

Priežastis: type="module" scriptą naršyklė atsisiunčia, o file:// kilmė yra „null" — saugumo politika ją blokuoja. Tai pirmasis platformos apribojimas, į kurį atsimuši. Sprendimas paprastas — serviruok per http (kaip aukščiau). „Kodėl neveikia?" akimirka, kurią verta pajusti kartą, kad daugiau nekankintų.