Модули ESM: импорт/экспорт

Когда программа растет, хранить все в одном файле становится неудобно. Современный JavaScript решает проблему с модулями ES (ESM): каждый файл представляет собой модуль, который может экспортировать функции, константы, классы и другие файлы могут импортировать их.

export

Вы экспортируете то, что хотите обнародовать. Две формы:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

Или в конце файла:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

Из другого файла:

// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

Объект { somma, PI } — это список имен, которые вы хотите импортировать. Они должны соответствовать экспортированные имена.

Экспорт по умолчанию

Каждый модуль может иметь один «основной» экспорт без имени:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

Вы импортируете его, выбрав имя локально:

import log from './log.js';
log('ciao');

Переименование

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

Одно «пространство имен» на файл

Модули изолированы: переменная, объявленная в файле, не попадает в глобальную область видимости. ты необходимо экспортировать его явно, чтобы сделать его видимым в другом месте. Это огромное улучшение по сравнению с JS старой школы, где каждый <script> делился window.

Попробуйте это

В приведенных ниже упражнениях вы не будете писать настоящий синтаксис import/export — песочница представляет собой единый файл. Вместо этого мы попросим вас организовать код в небольшие отдельные функции, которые сотрудничать, как если бы каждый из них находился в отдельном файле.

Обзор упражнения