Moduły ES: import, export i dynamic import
Proszę używać nazwanych i domyślnych eksportów oraz importów przestrzeni nazw, a także leniwie ładować kod za pomocą dynamic import() w celu poprawy wydajności.
Moduły ES: import, export i dynamic import to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 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.
Powtórka: podstawy modułów ES
Moduły ES zapewniają każdemu plikowi własny zakres. Eksporty nazwane udostępniają konkretne wartości, a eksport domyślny udostępnia główną wartość. Bundler lub przeglądarka rozwiązuje importy podczas ładowania.
// 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 — dlaczego eksporty nazwane mają znaczenie
Bundlery (Rollup, esbuild, Vite) usuwają nieużywane eksporty. Jeśli zaimportujesz tylko { formatDate }, bundler usunie całą resztę z pakietu. Eksporty nazwane umożliwiają tree shaking, natomiast import * as utils może mu przeszkodzić.
// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunkDynamiczne import() — leniwe ładowanie
Dynamiczne import() zwraca Promise. Moduł jest pobierany dopiero w chwili wykonania kodu. Bundlery automatycznie dzielą takie importy na osobne fragmenty.
// 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);Dynamiczne import() z obsługą błędów
Dynamiczne importy należy umieszczać w konstrukcji try/catch, aby poprawnie obsługiwać awarie sieci lub brakujące moduły.
try {
const module = await import('./optional-feature.js');
module.activate();
} catch (err) {
console.warn('Optional feature unavailable:', err.message);
}import.meta
import.meta zawiera metadane bieżącego modułu. Najważniejsze właściwości to: import.meta.url (bezwzględny adres URL), import.meta.env (zmienne środowiskowe Vite), 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;Wykonanie modułu — tylko raz
Moduły ES są analizowane tylko raz, niezależnie od liczby ich importów. Wszystkie importy tego samego modułu współdzielą tę samą instancję. Dzięki temu moduły świetnie nadają się do implementowania singletonów (store'ów, magistral zdarzeń).
// 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 instanceZależności cykliczne
Dwa moduły mogą importować się wzajemnie. JavaScript obsługuje taką sytuację, ale przy pierwszym użyciu wartości mogą być niezdefiniowane ze względu na kolejność wykonywania. W większości przypadków należy zmienić strukturę kodu, aby uniknąć cykli.
Importy tylko typów w TypeScript
Użyj import type { ... }, aby importować wyłącznie typy. Są one usuwane podczas kompilacji i nigdy nie pojawiają się w wynikowym pakiecie. Stosuj je, aby unikać zależności cyklicznych powodowanych odwołaniami używanymi tylko w typach.
import type { User } from './types.js';
function greet(user: User): string {
return `Hello, ${user.name}`;
}Re-eksportowanie i pliki barrel
Plik barrel re-eksportuje elementy z wielu modułów, tworząc wygodny pojedynczy punkt importu. W dużych aplikacjach należy zachować ostrożność przy używaniu plików barrel — mogą one utrudniać tree shaking.
// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';
// Consumer:
import { Button, Input } from '@/components';Skrypt type=module w przeglądarce
Dodaj type="module" do tagu script, aby włączyć składnię modułów ES bezpośrednio w przeglądarce — bez bundlera. Moduły są domyślnie odroczone i mają własny zakres.
<script type="module">
import { greet } from './utils.js';
greet('World');
</script>Współdziałanie CommonJS i ESM
Node.js obsługuje oba formaty. Pliki ESM używają rozszerzenia .mjs albo ustawiają "type": "module" w package.json. Przy korzystaniu z pakietów CommonJS w ESM eksport domyślny jest wartością module.exports. Bundlery obsługują to w sposób transparentny.
Szybkie sprawdzenie
Jaka jest główna korzyść wydajnościowa używania eksportów nazwanych zamiast pojedynczego obiektu eksportu domyślnego?
Powtórka: moduły ES — szczegółowe omówienie
Moduły wykonują się tylko raz, a wszyscy importerzy współdzielą tę samą instancję. Tree shaking usuwa nieużywane eksporty nazwane. Dynamiczne import() umożliwia leniwe ładowanie i dzielenie kodu. import.meta udostępnia kontekst modułu. Pliki barrel są wygodne, ale mogą utrudniać tree shaking. Importy tylko typów w TypeScript nie generują kodu wynikowego.
Często zadawane pytania
Czy lekcja „Moduły ES: import, export i dynamic import” jest bezpłatna?
Tak — pełny tekst „Moduły ES: import, export i dynamic import” 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 ES: import, export i dynamic import”?
Proszę używać nazwanych i domyślnych eksportów oraz importów przestrzeni nazw, a także leniwie ładować kod za pomocą dynamic import() w celu poprawy wydajnoś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 1 z 4.
Ile czasu zajmuje lekcja „Moduły ES: import, export i dynamic import”?
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
- Moduły ES: import, export i dynamic import
- npm i package.json: zależności i skrypty
- Vite: serwer deweloperski i build
- Koncepcje bundlowania: tree shaking i code splitting