Moduły: import i export
Proszę dzielić kod na moduły ES za pomocą nazwanych i domyślnych eksportów, importować wybrane elementy oraz zrozumieć, jak bundlery modułów rozwiązują graf zależności.
Moduły: import i export to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego moduły?
Zanim pojawiły się moduły, cały JavaScript działał w zakresie globalnym. Zmienne kolidowały ze sobą. Kolejność kodu miała znaczenie. Pliki musiały być ładowane w określonej kolejności. Moduły ES zapewniają każdemu plikowi własny zakres, jawne importy i eksporty możliwe do optymalizacji za pomocą tree shakingu.
Eksporty nazwane
Eksportuj określone wartości za pomocą słowa kluczowego export. Plik może zawierać wiele eksportów nazwanych. Kod korzystający z modułu importuje dokładnie to, czego potrzebuje.
// utils.js
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export class Vector {
constructor(x, y) { this.x = x; this.y = y; }
}Importy nazwane
Importuj nazwane eksporty za pomocą nawiasów klamrowych. W jednej instrukcji można importować wiele eksportów z jednego modułu.
import { PI, add, Vector } from './utils.js';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5Eksporty domyślne
Każdy moduł może mieć jeden eksport domyślny — zazwyczaj jest nim najważniejszy element udostępniany przez moduł. Importuj go bez nawiasów klamrowych i nadaj mu dowolną nazwę.
// Button.js
export default function Button({ label }) {
return `<button>${label}</button>`;
}
// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name worksPonowne eksportowanie
Moduł może ponownie eksportować elementy z innych modułów, tworząc plik barrel — pojedynczy punkt wejścia, który ponownie eksportuje wiele elementów.
// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';
// Consumer:
import { Button, Input, Modal } from './components';Importy przestrzeni nazw
Importuj wszystko z modułu do obiektu przestrzeni nazw za pomocą import * as name. Jest to przydatne, gdy potrzebujesz wielu eksportów lub chcesz jawnie wskazać ich pochodzenie.
import * as utils from './utils.js';
console.log(utils.PI); // 3.14159
console.log(utils.add(1, 2)); // 3Importy wyłącznie dla efektów ubocznych
Niektóre moduły są importowane wyłącznie ze względu na efekty uboczne (polyfill, rejestrowanie programów obsługi zdarzeń). Importuj je bez tworzenia powiązania.
import './polyfills.js'; // runs the code, imports nothingDynamiczny import() — dzielenie kodu
Funkcja dynamiczna import() zwraca Promise. Używaj jej do leniwego ładowania modułu — tylko wtedy, gdy jest potrzebny. Bundlery automatycznie tworzą osobny chunk dla modułów importowanych dynamicznie.
// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
const { processFile } = await import('./fileProcessor.js');
processFile(data);
});import.meta
import.meta to specjalny obiekt dostępny wewnątrz modułów. import.meta.url to adres URL modułu. Vite używa import.meta.env do przechowywania zmiennych środowiskowych.
// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'Rozwiązywanie modułów
Bundlery, takie jak Vite, znajdują moduły w systemie plików (ścieżki względne, takie jak './utils'), w node_modules ('lodash') lub za pomocą aliasów ścieżek ('@/components' skonfigurowanych w vite.config.js).
CommonJS a moduły ES
Początkowo Node.js używał CommonJS (require / module.exports). Przeglądarka używa modułów ES (import / export). Nowoczesny Node.js również obsługuje moduły ES po dodaniu type: "module" w package.json.
// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };
// ES Modules (modern):
import fs from 'fs';
export { myFunc };Szybkie sprawdzenie
Jaka jest główna zaleta używania dynamic import() zamiast importu statycznego?
Podsumowanie: moduły ES
Eksporty i importy nazwane służą do obsługi wielu wartości. Eksport i import domyślny służą do obsługi głównego elementu modułu. Ponowne eksporty tworzą pliki barrel. Dynamiczny import() umożliwia leniwe ładowanie i dzielenie kodu. import.meta udostępnia metadane modułu. Bundlery rozwiązują aliasy, moduły z node_modules i ścieżki względne.
Często zadawane pytania
Czy lekcja „Moduły: import i export” jest bezpłatna?
Tak — pełny tekst „Moduły: import i export” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Moduły: import i export”?
Proszę dzielić kod na moduły ES za pomocą nazwanych i domyślnych eksportów, importować wybrane elementy oraz zrozumieć, jak bundlery modułów rozwiązują graf zależności. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Moduły: import i export”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Metody tablic: map, filter, reduce, find
- Destrukturyzacja obiektów i spread
- Literały szablonowe i optional chaining
- Moduły: import i export