import

Wczytuje wartości wyeksportowane z innego modułu ES: funkcje, klasy, stałe albo cały moduł.

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

// utils.js
export function formatPoints(points) {
  return `${points} pkt`
}

// main.js
import { formatPoints } from './utils.js'

console.log(formatPoints(120))

Wynik

120 pkt

Definicja i zastosowanie

Instrukcja import pobiera to, co inny plik udostępnił przez export. Dzięki modułom dzielisz kod na małe pliki z jasno określonym zadaniem, a każdy plik ma własny zasięg, więc zmienne nie zaśmiecają przestrzeni globalnej.

Eksporty nazwane importujesz w klamrach, pod tą samą nazwą (import { formatPoints } from "./utils.js"), opcjonalnie zmieniając ją przez as. Eksport domyślny importujesz bez klamer i pod dowolną nazwą. Zapis import * as utils zbiera wszystkie eksporty w jeden obiekt.

Deklaracje import muszą stać na najwyższym poziomie pliku, a importowane moduły wykonują się, zanim ruszy reszta kodu. Gdy moduł ma być wczytany dopiero w razie potrzeby, użyj funkcji import(), która zwraca obietnicę. W przeglądarce skrypt z instrukcjami import musi mieć atrybut type="module".

Składnia

import defaultExport from './module.js'
import { name1, name2 as alias } from './module.js'
import defaultExport, { name } from './module.js'
import * as namespace from './module.js'
import './module.js'
const module = await import('./module.js')

Więcej przykładów

Eksport domyślny i zmiana nazwy

JavaScript

// student.js
export default class Student {
  constructor(name) {
    this.name = name
  }
}

export const MAX_LEVEL = 50

// main.js
import Student, { MAX_LEVEL as limit } from './student.js'

const ola = new Student('Ola')
console.log(ola.name, limit)

Wynik

Ola 50

Import całego modułu

JavaScript

// math.js
export const add = (a, b) => a + b
export const multiply = (a, b) => a * b

// main.js
import * as math from './math.js'

console.log(math.add(2, 3))
console.log(math.multiply(4, 5))

Wynik

5
20

Dynamiczny import()

JavaScript

const button = document.querySelector('#stats')

button.addEventListener('click', async () => {
  const { drawChart } = await import('./chart.js')
  drawChart()
})

Kod wykresu zostanie pobrany dopiero po kliknięciu. Strona ładuje się szybciej, bo nie ściąga od razu wszystkiego.

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

W przeglądarce podawaj pełną ścieżkę z rozszerzeniem, np. ./utils.js. Zapis bez rozszerzenia działa zwykle tylko w narzędziach takich jak Vite czy webpack.
Zaimportowane nazwy są tylko do odczytu. Nie przypiszesz im nowej wartości, ale gdy moduł źródłowy zmieni swoją zmienną, zobaczysz nową wartość.
Moduły otwierane prosto z dysku (file://) zwykle nie działają przez zasady bezpieczeństwa przeglądarki. Uruchom projekt na lokalnym serwerze, np. przez Vite.

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