В esbuild выбор формата бандла определяется тем, где и как будет выполняться итоговый JavaScript-код. Один и тот же исходный код может требовать разных представлений в зависимости от среды: браузер без сборщика, Node.js с CommonJS-модулями, современная ESM-инфраструктура, серверные рантаймы или публикация библиотеки. Неправильный выбор формата приводит к несовместимостям импорта, ошибкам загрузки модулей и избыточному полифиллингу.
esbuild поддерживает несколько ключевых форматов, задаваемых через
опцию format:
esm — ECMAScript Modulescjs — CommonJSiife — Immediately Invoked Function Expressionumd — универсальный формат (в esbuild поддерживается
ограниченно и чаще заменяется связкой cjs/iife)Каждый формат решает конкретный класс задач и предполагает определённую среду выполнения.
Формат esm является наиболее универсальным для
современных сборок и инфраструктур.
esbuild input.js --format=esmimport и export<script type="module">)"type": "module"
или .mjs)ESM оптимален в случаях:
package.jsonФормат cjs ориентирован на традиционную
Node.js-модель.
esbuild input.js --format=cjsrequire() и module.exportsrequireФормат iife предназначен для выполнения кода прямо в
браузере без системы модулей.
esbuild input.js --format=iife --global-name=MyLibКод оборачивается в функцию, которая выполняется сразу:
var MyLib = (() => {
// внутренний код
return exportedAPI;
})();<script> без
bundler-инфраструктурыglobalName для экспортаПредпочтительный формат — esm.
Причины:
Часто требуется мультиформатная сборка:
esm для современных сборщиковcjs для Node.js-совместимостиiife для CDNТипичная стратегия:
dist/index.mjs — ESMdist/index.cjs — CommonJSdist/index.global.js — IIFEТакой подход обеспечивает максимальную совместимость без потери производительности в целевых окружениях.
Выбор зависит от конфигурации проекта:
esm предпочтителенimportcjs остаётся стандартомДля прямого подключения в браузере:
iifeglobalNameПричина: отсутствие модульного загрузчика в среде исполнения.
esbuild использует параметр platform, который тесно
связан с выбором формата:
browser — оптимизация под браузерnode — оптимизация под Node.jsneutral — универсальная сборка без специфики средыplatform=browser + format=esm —
современный frontendplatform=node + format=cjs — классический
backendplatform=browser + format=iife — legacy
браузерная доставкаВ современных npm-пакетах формат напрямую отражается в поле
exports:
{
"exports": {
"import": "./dist/index.mjs",
"require": "./dist/index.cjs"
}
}import → ESMrequire → CJSesbuild часто используется для генерации всех целевых файлов одновременно.
Code splitting поддерживается только в ESM:
import()В cjs и iife:
Это делает ESM единственным форматом для современных SPA с ленивой загрузкой модулей.
Хотя format определяет модульную систему,
target определяет синтаксис:
es2015, es2020, esnextnode12, node18, chrome90 и
т.д.esmneutrales2018+cjsnodenode16+esm + cjs + iifetype="module"Логика выбора формата может рассматриваться как сопоставление двух факторов:
Формат вывода в esbuild является не просто опцией сборки, а механизмом адаптации одного и того же исходного кода под разные модели исполнения JavaScript. Различия между ESM, CJS и IIFE определяют:
Выбор формата всегда определяется не синтаксисом исходного кода, а требованиями среды, в которой этот код будет выполняться.