21 / 33
Что такое import.meta и какие свойства он предоставляет?
Полный ответ
JavaScript
// В браузере
console.log(import.meta.url);
// "https:// example.com/js/app.js"
// В Node.js
console.log(import.meta.url);
// "file:/// home/user/project/app.js"
Практическое применение import.meta.url:
JavaScript
// 1. Получить путь к текущему файлу (замена __dirname в ESM)
// В CJS было: __dirname, __filename
// В ESM их нет, но можно вычислить:
import { fileURLToPath } from "node:url";
import { dirname } from "node:path";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
console.log(__filename); // /home/user/project/app.js
console.log(__dirname); // /home/user/project
// 2. Загрузить файл относительно текущего модуля
const configUrl = new URL("./config.json", import.meta.url);
const config = await fetch(configUrl).then((r) => r.json());
// 3. Определить, запущен ли файл напрямую (аналог CJS: require.main === module)
// Node.js 20.11+
if (import.meta.filename === process.argv[1]) {
console.log("Файл запущен напрямую");
main();
}
Свойства в Node.js (v20+):
JavaScript
// import.meta.url — URL текущего модуля
console.log(import.meta.url); // "file:/// project/app.js"
// import.meta.filename — абсолютный путь к файлу (Node.js 20.11+)
console.log(import.meta.filename); // "/project/app.js"
// import.meta.dirname — директория файла (Node.js 20.11+)
console.log(import.meta.dirname); // "/project"
// import.meta.resolve() — резолвит спецификатор модуля в URL
const lodashPath = import.meta.resolve("lodash");
console.log(lodashPath); // "file:/// project/node_modules/lodash/lodash.js"
Свойства в Vite:
JavaScript
// import.meta.env — переменные окружения
console.log(import.meta.env.VITE_API_URL); // "https:// api.example.com"
console.log(import.meta.env.MODE); // "development" или "production"
console.log(import.meta.env.DEV); // true в dev-режиме
console.log(import.meta.env.PROD); // true в production
// import.meta.hot — Hot Module Replacement
if (import.meta.hot) {
import.meta.hot.accept((newModule) => {
console.log("Модуль обновлён");
});
}
// import.meta.glob — импорт множества файлов по паттерну
const modules = import.meta.glob("./pages/*.js");
// { './pages/Home.js': () => import('./pages/Home.js'), ... }
Реальные кейсы
Загрузка ассетов относительно модуля:
JavaScript
// worker.js — создать Worker относительно текущего файла
const worker = new Worker(
new URL("./heavy-task.worker.js", import.meta.url),
{ type: "module" }
);
// Загрузка WASM-модуля
const wasmUrl = new URL("./processor.wasm", import.meta.url);
const wasmModule = await WebAssembly.instantiateStreaming(fetch(wasmUrl));
Типичная ошибка:
JavaScript
// ❌ import.meta не работает в CommonJS
// node script.cjs
console.log(import.meta.url); // SyntaxError: Cannot use 'import.meta' outside a module
// ✅ Только в ESM-файлах (.mjs или "type": "module")
Резюме
import.meta даёт модулю информацию о самом себе: путь, URL, переменные окружения. В Node.js это замена __dirname/__filename, в Vite — доступ к env и HMR. Работает только в ES Modules.