Import: примеры (JAVASCRIPT)

Базовые примеры использования

Импорт экспорта по умолчанию:

// module.js
export default function() {
    return 'Hello';
}

// main.js
import greeting from './module.js';
console.log(greeting());

Hello

Импорт именованных экспортов:

// module.js
export const pi = 3.14159;
export function double(x) {
    return x * 2;
}

// main.js
import { pi, double } from './module.js';
console.log(pi);
console.log(double(5));

3.14159
10

Импорт с переименованием:

// module.js
export const veryLongVariableName = 'value';

// main.js
import { veryLongVariableName as shortName } from './module.js';
console.log(shortName);

value

Импорт всего модуля:

// module.js
export function func1() { return 1; }
export function func2() { return 2; }

// main.js
import * as module from './module.js';
console.log(module.func1());
console.log(module.func2());

1
2

Импорт для побочных эффектов:

// analytics.js
console.log('Analytics module loaded');
trackPageView();

// main.js
import './analytics.js';

Analytics module loaded

Альтернативы в JavaScript

require() (CommonJS):

Используется в Node.js до появления ES6 модулей. Загружает модули синхронно во время выполнения. Предпочтительнее в средах, где ES6 модули не поддерживаются.

const module = require('./module.js');
module.function();

Динамический import():

Функция, которая возвращает promise. Позволяет загружать модули асинхронно по требованию. Используется для code splitting и ленивой загрузки.

// Загрузка по требованию
button.addEventListener('click', async () => {
    const module = await import('./module.js');
    module.doSomething();
});

Сравнение:

• import - статический, для большинства случаев
• require() - для Node.js без поддержки ES6 модулей
• import() - для динамической загрузки и code splitting

Аналоги в других языках

Python:

Использует ключевое слово import. Модули загружаются во время выполнения.

import module
from module import function
import module as alias

PHP:

Использует конструкции include, require, use для пространств имен.

include 'file.php';
require_once 'library.php';
use App\Models\User;

Java:

Использует ключевое слово import для включения классов из пакетов.

import java.util.ArrayList;
import static java.lang.Math.PI;

C/C++:

Использует директиву препроцессора #include для включения заголовочных файлов.

#include 
#include "myheader.h"

Основные отличия:

• JavaScript импорт статичен и анализируется до выполнения
• Python и PHP загружают модули во время выполнения
• Java работает с пакетами и классами, а не с файлами
• C/C++ использует текстовую вставку через препроцессор

Типичные ошибки

Ошибка пути к модулю:

import { func } from 'module'; // Без указания расширения или пути

// Должно быть:
import { func } from './module.js';

Error: Cannot find module 'module'

Импорт несуществующего экспорта:

// module.js
export const a = 1;

// main.js
import { b } from './module.js'; // b не существует

SyntaxError: The requested module does not provide an export named 'b'

Использование вне модуля:

// Файл без type="module" в script теге
import { func } from './module.js';

SyntaxError: Cannot use import statement outside a module

Циклические зависимости:

// a.js
import { b } from './b.js';
export const a = 'A' + b;

// b.js
import { a } from './a.js';
export const b = 'B' + a;

ReferenceError: Cannot access 'a' before initialization

Изменения в последних версиях

В ES2020 добавлена поддержка динамического импорта как части стандарта. Раньше это была возможность, зависящая от среды выполнения.

Добавлена поддержка импорта JSON модулей:

import config from './config.json' assert { type: 'json' };

Улучшена обработка ошибок при импорте. Теперь ошибки загрузки модулей генерируют более информативные сообщения.

В Node.js добавлена полная поддержка ES6 модулей с флагом --experimental-modules, а теперь и без него при использовании расширения .mjs или установки type: "module" в package.json.

Расширенные примеры

Динамический импорт с обработкой ошибок:

async function loadModule(moduleName) {
    try {
        const module = await import(`./modules/${moduleName}.js`);
        return module;
    } catch (error) {
        console.error(`Failed to load module: ${moduleName}`);
        // Загрузка fallback модуля
        return import('./modules/fallback.js');
    }
}

loadModule('user').then(module => {
    module.getUser();
});

Импорт нескольких модулей параллельно:

Promise.all([
    import('./module1.js'),
    import('./module2.js'),
    import('./module3.js')
]).then(([module1, module2, module3]) => {
    // Использование всех загруженных модулей
    module1.init();
    module2.init();
    module3.init();
});

Условный импорт в зависимости от среды:

let analyticsModule;

if (process.env.NODE_ENV === 'production') {
    analyticsModule = await import('./analytics-prod.js');
} else {
    analyticsModule = await import('./analytics-dev.js');
}

analyticsModule.trackEvent('pageView');

Re-экспорт (баррель экспорт):

// components/index.js
export { Button } from './Button.js';
export { Input } from './Input.js';
export { Modal } from './Modal.js';

// main.js
import { Button, Input, Modal } from './components/index.js';

Импорт с side effects только в development:

if (process.env.NODE_ENV === 'development') {
    await import('./dev-tools.js');
    // Модуль dev-tools.js может добавлять
    // дополнительные возможности для отладки
}

Импорт WebAssembly модулей:

const wasmModule = await import('./module.wasm');
const result = wasmModule.exports.add(2, 3);
console.log(result);

5