Модулі, введення

У міру зростання нашої програми ми зазвичай хочемо розділити його на багато файлів, так званих «модулів». Модуль зазвичай містить клас або бібліотеку з функціями.

Довгий час JavaScript не мав синтаксису модулів на рівні мови. Це не було проблемою, тому що перші скрипти були маленькими та простими. У модулях не було потреби.

Але згодом скрипти ставали дедалі складнішими, тому співтовариство придумало кілька варіантів організації коду в модулі. З'явилися бібліотеки динамічного підвантаження модулів.

• AMD – одна з найстаріших модульних систем, спочатку реалізована бібліотекою require.js.
• CommonJS – модульна система, створена для сервера Node.js.
• UMD – ще одна модульна система, що пропонується як універсальна, сумісна з AMD та CommonJS.

Тепер усі вони поступово стають частиною історії, хоча їх можна знайти в старих скриптах.

Система модулів на рівні мови з'явилася у стандарті JavaScript у 2015 році та поступово еволюціонувала. На даний момент вона підтримується більшістю браузерів та Node.js. Далі ми вивчатимемо саме її.

Що таке модуль?

Модуль – це файл. Один скрипт – це один модуль.

Модулі можуть завантажувати один одного і використовувати директиви export і import для обміну функціональністю, викликати функції одного модуля з іншого:

• export відзначає змінні та функції, які мають бути доступні поза поточним модулем.
• import дозволяє імпортувати функціональність із інших модулів.

Наприклад, якщо ми маємо файл sayHi.js , який експортує функцію:

// 📁 sayHi.js export function sayHi(user) < alert(`Hello, $!`); >

…Тоді інший файл може імпортувати її та використовувати:

// 📁 main.js import from './sayHi.js'; alert(sayHi); // Функція.sayHi('John'); // Hello, John!

Директива import завантажує модуль шляхом ./sayHi.js щодо поточного файлу та записує експортовану функцію sayHi у відповідну змінну.

Давайте запустимо приклад у браузері.

Оскільки модулі підтримують ряд спеціальних ключових слів, і вони мають ряд особливостей, необхідно явно сказати браузеру, що скрипт є модулем, з допомогою атрибута .

export function sayHi(user) < return `Hello, $!`; >

Браузер автоматично завантажить та запустить імпортований модуль (і ті, які він імпортує, якщо потрібно), а потім запустить скрипт.

Якщо ви спробуєте відкрити веб-сторінку локально через протокол file:// , ви виявите, що директиви import/export не працюють. Для тестування модулів використовуйте локальний веб-сервер, наприклад, static-server або використовуйте можливості «живого сервера» вашого редактора, наприклад розширення Live Server для VS Code.

Основні можливості модулів

Чим відрізняються модулі від "звичайних" скриптів?

Є основні можливості та особливості, що працюють як у браузері, так і серверному JavaScript.

Завжди "use strict"

У модулях завжди використовується режим use strict. Наприклад, привласнення до неоголошеної змінної викликає помилку.

Своя область видимості змінних

Кожен модуль має власну область видимості. Іншими словами, змінні та функції, оголошені в модулі, не видно в інших скриптах.

У наступному прикладі імпортовано 2 скрипти, і hello.js намагається використовувати змінну user , оголошену в user.js . В результаті помилка:

alert(user); // у цьому модулі немає такої змінної (кожен модуль має незалежні змінні)

Модулі повинні експортувати функціональність, призначену для використання ззовні. Інші модулі можуть її імпортувати.

Так що нам треба імпортувати user.js в hello.js і взяти з нього потрібну функціональність, замість покладатися на глобальні змінні.

import from './user.js'; document.body.innerHTML=user; // John

export let user = "John";

У браузері також існує незалежна область видимості для кожного скрипта:

Якщо нам потрібно зробити глобальну змінну рівня всієї сторінки, можна привласнити її об'єкту window , тоді отримати значення змінної можна звернувшись до window.user . Але це має бути винятком, що вимагає вагомої причини.

Код у модулі виконується лише один раз під час імпортування

Якщо один і той же модуль використовується в декількох місцях, його код виконається тільки один раз, після чого функціональність, що експортується, передається всім імпортерам.

Це дуже важливо для розуміння роботи модулів. Давайте подивимося приклади.

По-перше, якщо при запуску модуля виникають побічні ефекти, наприклад, видається повідомлення, то імпорт модуля в декількох місцях покаже його лише один раз – при першому імпорті:

// 📁 alert.js alert("Модуль виконаний!");

// Імпорт однієї й тієї ж модуля у різних файлах // 📁 1.js import `./alert.js`; // Модуль виконано! // 📁 2.js import `./alert.js`; // (Нічого не покаже)

На практиці завдання коду модуля – це зазвичай ініціалізація, створення внутрішніх структур даних, а якщо ми хочемо, щоб щось можна було використовувати багато разів, то експортуємо це.

Тепер більш просунутий приклад.

Давайте уявимо, що модуль експортує об'єкт:

// 📁 admin.js export let admin = <name: "John">;

Якщо модуль імпортується в кількох файлах, код модуля буде виконано лише один раз, об'єкт admin буде створено і надалі буде переданий всім імпортерам.

Всі імпортери отримають єдиний об'єкт admin :

// 📁 1.js import from './admin.js'; admin.name = "Pete"; // 📁 2.js import from './admin.js'; alert(admin.name); // Pete // Обидва файли, 1.js і 2.js, імпортують той самий об'єкт // Зміни, зроблені в 1.js, будуть видні в 2.js

Ще раз зауважимо – модуль виконується лише один раз. Генерується експорт і після цього передається всім імпортерам, тому, якщо щось зміниться в об'єкті admin , то інші модулі теж побачать ці зміни.

Така поведінка дозволяє конфігурувати модулі під час першого імпорту. Ми можемо встановити його властивості один раз, і в подальших імпортах він буде налаштованим.

Наприклад, модуль admin.js надає певну функціональність, але очікує передачі облікових даних в об'єкт admin ззовні:

// 📁 admin.js export let admin = < >; export function sayHi() < alert(`Ready to serve, $!`); >

У init.js, першому скрипті нашої програми, ми встановимо admin.name. Тоді все це побачать, включаючи виклики, зроблені з admin.js :

// 📁 init.js import from './admin.js'; admin.name = "Pete";

Інший модуль також побачить admin.name:

// 📁 other.js import from './admin.js'; alert(admin.name); // Pete sayHi(); // Ready to serve, Pete!

import.meta

Об'єкт import.meta містить інформацію про поточний модуль.

Вміст залежить від оточення. У браузері він містить посилання на скрипт або посилання на поточну веб-сторінку, якщо модуль вбудований у HTML:

У модулі "this" не визначено

Це незначна особливість, але для повноти картини треба згадати про це.

У модулі на верхньому рівні це не визначено (undefined).

Порівняємо з не-модульними скриптами, там this – глобальний об'єкт:

Особливості у браузерах

Є й кілька інших, саме браузерних особливостей скриптів із type="module" порівняно із звичайними скриптами.

Якщо ви читаєте матеріал вперше або якщо не збираєтеся використовувати модулі в браузерах, то зараз можете пропустити цю секцію.

Модулі є відкладеними (deferred)

Модулі завжди виконуються у відкладеному (deferred) режимі, так само, як скрипти з атрибутом defer (описаний у розділі Скрипти: async, defer). Це вірно і для зовнішніх та вбудованих скриптів-модулів.

• завантаження зовнішніх модулів, таких як , не блокує обробку HTML.
• модулі, навіть якщо завантажилися швидко, очікують на повне завантаження HTML документа, і тільки потім виконуються.
• зберігається відносний порядок скриптів: скрипти, які йдуть раніше у документі, виконуються раніше.

Як побічний ефект, модулі завжди бачать повністю завантажену сторінку HTML, включаючи елементи під ними.

 Порівняйте зі звичайним скриптом нижче: 
Будь ласка, зверніть увагу: другий скрипт виконається раніше ніж перший! Тому ми побачимо спочатку undefined, а потім object.
Це тому, що модулі починаються після повного завантаження сторінки. Звичайні скрипти запускаються відразу, тому повідомлення зі звичайного скрипту ми бачимо першим.
При використанні модулів нам варто мати на увазі, що HTML-сторінка буде показана браузером до того, як виконуються модулі, і JavaScript-додаток буде готовим до роботи. Деякі функції можуть ще не працювати. Нам слід розмістити «індикатор завантаження» або ще щось, щоб не збентежити цим відвідувача.
Атрибут async працює у вбудованих скриптах
Для немодульних скриптів атрибут async працює лише на зовнішніх скриптах. Скрипти з ним запускаються відразу за готовністю, вони не чекають на інші скрипти або HTML-документ.
Для модулів атрибут async працює на будь-яких скриптах.
Наприклад, у скрипті нижче є async, тому він виконається відразу після завантаження, не чекаючи інших скриптів.
Скрипт виконає імпорт (завантажить ./analytics.js ) і запуститься, коли буде готовий, навіть якщо HTML документ ще не буде завантажений, або якщо інші скрипти ще завантажуються.
Це дуже корисно, коли модуль ні з чим не пов'язаний, наприклад, для лічильників, реклами, обробників подій.
  -->


Зовнішні скрипти
Зовнішні скрипти з атрибутом type="module" мають дві відмінності:

   Зовнішні скрипти з однаковим атрибутом src запускаються лише один раз:

Модулі JavaScript – пояснюємо, що це (з прикладами)
Модуль – це функція або набір подібних функцій. Вони зібрані разом усередині одного файлу та містять код. Коли у більшому додатку викликається та чи інша функція, цей код виконує завдання.
Модулі створюються для того, щоб можна було краще організувати та структурувати кодову базу. Їх можна використовувати для того, щоб розбити велику програму на дрібніші підпрограми, які будуть більш керованими та більшою мірою незалежними. Ці підпрограми можуть виконувати одне чи кілька взаємозалежних завдань.

Незалежними/автономними : модуль відокремлений від інших залежностей настільки, наскільки це можливо.
Спеціального призначення : модуль повинен виконувати одне завдання та групу взаємозалежних завдань. Основна суть, навіщо вони створюються, полягає у створенні окремих функцій. Один модуль – одне завдання (чи один вид завдань).
Багаторазового застосування : модуль легко інтегрується в різні програми, в яких він виконує своє завдання.

Щоб вам було зрозуміліше, я проведу аналогію:
Припустимо, ми хочемо збудувати величезний будинок з нуля. Всі інструменти, які нам знадобляться для того, щоб звести будинок, знаходяться в одній кімнаті.
У цьому випадку правильно розкласти всі інструменти, щоб ми могли почати будувати, буде не так просто.
Замість того, щоб тримати усі окремі залежності в одній кімнаті, нам варто зібрати окремі набори взаємопов'язаних інструментів та помістити їх у різні кімнати. У кожній кімнаті знаходяться свої інструменти, і кожна з них є незалежною та автономною та вирішує певні завдання.
Ми цілком могли б наклеїти на них якісь написи, наприклад, «Інструменти для покрівельних робіт», «Інструменти для цегляної кладки», «Інструменти для копання котловану під фундамент» і т.д.
Щоразу, коли нам буде потрібно той чи інший інструмент для того, щоб виконати певне завдання, ми знаємо, в якій кімнаті він лежить. У цьому плані все стало набагато організованішим, і все можна легко знайти.
Більше того, припустимо, що ми вже збудували будинок і вирішили збудувати щось ще. Для цього у нас є той самий набір інструментів. Цей факт підкріплює принцип багаторазового використання . Модулі можна використовувати багаторазово, оскільки вони автономні.
Приклад модуля

Якщо говорити про код, то модулі дуже важливі.
Давайте розглянемо спрощену схему на прикладі додатка електронної комерції, за допомогою якого люди та підприємства можуть продавати товари через Інтернет. Як правило, такі програми складаються не менше, ніж з двох нескладних завдань. Наприклад,

програма, призначена для створення облікового запису
програма, призначена для перевірки достовірності інформації
ще одна програма, призначена для обробки платежів
ще одна програма, призначена для підрахунку рейтингу користувачів

Замість того, щоб об'єднувати всі ці нескладні програми в один модуль/файл, можна створити кілька різних файлів або модулів, кожен з яких відповідатиме за окреме завдання. У такому разі модулі стають залежностями.
Після цього ви можете просто імпортувати/завантажити ці залежності (тобто необхідні модулі) з основної програми або програми і, таким чином, підключити їх. Зрештою ваш основний додаток стане не таким захаращеним.
main.js був розділений на чотири модулі
Припустимо, що ви хочете внести в кодову базу якоїсь іншої програми код для обробки платежів. Тоді ви можете скористатися функцією, що вже існує. Вам не потрібно копіювати та вставляти цю функцію або писати її з нуля.
Модулі JavaScript

Модуль JavaScript – це звичайний файл, який містить відповідний код.
У JavaScript для використання та отримання функцій відповідних модулів ми використовуємо ключові слова import і export .

Ключове слово export застосовується для того, щоб змінна, функція, клас або інший об'єкт став доступним для інших модулів. Іншими словами, він стає загальнодоступним кодом.
Ключове слово import застосовується для завантаження загальнодоступного коду з іншого модуля.

Давайте подивимося на простий приклад:
function getPower(decimalPlaces) < return 10 ** decimalPlaces; >function capitalize(word) < return word[0].toUpperCase() + word.slice(1); >function roundToDecimalPlace(number, decimalPlaces = 2) < const round = getPower(decimalPlaces); return Math.round(number * round) / round; >< capitalize, roundToDecimalPlace >; filepath/main.js
У цьому модулі визначено три функції:

getPower : ця функція отримує як аргумент показник ступеня числа
capitalize : ця функція робить першу букву слова великою
roundToDecimalPlace : ця функція округляє число, передане як аргумент, до вказаної кількості знаків після коми

Наприкінці файлу ми можемо бачити, що дві з трьох функцій було експортовано. Іншими словами, ці функції стали загальнодоступними, і їх тепер можна використовувати у будь-якому іншому сценарії.
Для того, щоб експортувати дві з трьох функцій, ви повинні записати ключове слово export , а за ним повинен бути об'єкт, який містить ті функції, які ви хочете, щоб були загальнодоступними. Після того, як ви це зробите, будь-яка програма в рамках кодової бази зможе отримати доступ до цих функцій.
Давайте подивимося, як ми можемо їх використовувати:
import < capitalize, roundToDecimalPlace >з './main'; function displayTotal(name, total) < return `$, ваш загальний термін є: $`; > displayTotal('kingsley', 20.4444444); // "Kingsley, ваш загальний термін є: 20.44" export < displayTotal >; filepath/displayTotal.js
Модуль displayTotal.js не має функцій capitalize() і roundToDecimalPlace() , але вам потрібно, щоб у нього були такі функціональні можливості. І як ми можемо це зробити? За допомогою import!
Ми зробили це за допомогою ключового слова import , вказавши його ім'я функцій, які ми хотіли б імпортувати з модуля. В даному випадку це функції capitalize і roundToDecimalPlace.
А якщо вам потрібно імпортувати в свою програму тільки одну функцію - capitalize?
Все дуже просто – імпортуйте лише функцію capitalize. Наприклад,
import < capitalize >з './main'; function warn(name) < return `I am warning you, $!`; > warn('kingsley'); // I am warning you, Kingsley! export <warn>;
Зверніть увагу: коли ви працюєте з модулями, важливо розуміти принцип роботи структурування файлів. У прикладі вище ми просто імпортуємо функцію з файлу, який знаходиться в тому самому каталозі. Саме тому ми використовуємо позначення "./import".
Якщо ви хочете імпортувати всі загальнодоступні функції з якогось модуля, вам потрібно використовувати символ * як ключове слово:
import * as mainfunctions from './main'; function warn(name) < return `I am warning you, $!`; > warn('kingsley'); // I am warning you, Kingsley! export <warn>;
Порада : якщо ви імпортуєте з модуля всі функції, краще скористатися зірочкою, а не явно перераховувати всі функції одну за одною.
Ви могли помітити ще одне ключове слово -as. Ми використовуємо його для імпортування загальнодоступних функцій у новий об'єкт (в даному випадку це основніфункції ). Після чого ми можемо використовувати та викликати функції, які нам потрібні у нашій програмі.
Аж доти ми розглядали приклади, де експорт виконується наприкінці файла. Але ви також можете експортувати функцію, змінну або клас, прописавши слово export прямо перед визначенням. Наприклад,
function getPower(decimalPlaces) < return 10 ** decimalPlaces; >export function capitalize(word) < return word[0].toUpperCase() + word.slice(1); >export function roundToDecimalPlace(number, decimalPlaces = 2) < const round = getPower(decimalPlaces); return Math.round(number * round) / round; filepath/anothermai.js
Якщо ви порівняєте цей приклад з першим, то помітите різницю в синтаксисі:

У першому прикладі ключове слово export застосовується наприкінці сценарію для експорту двох функцій. А на прикладі вище ключове слово export застосовується для кожної функції при її визначенні.

У будь-якому випадку, результат один: обидві функції: capitalize і roundToDecimalPlace були експортовані.
Експорт функції за промовчанням

Якщо ви плануєте експортувати всі три функції, але хочете, щоб одна з них була стандартною функцією (можливо через те, що ви, найімовірніше, використовуватимете тільки цю функцію), вам просто потрібно вказати ключове слово default .
Ключове слово default спрощує процес імпорту функції. Давайте подивимося на такий приклад:
export function getPower(decimalPlaces) < return 10 ** decimalPlaces; >export default function capitalize(word) < return word[0].toUpperCase() + word.slice(1); >export function roundToDecimalPlace(number, decimalPlaces = 2) < const round = getPower(decimalPlaces); return Math.round(number * round) / round; >filepath/default.js
Як ви можете бачити, функція capitalize стала функцією за промовчанням. Фактично ми наділили її якимись привілеями.
Припустимо, що ми хочемо імпортувати функцію capitalize із модуля в іншу програму. Синтаксис буде приблизно такий самий, різниця буде лише в тому, що вам не потрібно буде вказувати функцію у фігурних дужках:
import capitalize from './main'; function warn(name) < return `I am warning you, $!`; > warn('kingsley'); // I am warning you, Kingsley! export <warn>; filepath/warndefault.js
Якщо ви хочете імпортувати якісь інші функції разом із функцією за замовчуванням, то ви повинні через кому вказати «голу» функцію за замовчуванням та інші функції у фігурних дужках:
import capitalize, < getPower >з './main'; function warn(name) < return `I am warning you, $!`; > warn('kingsley'); // I am warning you, Kingsley! export <warn>; filepath/mixed.js
Висновок

Модулі – це незалежні та автономні фрагменти коду. Ви можете створити їх, розбивши велику програму на логічні частини або залежності.
Модулі повинні бути незалежними, мати спеціальне призначення та надавати можливість багаторазового використання.
Для того, щоб обмінюватися функціями між модулями JavaScript, вам знадобляться ключові слова import і export .
Для того, щоб вказати, яку функцію, об'єкт, змінну або клас ви хочете імпортувати в першу чергу вам знадобиться ключове слово default .
Таким чином, ми пробіглися по основним концепціям модулів JavaScript.
Модулі JavaScript: посібник для початківців
JavaScript також відомі як ES-модулі або ECMAScript-модулі. Вони призначені для того, щоб ваш код JavaScript був більш організованим та зручнішим у супроводі.
Чим краще ви розумітимете, як працюють ES-модулі, тим професійніше ви справлятиметеся зі своєю роботою розробника JavaScript. У цій статті ми розглянемо наступне:

Що таке модуль?
Що таке ES-модулі? Навіщо вони потрібні?
Як використовувати ES-модулі.
Інші системи модулів, які використовуються у JavaScript.

Що таке модуль?

Модуль JavaScript - це звичайний файл з кодом. Загалом модуль можна описати як повторно використовувану та незалежну одиницю коду.
Модулі – це будівельні блоки кодової бази. У міру зростання вашої програми ми можете розбивати ваш код на файли, які називаються модулями.
За допомогою модулів можна розбивати великі програми на фрагменти коду, які будуть більш керованими.
Що таке ES-модулі? Навіщо вони потрібні?

ES-модулі – це офіційна система модулів JavaScript . Є й інші системи модулів, які також можна використовувати в JavaScript, але ми поговоримо про них пізніше. Однак поки не забувайте про те, що ми вивчаємо саме ES-модулі (оскільки вони є стандартними для JavaScript), а не якісь інші системи модулів.
Якщо ви є розробником JavaScript, то ви, швидше за все, використовуватимете ES-модулі постійно.
Нижче наведено деякі переваги, які можуть отримати розробники, використовуючи ES-модулі:

Організованість . Розбиваючи великі програми на дрібніші частини, ви підтримуєте організованість вашого коду.
Багаторазове використання . Застосовуючи ES-модулі, ви можете писати код в одному місці та використовувати його повторно в інших файлах у межах вашої кодової бази.Наприклад, замість того, щоб кожен раз заново писати одну і ту ж функцію, ви можете написати її всередині одного модуля, а потім імпортувати його в інший файл і використовувати його вже там.

Погляньмо на приклад того, як можна використовувати ES-модулі. Ми дізнаємося, як працюють ES-модулі, тому ви зможете використовувати їх у своїх майбутніх проектах. Працюючи з ES-модулями, ми зможемо побачити кожну перевагу, яку ми згадали вище.
Як використовувати ES-модулі

Давайте спочатку створимо нескладний файл JavaSvript в Replit. Весь код ви можете знайти тут  .
Як тільки ми відкриємо Replit, ми можемо створити новий проект та вибрати HTML, CSS та JavaScript. Таким чином, ми створимо початковий проект, в якому буде знаходитись файли index.html, scrip t.js і style.css. Все це нам знадобиться, щоби налаштувати проект.
Всередині нашого файлу index.html потрібно змінити тег script , додавши до нього type="module" . Таким чином ми зможемо використовувати ES-модулі в нашому коді. Тег script має виглядати так:
Почнемо з написання простої функції для складання двох чисел. Ця функція має взяти два числа, скласти їх та повернути результат цієї операції. Саме так ми і назвемо ми цю функцію саме так - add . Напишемо її в нашому файлі script.js :
function add(a, b) < return a + b; >; console.log(add(5, 5)); //outputs 10
На даний момент наш файл script.js не такий великий, у ньому не так багато коду. А тепер уявіть, що ваш додаток зростає, і він має десятки таких функцій. Тоді файл script.js може стати занадто великим, і його не так просто супроводжуватиме.
Давайте створимо модуль та обійдемо цю проблему. Це можна зробити, натиснувши в Replit кнопку "Add File" ("Додати файл"). Не забувайте, що модуль – це лише файл пов'язаного коду.
Ми назвемо наш модуль math.js. Ми приберемо функцію add з нашого файлу script.js та створимо новий файл math.js. Цей файл стане нашим модулем, у якому ми зберігатимемо наші математичні функції. Давайте додамо нашу функцію add до цього файлу:
// math.js function add(a, b) < return a + b; >;
Ми вирішили назвати цей модуль math.js, тому що потім ми додамо туди ще й інші математичні функції.
Якби ми умовно відкрили цей додаток і подивилися на нього, то відразу ж зрозуміли, що вся математична логіка знаходиться всередині цього файлу. Нам не потрібно було б витрачати час на те, щоб вникнути в цю програму, на пошук математичних функцій і ворожіння про те, де вони знаходяться. Ми всі акуратно організували у файл.
Тепер давайте скористаємося функцією add усередині нашого файлу script.js. Тільки не слід забувати, що сама функція знаходиться всередині іншого файлу. Для цього нам необхідно вивчити синтаксис ES-модуля. Давайте подивимося на такі ключові слова, як export та import .
Ключове слово
export

Якщо ви хочете, щоб модуль був доступний в інших файлах (крім того, в якому він знаходиться), то вам необхідно скористатися ключовим словом export . Давайте застосуємо ключове слово export до нашої функції add, щоб ми могли використовувати її всередині нашого файлу script.js.
Давайте додамо ключове слово export default під нашою функцією всередині файлу math.js:
// math.js function add(a, b) < return a + b; >; export default add;
Останній рядок робить так, що функція стає доступною для використання в інших місцях, крім модуля math.js .
Є ще один спосіб застосування ключового слова export. Ви можете додати його безпосередньо перед тим, як ви визначатимете функцію:
// math.js export default function add(a, b) < return a + b; >;
Самі собою способи різні, але працюють вони однаково.
Можливо, вас зацікавило ключове слово default після слова export. Ми скоро до цього повернемось. А зараз, коли ми експортували нашу функцію, давайте скористаємося їй в іншому файлі.
Ключове слово
import

Для того, щоб імпортувати нашу функцію add у наш файл script.js, нам знадобиться ключове слово import. Імпорт функції передбачає, що ми зможемо отримати доступ та використовувати її у файлі. Як тільки ми імпортуємо функцію, ми зможемо їй скористатися:
// script.js import add from './math.js'; console.log(add(2, 5)); //outputs 7
У цьому випадку ми використовуємо відносний імпорт ( ./math.js ).
Коли ми запустимо цей код, побачимо результат роботи нашої функції - 7. Тепер ви можете використовувати цю функцію в цьому файлі стільки, скільки захочете.
Сам код функції не видно, і для того, щоб використовувати функцію, вам не обов'язково потрібно бачити його бачити.
Якщо ми спробуємо ненадовго закоментувати рядок import add from './math.js' , відразу отримаємо помилку: ReferenceError: add is not defined . Це відбувається через те, що , якщо ми не імпортуємо явно явно цю функцію у файл script.js , а, значить, то у нього він не може ні до отримати до неї доступу.
Для початку ми експортували нашу функцію add , після чого імпортували її до нашого файлу script.js , а потім викликали.
Давайте знову подивимося на наш файл math.js. Як зазначалося вище, вас могло збентежити слово default , написане разом із ключовим словом export . Давайте розглянемо його детальніше.
Експорт на ім'я та експорт за замовчуванням у JavaScript

Що стосується ES-модулів, ви можете використовувати як експорт за промовчанням, так і експорт на ім'я.
У нашому першому прикладі ми використали експорт за замовчуванням . Ми експортували таким чином лише одне значення (нашу функцію add) з нашого модуля math.js.
Якщо ви використовуєте експорт за промовчанням, за бажанням ви можете змінити назву імпорту. Тобто ми можемо імпортувати нашу функцію функцію add у нашому файлі script.js і назвати її, наприклад, addition (або якимось іншим ім'ям).
// script.js import addition from './math.js'; console.log(addition(2, 5)); //outputs 7
А ось експорт на ім'я використовується для експорту кількох значень .
Спробуємо скористатися експортом на ім'я. Поверніться у файл math.js , створіть у ньому ще дві функції -- subtract і multiply , і розмістіть їх під нашою функцією add . Якщо ви використовуєте експорт на ім'я, ви можете просто видалити ключове слово default :
// math.js export default function add(a, b) < return a + b; >; export function subtract(a, b) < return a - b; >; export function multiply(a, b) < return a * b; >;
Давайте видалимо весь код, написаний у script.js раніше, і імпортуємо нові функції. Для того, щоб імпортувати експорти на ім'я, вам потрібно укласти їх у фігурні дужки:
Тепер ми можемо використовувати ці функції всередині файлу script.js :
// script.js import < multiply, subtract >from './math.js'; console.log(multiply(5, 5)); console.log(subtract(10, 4))
Якщо ви хочете перейменувати експорт на ім'я, то вам знадобиться ключове слово as :
import add, < subtract as substractNumbers >з './math.js'; console.log(substractNumbers(2, 5));

Вище ми перейменували імпорт функції subtract в subtractNumbers.
А тепер повернемося до нашої функції add. Що якщо ми знову заходимо використовувати її в нашому файлі script.js поряд з нашими функціями multiply та subtract? Це питання можна вирішити так:
import add, < multiply, subtract >from './math.js'; console.log(multiply(5, 5)); console.log(subtract(10, 4)) console.log(add(10, 10));
Тепер ми знаємо, як використовувати ES-модулі. Ми дізналися, як застосовувати ключові слова export та import , а також у чому різниця між експортом по імені та експортом за умовчанням.Крім того, ми навчилися перейменовувати як експорти за промовчанням, так і експорти на ім'я.
Інші системи модулів у JavaScript

Якщо ви вже вивчали модулі, ви могли використовувати інший тип імпорту, наприклад, такий:
var models = require('./models')
Ось тут можна заплутатися. Давайте трохи заглибимося в історію модулів JavaScript, щоб прояснити все.
Приклад наведеного вище коду використовує оператор require . Це CommonJS. CommonJS – це ще одна система модулів, яку можна використовувати із JavaScript.
Коли JavaScript було створено, він не мав жодної системи модулів. Внаслідок чого розробники створювали свої власні системи модулів поверх мови.
Протягом багатьох років створювалися та використовувалися різні системи модулів, у тому числі CommonJS. Працюючи з кодовою базою компанії або беручи участь у проекті з відкритим кодом, ви можете помітити, що в них використовуються різні системи модулів.
Зрештою, було представлено стандартизовану систему модулів JavaScript – ES-модулі.
У цій статті ми дізналися про те, що таке модулі, і для чого вони потрібні розробникам. Ми дізналися про те, як працюють ES-модулі, а також про різні типи систем модулів JavaScript.