# Jak korzystać z natywnych modułów ES
W niniejszym artykule prezentuję przykłady modułów ECMAScript (ES) – co można z nimi zrobić i jakie są ich ograniczenia. Moduły ES są obsługiwane przez wszystkie przeglądarki wydane po maju 2018 roku, więc możesz założyć, że można z nich bezpiecznie korzystać w większości przypadków.
[źródło](https://caniuse.com/es6-module)
## Kodowanie bez modułów ES
Przed powstaniem modułów ES wszystkie JS trzeba było importować globalnie. Każdy plik miał dostęp do wcześniej zdefiniowanych zmiennych i mógł zostawić informację dla kodu wykonywanego później. Kolejność importowania miała znaczenie, zwłaszcza że elementy zaimportowane później mogły zmienić te, które zostały zaimportowane wcześniej. Starsze importy wyglądały mniej więcej tak:
`display-data.js`:
```JS
document.body.innerHTML = "lorem ipsum";
```
`log.js`:
```JS
console.log("Some test info");
```
`index.html`:
```HTML
No modules
```
[Konkretny przykład w akcji](https://how-to-js.github.io/es-modules/no-modules/).
### Problemy
Podejście to jest problematyczne głównie z dwóch powodów:
1. Zanieczyszcza zakresu globalnego przez kod. Jeśli kilka plików określa tę samą wartość, będą one ze sobą kolidować i będą się na siebie wzajemnie nadpisywać: powodzenia w szukaniu i naprawianiu powstałych w związku z tym bugów. Przykład:
`data-1.js`:
```JS
var data = “lorem ipsum”;
```
`data-2.js`:
```JS
var data = “sin dolor”;
```
`index.html`:
```HTML
Name collision
```
[Przykład](https://how-to-js.github.io/es-modules/name-collision/).
Obchodzenie tego problemu polegało najczęściej na wykorzystywaniu natychmiastowo wywoływanego wyrażenia funkcyjnego. Pozwalało to na izolację bloków kodu i chroniło przed zanieczyszczeniem zakresu globalnego, ale jednocześnie sprawiało, że kod stawał się bardziej zagmatwany.
2. Wszelkimi zależnościami trzeba zarządzać ręcznie. Jeśli jeden plik zależy od drugiego, pliki te trzeba zaimportować w odpowiedniej kolejności. Na przykład:
`log-data.js`:
```JS
console.log(data);
```
`data.js`:
```JS
const data = ‘some data’;
```
`display-data.js`:
```JS
document.html = data;
```
`index.html`:
```HTML
File order
```
Jak widać [tutaj](https://how-to-js.github.io/es-modules/file-order/), część wyświetlająca dane działa, jak należy, a część z logowaniem danych – nie.
## Moduły ES w akcji
Co się zmieni, gdy to samo zrobimy z modułami ES? Przede wszystkim zależności definiowane są na poziomie kodu. Jeśli więc chcesz, żeby plik wykorzystywał wartości z innego pliku, definiujesz to bezpośrednio w tym pliku. Podejście to wiele zmienia, zwłaszcza w zakresie czytania kodu: aby poznać cały kontekst stosowany przez konkretny plik, wystarczy go otworzyć i przeczytać.
Jak zatem stosować moduły ES?
`data.js`:
```JS
export const data = "lorem ipsum";
```
`display-data.js`:
```JS
import { data } from "./data.js";
document.body.innerHTML = data;
```
`index.html`:
```HTML
Simple modules
```
Główne zmiany wprowadzone w kodzie:
1. dodanie `type=”module”` do importu `