Как вызвать из консоли функцию из модуля собранного сборщиком?

Как вызвать из консоли функцию из модуля собранного сборщиком

Это практический вопрос, который показывает глубокое понимание того, как работают современные сборщики (Webpack, Vite, Parcel) и как взаимодействовать с приложением в production. Это полезно для отладки, тестирования и быстрого прототипирования.

Проблема: Модули в сборке недоступны

Когда сборщик обрабатывает код, модули оказываются в замкнутой области видимости:

// math.js (исходный файл)
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// main.js (исходный файл)
import { add, multiply } from './math.js';

console.log(add(5, 3)); // 8

После сборки Webpack/Vite эти модули оборачиваются в IIFE (Immediately Invoked Function Expression) или другой формат, и прямой доступ из консоли невозможен:

// После сборки (примерно)
(function() {
  const math = {
    add: (a, b) => a + b,
    multiply: (a, b) => a * b
  };
  
  console.log(math.add(5, 3));
})(); // Замкнутая область видимости!

В консоли браузера:

add(5, 3) // ReferenceError: add is not defined
multiply(5, 3) // ReferenceError: multiply is not defined

Решение 1: Экспортировать на window объект

Простейший способ — сделать функции доступными глобально через window (в браузере) или global (в Node.js):

Способ 1a: В основном файле приложения

// src/main.js
import { add, multiply } from './math.js';

// Делаем функции доступными из консоли
window.add = add;
window.multiply = multiply;

// Или целый объект
window.mathFunctions = { add, multiply };

Теперь в консоли:

add(5, 3);           // 8
multiply(5, 3);      // 15
mathFunctions.add(5, 3); // 8

Способ 1b: Для разработки только

// src/main.js
import { add, multiply } from './math.js';

// Только в development mode
if (import.meta.env.DEV) {
  window.debug = { add, multiply };
}

В консоли:

debug.add(5, 3); // 8 (только в development)

Решение 2: Использование глобального объекта приложения

Лучше создать единый объект для всех debug функций:

// src/debug.js
export const setupDebug = (exports) => {
  if (process.env.NODE_ENV === 'development') {
    window.__DEBUG__ = exports;
  }
};

// src/main.js
import { add, multiply } from './math.js';
import { setupDebug } from './debug.js';

setupDebug({
  math: { add, multiply },
  utils: { /* другие функции */ }
});

В консоли:

__DEBUG__.math.add(5, 3);      // 8
__DEBUG__.math.multiply(5, 3); // 15
__DEBUG__;                      // Смотрим все доступные функции

Решение 3: Специальный модуль для отладки

// src/devtools.js
class DevTools {
  constructor() {
    this.modules = {};
  }
  
  register(name, module) {
    this.modules[name] = module;
    console.log(`Registered: ${name}`, module);
  }
  
  getModule(name) {
    return this.modules[name];
  }
  
  listModules() {
    return Object.keys(this.modules);
  }
}

const devTools = new DevTools();

if (import.meta.env.DEV) {
  window.devTools = devTools;
}

export default devTools;

// src/main.js
import devTools from './devtools.js';
import * as math from './math.js';
import * as utils from './utils.js';

if (import.meta.env.DEV) {
  devTools.register('math', math);
  devTools.register('utils', utils);
}

В консоли:

devTools.listModules();           // ['math', 'utils']
devTools.getModule('math').add(5, 3); // 8

Решение 4: Для Vue приложения

В Vue приложении можно использовать Instance API:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { add, multiply } from './math.js';

const app = createApp(App);

// Делаем функции доступными через app instance
app.config.globalProperties.$debug = {
  add,
  multiply
};

app.mount('#app');

// Для глобального доступа
if (import.meta.env.DEV) {
  window.__VUE_APP__ = app;
}

В консоли:

// Через window
window.__VUE_APP__.config.globalProperties.$debug.add(5, 3); // 8

// Или если просто на window
add(5, 3); // 8

Решение 5: Для React приложения

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { add, multiply } from './math';

const app = ReactDOM.createRoot(document.getElementById('root'));
app.render(<App />);

// Для отладки
if (process.env.NODE_ENV === 'development') {
  window.__REACT_DEBUG__ = {
    add,
    multiply
  };
}

В консоли:

__REACT_DEBUG__.add(5, 3); // 8

Решение 6: Использование DevTools браузера

Chrome DevTools с источниками:

1. Открой DevTools (F12)
2. Перейди на вкладку Sources
3. Найди нужный модуль в файлах
4. Поставь точку останова в функции
5. Вызови функцию через консоль или кликом в приложении
6. Пошагово отлаживай

Решение 7: Source Maps для отладки

В production стоит убедиться, что source maps включены только для разработки:

// vite.config.js
export default {
  build: {
    sourcemap: true, // Для разработки
    // sourcemap: false, // Для production
  }
};

// webpack.config.js
module.exports = {
  devtool: process.env.NODE_ENV === 'development' ? 'source-map' : false
};

Полный практический пример

Структура проекта:

src/
├── math.js         # Экспортируемые функции
├── api.js          # API функции
├── devtools.js     # Инструменты отладки
└── main.js         # Точка входа

src/math.js:

export const add = (a, b) => {
  console.log(`Adding ${a} + ${b}`);
  return a + b;
};

export const multiply = (a, b) => {
  console.log(`Multiplying ${a} * ${b}`);
  return a * b;
};

export const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

src/api.js:

export const fetchUser = async (id) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

export const createUser = async (userData) => {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData)
  });
  return response.json();
};

src/devtools.js:

class DevTools {
  constructor() {
    this.modules = {};
  }
  
  register(name, module) {
    this.modules[name] = module;
    console.log(`%c[DevTools] Registered: ${name}`, 'color: green; font-weight: bold;');
  }
  
  call(moduleName, functionName, ...args) {
    const module = this.modules[moduleName];
    if (!module) throw new Error(`Module '${moduleName}' not found`);
    if (!module[functionName]) throw new Error(`Function '${functionName}' not found`);
    return module[functionName](...args);
  }
  
  listModules() {
    return Object.keys(this.modules);
  }
  
  listFunctions(moduleName) {
    const module = this.modules[moduleName];
    return Object.keys(module);
  }
}

const devTools = new DevTools();

if (import.meta.env.DEV) {
  window.dt = devTools; // Короткое имя для консоли
}

export default devTools;

src/main.js:

import * as math from './math';
import * as api from './api';
import devTools from './devtools';

// Регистрируем модули
devTools.register('math', math);
devTools.register('api', api);

// Или просто на window для быстрого доступа
if (import.meta.env.DEV) {
  window.math = math;
  window.api = api;
  window.devTools = devTools;
}

// Остальной код приложения

В консоли браузера:

// Способ 1: Прямой доступ
math.add(5, 3);           // 8
math.fibonacci(10);       // 55
api.fetchUser(1);         // Promise<User>

// Способ 2: Через devTools
dt.call('math', 'add', 5, 3);           // 8
dt.listModules();                       // ['math', 'api']
dt.listFunctions('math');               // ['add', 'multiply', 'fibonacci']

// Способ 3: Через window.devTools
window.devTools.call('api', 'fetchUser', 1); // Promise<User>

Лучшие практики

1. Экспортируй только необходимое — не делай доступной всю внутреннюю логику
2. Только в dev mode — используй проверку import.meta.env.DEV
3. Документируй — оставляй комментарии о доступных функциях
4. Структурируй — используй объекты с понятной иерархией
5. Не забывай про security — в production не включай debug mode

// ПРАВИЛЬНО
if (import.meta.env.DEV) {
  window.__DEBUG__ = { add, multiply };
}

// НЕПРАВИЛЬНО
window.add = add; // Везде, в том числе в production

Заключение

Есть несколько способов вызвать функцию из модуля в консоли:

1. Экспортировать на window — самый простой способ
2. Объект debug — структурированный подход
3. DevTools класс — профессиональный инструмент отладки
4. Source Maps — использовать встроенные DevTools браузера
5. Только в dev mode — гарантировать безопасность в production

Выбор способа зависит от сложности приложения и требований команды. Для большого проекта лучше создать полноценный DevTools класс, для простого приложения достаточно одного объекта на window.