export

Udostępnia funkcje, klasy i wartości z modułu, aby inne pliki mogły je zaimportować.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

JavaScript

// points.js
export const MAX_POINTS = 1000

export function addPoints(current, amount) {
  return Math.min(current + amount, MAX_POINTS)
}

// main.js
import { addPoints, MAX_POINTS } from './points.js'

console.log(addPoints(990, 50), MAX_POINTS)

Wynik

1000 1000

Definicja i zastosowanie

Instrukcja export decyduje, co z danego pliku będzie widoczne na zewnątrz. Wszystko, czego nie wyeksportujesz, pozostaje prywatne dla modułu. To prosty sposób na ukrycie szczegółów i udostępnienie tylko przemyślanego zestawu funkcji.

Eksportów nazwanych może być w pliku dowolnie wiele: dopisujesz export przed deklaracją albo zbierasz nazwy na końcu w export { a, b }. Eksport domyślny (export default) może być tylko jeden i zwykle oznacza główną rzecz, którą plik oferuje, np. komponent albo klasę.

Możesz też przekazać dalej eksporty innego modułu: export { name } from "./file.js" lub export * from "./file.js". Tak buduje się pliki index.js, które zbierają eksporty z całego folderu w jednym miejscu.

Składnia

export const name = value
export function name() {}
export class Name {}
export { name1, name2 as alias }
export default expression
export { name } from './module.js'
export * from './module.js'

Więcej przykładów

Lista eksportów na końcu pliku

JavaScript

// format.js
function formatDate(date) {
  return date.toISOString().slice(0, 10)
}

function formatPoints(points) {
  return `${points} pkt`
}

export { formatDate, formatPoints as points }

// main.js
import { formatDate, points } from './format.js'

console.log(points(75))
console.log(formatDate(new Date('2026-09-28T12:00:00Z')))

Wynik

75 pkt
2026-09-28

Eksport domyślny

JavaScript

// leaderboard.js
export default function renderLeaderboard(players) {
  return players.map((player, index) => `${index + 1}. ${player}`).join('\n')
}

// main.js
import renderBoard from './leaderboard.js'

console.log(renderBoard(['Ola', 'Ania']))

Wynik

1. Ola
2. Ania

Plik index.js zbierający eksporty

JavaScript

// components/index.js
export { default as Button } from './Button.js'
export { default as Card } from './Card.js'
export * from './icons.js'

// main.js
import { Button, Card, StarIcon } from './components/index.js'

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Preferuj eksporty nazwane. Edytor lepiej je podpowiada, a każdy import używa tej samej nazwy, więc łatwiej szukać ich w projekcie.
export * from nie przekazuje eksportu domyślnego. Musisz go wskazać jawnie: export { default } from "./file.js".

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs