UMD и IIFE: сборка для браузера без модульной системы

Форматы UMD и IIFE в Rollup используются для создания бандлов, которые могут выполняться в браузере без наличия нативной модульной системы. Эти форматы особенно важны для библиотек, которые должны подключаться через <script> и работать в глобальном контексте, а также для поддержки старых окружений, где ES-модули или CommonJS недоступны.

Формат IIFE (Immediately Invoked Function Expression) представляет собой самовызывающуюся функцию, внутри которой инкапсулируется весь код сборки. Основная цель — изоляция пространства имён и предотвращение загрязнения глобальной области видимости.

В Rollup этот формат применяется для создания файлов, которые подключаются напрямую через тег script и сразу выполняются в браузере.

Типичная структура IIFE-бандла:

(function () {
  'use strict';

  function add(a, b) {
    return a + b;
  }

  console.log(add(2, 3));
})();

Ключевые особенности IIFE:

  • отсутствие экспортов как интерфейса модуля
  • выполнение кода сразу после загрузки
  • изоляция переменных внутри функции-обёртки
  • доступ к API возможен только через глобальные переменные (если они явно созданы)

IIFE в Rollup

Конфигурация Rollup для IIFE-вывода обычно задаётся через параметр output.format:

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.iife.js',
    format: 'iife',
    name: 'MyLibrary'
  }
};

Параметр name критически важен. Он определяет имя глобальной переменной, через которую будет доступна библиотека.

Пример результата:

var MyLibrary = (function () {
  function sum(a, b) {
    return a + b;
  }

  return {
    sum
  };
})();

Таким образом, библиотека становится доступной через window.MyLibrary в браузере.

Особенности использования IIFE

IIFE подходит для:

  • небольших библиотек
  • утилит без сложной структуры зависимостей
  • скриптов, подключаемых напрямую через <script>

Ограничения:

  • отсутствие встроенной системы зависимостей
  • невозможность динамического импорта
  • сложность масштабирования больших проектов

UMD: универсальный модульный формат

UMD (Universal Module Definition) представляет собой гибридный формат, обеспечивающий совместимость с несколькими системами модулей:

  • AMD (Asynchronous Module Definition)
  • CommonJS
  • глобальная переменная в браузере

Цель UMD — обеспечить максимальную совместимость одной сборки с разными окружениями.

Структура UMD-бандла включает проверку среды выполнения:

(function (global, factory) {
  if (typeof module === 'object' && typeof module.exports === 'object') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else {
    global.MyLibrary = factory();
  }
})(typeof window !== 'undefined' ? window : this, function () {

  function multiply(a, b) {
    return a * b;
  }

  return {
    multiply
  };
});

UMD в Rollup

Rollup автоматически генерирует UMD-обёртку при указании соответствующего формата:

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.umd.js',
    format: 'umd',
    name: 'MyLibrary'
  }
};

Параметр name используется в качестве глобального имени для браузерного окружения.

Если библиотека имеет зависимости, Rollup пытается встроить их внутрь UMD-сборки, если они не помечены как external.

Разница между IIFE и UMD

Контекст использования

IIFE ориентирован исключительно на браузер и глобальную область видимости. UMD предназначен для универсального использования в разных системах модулей.

Совместимость

  • IIFE: только браузер через <script>
  • UMD: браузер + CommonJS + AMD

Структура

IIFE представляет собой простую функцию-обёртку. UMD содержит дополнительную логику определения среды выполнения.

Размер бандла

  • IIFE: меньше размер из-за отсутствия проверок окружения
  • UMD: немного больше из-за условной логики загрузки

Экспорт API в IIFE и UMD

В обоих форматах экспорт реализуется через возвращаемый объект:

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

export { add, subtract };

После сборки в IIFE или UMD результат будет выглядеть как объект с методами:

MyLibrary.add(2, 3);
MyLibrary.subtract(5, 1);

Глобальное имя библиотеки

Параметр name в Rollup определяет точку подключения библиотеки в браузере:

output: {
  format: 'umd',
  name: 'Utils'
}

Результат:

window.Utils.add(1, 2);

Особенности выбора имени:

  • должно быть уникальным в глобальном контексте
  • не должно конфликтовать с другими библиотеками
  • часто используется неймспейсирование (например, Company_ProjectName)

Взаимодействие с внешними зависимостями

В UMD и IIFE важно корректно управлять зависимостями через external.

export default {
  input: 'src/index.js',
  external: ['lodash'],
  output: {
    format: 'umd',
    name: 'MyLibrary',
    globals: {
      lodash: '_'
    }
  }
};

В этом случае lodash не включается в бандл, а ожидается в глобальной переменной _.

Работа с браузерной загрузкой

IIFE и UMD предназначены для загрузки через <script>:

<script src="bundle.umd.js"></script>
<script>
  MyLibrary.multiply(2, 3);
</script>

Порядок подключения критичен при наличии внешних зависимостей.

Особенности минификации

При использовании IIFE и UMD важно учитывать:

  • сохранение имени глобальной переменной
  • корректную работу с обфускацией
  • отсутствие конфликтов с системными объектами

Rollup позволяет интегрировать terser для оптимизации:

import { terser } from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    format: 'umd',
    name: 'MyLibrary'
  },
  plugins: [terser()]
};

Типичные ошибки при использовании

  • отсутствие параметра name при UMD/IIFE
  • неправильное объявление external зависимостей
  • конфликт глобальных имён
  • попытка использовать динамические импорты внутри IIFE-бандла
  • смешивание ES-модулей и глобального доступа без явного экспорта

Роль IIFE и UMD в экосистеме Rollup

Несмотря на доминирование ES-модулей, IIFE и UMD остаются важными форматами распространения библиотек. Они обеспечивают совместимость с устаревшими окружениями, CDN-подключениями и сценариями без сборщика.

Rollup использует эти форматы как конечный слой трансформации модульного кода в универсально исполняемый JavaScript-файл, пригодный для непосредственного использования в браузере.

Оглавление