Moduły ES6 w JavaScripcie: jak działają import i export

W tym rozdziale zajmiemy się modułami oraz importami i eksportami w JavaScripcie. Zobaczysz, jak dzięki nim uporządkować kod i wygodniej się nim dzielić, a także jak bezpiecznie przenosić dane między plikami, wszystko na konkretnych, praktycznych przykładach.

Moduły oraz import/eksport są częścią specyfikacji ECMAScript 6 (ES6) z 2015 r. Wszystkie obecne przeglądarki obsługują je natywnie: transpilator taki jak Babel czy bundler taki jak Webpack przydają się już tylko do bardzo starych przeglądarek albo do łączenia plików.

Czym jest moduł w JavaScripcie (ES6)?

Moduły to sposób na uporządkowanie kodu przez podzielenie go na osobne, niezależne pliki. Dzięki temu kod jest czytelniejszy i łatwiejszy w utrzymaniu na dłuższą metę, a jego części da się ponownie wykorzystać.

Zasada działania modułów i ich zalety

Zasada opiera się na instrukcji „export”, która udostępnia wybrane fragmenty kodu na zewnątrz modułu. Reszta pozostaje ukryta: na zewnątrz trafia tylko to, co jest naprawdę potrzebne.

Zalet takiego podejścia jest kilka. Po pierwsze, izolacja poszczególnych części kodu eliminuje konflikty nazw, co bardzo pomaga przy pracy zespołowej nad dużym projektem. Po drugie, podział na mniejsze pliki porządkuje strukturę i ułatwia utrzymanie. Po trzecie, taki kod łatwo wykorzystać ponownie, importując go w innym projekcie.

Tworzenie modułu instrukcją „export”

Żeby zbudować moduł w JavaScripcie, wystarczy poprzedzić instrukcją „export” te elementy, które mają być widoczne na zewnątrz. Jeśli na przykład chcesz wyeksportować funkcję „saluer” zdefiniowaną w pliku module.js, napiszesz:

export function saluer() {
  console.log("Bonjour !");
}

Można też wyeksportować kilka elementów naraz, wypisując je po instrukcji „export”. Na przykład:

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

Instrukcja „export default” wskazuje z kolei domyślny element modułu. Oznacza to, że jeśli nie zaimportujesz niczego jawnie, trafi do ciebie właśnie ten domyślny element. Na przykład:

export default function maFonctionParDefaut() {
  console.log('Je suis la fonction par défaut');
}

Jak zaimportować moduł w JavaScripcie (ES6)?

Moduły pozwalają rozbić kod na osobne pliki i lepiej zorganizować projekt. W poprzedniej części zobaczyłeś, jak wyeksportować moduł instrukcją export. Jak natomiast zaimportować go do swojego kodu? O tym jest ta sekcja.

Użycie instrukcji „import”

Do importu modułu w JavaScripcie służy instrukcja import. Oto przykład użycia:

import * as monModule from '/chemin/vers/mon/module';

Ta składnia importuje wszystkie elementy modułu monModule i umieszcza je w obiekcie o tej samej nazwie. Możesz też wskazać, które konkretnie elementy chcesz zaimportować, wypisując je w nawiasach klamrowych po instrukcji import:

import { maFonction, maVariable } from '/chemin/vers/mon/module';

Elementy nazwane da się również importować pod aliasem, czyli instrukcją „import” ze składnią „{ nom1 as alias1, nom2 as alias2 }”, w ten sposób:

import { nom1 as alias1, nom2 as alias2 } from 'module';

Żeby zaimportować klasę lub funkcję wyeksportowaną przez export default robisz to tak:

export

export default class MonModule {
  constructor() {
    console.log('Je suis une classe');
  }
}

import MonModule from 'module';

Gdy w jednym module używasz importu domyślnego i importu nazwanego, import domyślny warto postawić jako pierwszy, w ten sposób:

import MonModule, { maFonction } from './monModule';

// użycie importu domyślnego
const monModule = new MonModule();

// użycie importu nazwanego
maFonction();

Na koniec zostaje import dynamiczny, czyli metoda „import()”, która ładuje moduł asynchronicznie. Przydaje się, gdy moduł ma się wczytać dopiero wtedy, kiedy jest naprawdę potrzebny, żeby niepotrzebnie nie obciążać przeglądarki.

import('./monModule').then(monModule => {
  // użycie zaimportowanych elementów
  monModule.maFonction();
  monModule.maVariable;
});

Jak używać modułów w przeglądarce?

Wiesz już, jak tworzyć i eksportować moduły instrukcją „export” oraz jak je importować instrukcją „import”. Trzeba jednak pamiętać, że nie każda przeglądarka obsługuje te instrukcje. Do używania modułów w przeglądarce jest kilka sposobów i ta sekcja je przedstawia.

Użycie atrybutu „type=module” w znacznikach „script”

Żeby korzystać z modułów w przeglądarce, trzeba dodać atrybut „type=module” do znacznika „script” wczytującego plik JavaScript. Przeglądarka dowiaduje się w ten sposób, że plik jest modułem i ma go potraktować inaczej niż zwykły skrypt. Przykładowy kod:

<script type="module" src="./script.js"></script>

module.js

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

script.js

import { maVariable, maFonction, MaClasse } from './module.js';

console.log(maVariable); // Wypisuje 'ma variable'

Użycie bundlerów takich jak Webpack

Moduły w przeglądarce można też wczytywać przez bundler. Bundler to narzędzie, które łączy wiele modułów i plików JavaScript w jeden plik, łatwiejszy do pobrania przez przeglądarkę. Webpack jest popularnym bundlerem z bogatym zestawem zaawansowanych funkcji do obsługi modułów. Jeśli chcesz nauczyć się Webpacka, napisałem o tym osobny tutorial.

Podsumowanie

Wiesz już, jak zbudować moduł instrukcją „export” i jak go zaimportować instrukcją „import”. Wiesz też, jak radzić sobie ze ścieżkami i środowiskiem przy imporcie modułów oraz jak używać importów i eksportów domyślnych i nazwanych. Na koniec zobaczyłeś, jak korzystać z modułów w przeglądarce dzięki atrybutowi „type=module” w znacznikach „script”.

Ten tutorial dał ci podstawy programowania w JavaScripcie i pozwolił zrozumieć kluczowe pojęcia tego języka. Możesz teraz uczyć się dalej i wyspecjalizować w wybranej dziedzinie, na przykład w tworzeniu stron WWW. Powodzenia w dalszej nauce i w kolejnych projektach!