Пошук уроків, статей та іншого контенту
Розглянемо синтаксис import та export для створення й підключення модулів ES Modules.
Модуль — це окремий файл JavaScript із власними змінними, функціями та класами. Модулі допомагають розділяти програму на невеликі частини.
В ES Modules використовують два ключові слова:
export — робить значення доступним за межами файлу;
import — підключає значення з іншого файлу.
Кожен файл із модулями має власну область видимості. Змінні одного файлу не стають автоматично доступними в іншому.
Node.js підтримує ES Modules. Найзручніший спосіб увімкнути їх для .js-файлів — додати "type": "module" у package.json:
{
"type": "module"
}Після цього Node.js сприйматиме файли з розширенням .js як ES Modules.
Також можна використовувати розширення .mjs без додавання "type": "module":
math.mjs
app.mjsУ цьому уроці використовуватимемо .js і "type": "module".
Щоб експортувати змінну, функцію або інше значення, використовуйте export.
Файл math.js:
export const pi = 3.14159;
export function add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
export function multiply(firstNumber, secondNumber) {
return firstNumber * secondNumber;
}У цьому прикладі експортовано:
константу pi;
функцію add;
функцію multiply.
Експортувати значення можна і в кінці файлу:
const pi = 3.14159;
function add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
function multiply(firstNumber, secondNumber) {
return firstNumber * secondNumber;
}
export { pi, add, multiply };Цей варіант зручний, коли потрібно зібрати всі експорти в одному місці.
Іменовані експорти підключають у фігурних дужках:
import { add, multiply } from "./math.js";
console.log(add(2, 3));
console.log(multiply(4, 5));Результат:
5
20Назви в import мають відповідати назвам експортованих значень:
import { add } from "./math.js";Тут add — це саме та функція, яку було експортовано з math.js.
import { pi, add, multiply } from "./math.js";
console.log(pi);
console.log(add(10, 5));
console.log(multiply(10, 5));За допомогою as можна змінити локальне ім’я:
import { add as sum } from "./math.js";
console.log(sum(2, 7));У файлі math.js функція називається add, але в поточному файлі ми звертаємося до неї як до sum.
У модулі може бути один default-експорт. Він використовується, коли файл має одне основне значення для експорту.
Файл greet.js:
export default function greet(name) {
return `Привіт, ${name}!`;
}Підключення такого експорту:
import greet from "./greet.js";
console.log(greet("Олена"));Для default-експорту фігурні дужки не використовують.
Назву під час імпорту можна вибрати самостійно:
import sayHello from "./greet.js";
console.log(sayHello("Андрій"));Функція в greet.js називається greet, але в поточному файлі вона має ім’я sayHello.
Один файл може мати один default-експорт і кілька іменованих експортів:
// user.js
export const role = "admin";
export default function createUser(name) {
return {
name,
role
};
}Підключення:
// app.js
import createUser, { role } from "./user.js";
const user = createUser("Марія");
console.log(user);
console.log(role);Порядок такий:
спочатку вказують default-імпорт;
після нього — іменовані імпорти у фігурних дужках.
Створимо невеликий проєкт із трьох файлів:
project/
├── package.json
├── math.js
├── format.js
└── app.jsФайл package.json:
{
"type": "module"
}Файл math.js:
export function add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
export function multiply(firstNumber, secondNumber) {
return firstNumber * secondNumber;
}Файл format.js:
export default function formatResult(operation, result) {
return `${operation}: ${result}`;
}Файл app.js:
import { add, multiply } from "./math.js";
import formatResult from "./format.js";
const sum = add(10, 5);
const product = multiply(10, 5);
console.log(formatResult("Сума", sum));
console.log(formatResult("Добуток", product));Запустіть програму командою:
node app.jsРезультат:
Сума: 15
Добуток: 50Для підключення власного файлу потрібно вказати шлях до нього.
Відносний шлях починається з:
./ — поточна папка;
../ — батьківська папка.
Наприклад:
import { add } from "./math.js";У Node.js для відносних імпортів ES Modules зазвичай потрібно вказувати розширення файлу .js:
import { add } from "./math.js";Такий запис може спричинити помилку:
import { add } from "./math";Для стандартних модулів Node.js використовують спеціальні імена, наприклад:
import path from "node:path";
console.log(path.basename("/project/app.js"));Усі іменовані експорти можна підключити як один об’єкт за допомогою * as:
import * as math from "./math.js";
console.log(math.add(2, 4));
console.log(math.multiply(3, 5));У цьому випадку math містить усі іменовані експорти з файлу math.js.
Виклик функцій відбувається через крапку:
math.add(2, 4);
math.multiply(3, 5);Default-експорт таким способом не підключається як звичайна властивість іменованих експортів.
Модуль може експортувати значення, отримані з іншого модуля. Це корисно, коли потрібно створити один файл для доступу до кількох модулів.
Файл index.js:
export { add, multiply } from "./math.js";
export { default as formatResult } from "./format.js";Тепер в іншому файлі можна імпортувати все з index.js:
import { add, multiply, formatResult } from "./index.js";
console.log(formatResult("Сума", add(3, 4)));
console.log(formatResult("Добуток", multiply(3, 4)));import без отримання значенняІноді модуль потрібно просто виконати. Наприклад, файл може налаштовувати поведінку програми.
Файл startup.js:
console.log("Програму запущено");Підключення:
import "./startup.js";У цьому випадку жодне значення не зберігається в змінній, але код із startup.js виконається.
Неправильно:
import { add } from "./math";Правильно:
import { add } from "./math.js";Якщо файл містить:
export function add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}то такий імпорт неправильний:
import { sum } from "./math.js";Ім’я sum не було експортовано. Потрібно використати add або псевдонім:
import { add as sum } from "./math.js";Якщо файл містить:
export default function greet() {
return "Привіт";
}правильний імпорт:
import greet from "./greet.js";Неправильний варіант:
import { greet } from "./greet.js";Якщо використовується синтаксис import у файлах .js, переконайтеся, що в package.json є:
{
"type": "module"
}Альтернатива — перейменувати файли на .mjs.
Файл app.js у папці src і файл math.js у папці src/utils потрібно підключати так:
import { add } from "./utils/math.js";Шлях завжди обчислюється відносно файлу, у якому записано import.
export відкриває значення для використання в інших модулях.
import підключає експортовані значення.
Іменовані експорти підключають у фігурних дужках:
import { add } from "./math.js";Default-експорт підключають без фігурних дужок:
import greet from "./greet.js";В одному модулі може бути багато іменованих експортів, але лише один default-експорт.
Для ES Modules у Node.js потрібно додати "type": "module" або використовувати розширення .mjs.
У відносних шляхах до ES Modules потрібно вказувати розширення файлу.