Moduły natywne w JavaScript – damianradowiecki

Moduł to po prostu plik. A żeby przeglądarka traktowała taki plik jako moduł należy dodać type=”module” do tagu script.

index.html

Copy Code

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

Co odróżnia moduł od zwykłego pliku JS?

export/import

W przypadku modułów aby skorzystać z danych znajdujących się w innym module (pliku) należy jawnie je wyeksportować a następnie zaimportować tam gdzie są potrzebne (w „klasycznym” JavaScript można bez problemu korzystać z danych znajdujących się w innym zaimportowanym pliku):

moduleB.js

Copy Code

export let name = 'John';

moduleA.js

Copy Code

import {name} from './moduleB.js';

alert(name);

Odwołanie do this

W przypadku modułów, jeśli odwołamy się do this z najwyższego poziomu, to dostaniemy wartość undefined. W przypadku „klasycznego” pliku JavaScript otrzymamy obiekt Window.

I inne

Istnieją też inne różnice, które nie są tutaj wymienione. Sprawdź linki w sekcji Warto zajrzeć, aby uzupełnić swoją wiedzę o brakujące elementy.