Frontend Academy · Oppitunti

ES-moduulit: import, export ja dynamic import

Käytä nimettyjä ja oletusvientejä sekä namespace-tuonteja ja lataa koodia lazy loading -periaatteella suorituskyvyn parantamiseksi dynamic import() -toiminnolla

Oppitunti 1/413 vaihetta

ES-moduulit: import, export ja dynamic import on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Kertaus: ES-moduulien perusteet

ES-moduulit antavat jokaiselle tiedostolle oman näkyvyysalueen. Nimetyt viennit jakavat tiettyjä arvoja, kun taas oletusviennit jakavat pääarvon. Bundleri tai selain selvittää tuonnit latauksen aikana.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Tree shaking — miksi nimetyt viennit ovat tärkeitä

Bundlerit (Rollup, esbuild, Vite) poistavat käyttämättömät viennit. Jos tuotte vain { formatDate }-viennin, bundleri poistaa kaiken muun paketista. Nimetyt viennit mahdollistavat tree shakingin; import * as utils voi estää sen.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

Dynaaminen import() — laiska lataus

Dynaaminen import() palauttaa Promisen. Moduuli noudetaan vasta, kun koodi suoritetaan. Bundlerit jakavat nämä automaattisesti erillisiksi paloiksi.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

Dynaaminen import virheenkäsittelyllä

Ympäröikää dynaamiset importit try/catch-rakenteella, jotta verkkohäiriöt tai puuttuvat moduulit voidaan käsitellä hallitusti.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta sisältää nykyisen moduulin metatietoja. Tärkeitä ominaisuuksia ovat import.meta.url (absoluuttinen URL), import.meta.env (Viten ympäristömuuttujat) ja import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Moduulin suoritus — kerran

ES-moduulit arvioidaan kerran riippumatta siitä, kuinka monta kertaa niitä tuodaan. Kaikki saman moduulin tuonnit käyttävät samaa instanssia. Siksi moduulit sopivat erinomaisesti singletonien, kuten storejen ja tapahtumaväylien, toteuttamiseen.

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Sykliset riippuvuudet

Kaksi moduulia voi tuoda toisensa. JavaScript käsittelee tämän, mutta arvot voivat olla ensimmäisellä käyttökerralla undefined-arvoja arviointijärjestyksen vuoksi. Useimmissa tapauksissa rakennetta kannattaa muuttaa syklien välttämiseksi.

Vain tyyppien tuonti TypeScriptissä

Käyttäkää import type { ... }-lausetta vain tyyppien tuomiseen. Ne poistetaan käännösaikana eivätkä koskaan päädy tulospakettiin. Näin voitte välttää pelkistä tyyppiviittauksista aiheutuvat sykliset riippuvuudet.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Uudelleenvienti ja barrel-tiedostot

Barrel-tiedosto vie uudelleen useista moduuleista ja luo kätevän yhden tuontipisteen. Olkaa suurissa sovelluksissa varovaisia barrel-tiedostojen kanssa — ne voivat haitata tree shakingia.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

Script type=module selaimessa

Lisätkää script-tagiin type="module", jotta ES-moduulien syntaksia voi käyttää suoraan selaimessa — ilman bundleria. Moduulit viivästetään oletusarvoisesti, ja niillä on oma näkyvyysalueensa.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

CommonJS:n ja ESM:n yhteentoimivuus

Node.js tukee molempia. ESM-tiedostot käyttävät .mjs-päätettä, tai package.json-tiedostossa asetetaan "type": "module". Kun CommonJS-paketteja käytetään ESM:stä, oletusvienti on module.exports-arvo. Bundlerit käsittelevät tämän läpinäkyvästi.

Pikatesti

Mikä on nimettyjen vientien tärkein suorituskykyetu verrattuna yhteen oletusvientiin, joka sisältää objektin?

Vastaa interaktiivisessa oppitunnissa

Kertaus: ES-moduulit perusteellisesti

Moduulit suoritetaan kerran, ja kaikki tuojat jakavat saman instanssin. Tree shaking poistaa käyttämättömät nimetyt viennit. Dynaaminen import() mahdollistaa laiskan latauksen ja koodin jakamisen. import.meta tarjoaa moduulin kontekstin. Barrel-tiedostot ovat käteviä, mutta voivat haitata tree shakingia. TypeScriptin vain tyyppien tuonnit eivät tuota tulostetta.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”ES-moduulit: import, export ja dynamic import” ilmainen?

Kyllä – oppitunnin ”ES-moduulit: import, export ja dynamic import” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”ES-moduulit: import, export ja dynamic import”?

Käytä nimettyjä ja oletusvientejä sekä namespace-tuonteja ja lataa koodia lazy loading -periaatteella suorituskyvyn parantamiseksi dynamic import() -toiminnolla Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”ES-moduulit: import, export ja dynamic import”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

ES-moduulit: import, export ja dynamic import
npm ja package.json: riippuvuudet ja skriptit
Vite: kehityspalvelin ja build
Paketoinnin perusteet: tree shaking ja koodin jako

← Takaisin: Frontend Academy