Esbuild предоставляет два основных способа управления процессом сборки:
Обе модели используют одинаковые внутренние механизмы, однако
синтаксис настройки отличается. При миграции между CLI и JavaScript API
важно понимать соответствие между флагами командной строки и объектом
конфигурации, передаваемым в функции build(),
context() или transform().
Общий принцип выглядит следующим образом:
esbuild src/index.js --bundle --minify --outfile=dist/app.js
Эквивалент на Jav * aScript:
import * as esbuild from 'esbuild';
await esbuild.build({
entryPoints: ['src/index.js'],
bundle: true,
minify: true,
outfile: 'dist/app.js'
});
Во многих случаях имя CLI-флага практически полностью совпадает с названием свойства объекта конфигурации.
entryPointsCLI:
esbuild src/index.js src/admin.js
JS API:
await esbuild.build({
entryPoints: [
'src/index.js',
'src/admin.js'
]
});
При использовании CLI входные файлы перечисляются без специальных
флагов. В JavaScript API они передаются через массив
entryPoints.
--bundle → bundleCLI:
esbuild src/index.js --bundle
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
bundle: true
});
Включает объединение зависимостей в итоговый пакет.
--outfile →
outfileCLI:
esbuild src/index.js --outfile=dist/app.js
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
outfile: 'dist/app.js'
});
Указывает путь к единственному выходному файлу.
--outdir → outdirCLI:
esbuild src/index.js src/admin.js --outdir=dist
JS API:
await esbuild.build({
entryPoints: [
'src/index.js',
'src/admin.js'
],
outdir: 'dist'
});
Используется при множественных точках входа.
--format → formatCLI:
esbuild src/index.js --format=esm
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
format: 'esm'
});
Поддерживаемые значения:
esmcjsiifeПример CommonJS:
format: 'cjs'
Пример IIFE:
format: 'iife'
--platform →
platformCLI:
esbuild src/index.js --platform=node
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
platform: 'node'
});
Доступные варианты:
platform: 'browser'
platform: 'node'
platform: 'neutral'
--target → targetCLI:
esbuild src/index.js --target=es2020
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
target: 'es2020'
});
Несколько целей:
CLI:
esbuild src/index.js --target=chrome120,firefox120
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
target: [
'chrome120',
'firefox120'
]
});
--minify → minifyCLI:
esbuild src/index.js --minify
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
minify: true
});
Включает:
--minify-whitespace
→ minifyWhitespaceCLI:
esbuild src/index.js --minify-whitespace
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
minifyWhitespace: true
});
--minify-identifiers
→ minifyIdentifiersCLI:
esbuild src/index.js --minify-identifiers
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
minifyIdentifiers: true
});
--minify-syntax →
minifySyntaxCLI:
esbuild src/index.js --minify-syntax
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
minifySyntax: true
});
--sourcemap →
sourcemapCLI:
esbuild src/index.js --sourcemap
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
sourcemap: true
});
CLI:
esbuild src/index.js --sourcemap=inline
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
sourcemap: 'inline'
});
Другие варианты:
sourcemap: 'external'
sourcemap: 'linked'
sourcemap: 'both'
--entry-names →
entryNamesCLI:
esbuild src/*.js --outdir=dist --entry-names=[name]-bundle
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
outdir: 'dist',
entryNames: '[name]-bundle'
});
--chunk-names →
chunkNamesCLI:
esbuild src/index.js --splitting --chunk-names=chunks/[name]-[hash]
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
splitting: true,
chunkNames: 'chunks/[name]-[hash]'
});
--asset-names →
assetNamesCLI:
esbuild src/index.js --asset-names=assets/[name]-[hash]
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
assetNames: 'assets/[name]-[hash]'
});
--splitting →
splittingCLI:
esbuild src/index.js --bundle --splitting --format=esm
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
bundle: true,
splitting: true,
format: 'esm'
});
Разделение кода работает только для ESM-сборок.
--loader:.ext=value →
loaderCLI:
esbuild src/index.js --loader:.png=file
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
loader: {
'.png': 'file'
}
});
Несколько загрузчиков:
CLI:
esbuild src/index.js \
--loader:.png=file \
--loader:.svg=text \
--loader:.txt=text
JS API:
await esbuild.build({
loader: {
'.png': 'file',
'.svg': 'text',
'.txt': 'text'
}
});
--external →
externalCLI:
esbuild src/index.js --external:react
JS API:
await esbuild.build({
entryPoints: ['src/index.js'],
external: ['react']
});
Несколько зависимостей:
CLI:
esbuild src/index.js \
--external:react \
--external:react-dom
JS API:
await esbuild.build({
external: [
'react',
'react-dom'
]
});
--define → defineCLI:
esbuild src/index.js --define:DEBUG=true
JS API:
await esbuild.build({
define: {
DEBUG: 'true'
}
});
Пример для переменных окружения:
CLI:
esbuild src/index.js \
--define:process.env.NODE_ENV=\"production\"
JS API:
await esbuild.build({
define: {
'process.env.NODE_ENV': '"production"'
}
});
--drop → dropCLI:
esbuild src/index.js --drop:console
JS API:
await esbuild.build({
drop: ['console']
});
Удаление нескольких типов:
CLI:
esbuild src/index.js \
--drop:console \
--drop:debugger
JS API:
await esbuild.build({
drop: [
'console',
'debugger'
]
});
--jsx → jsxCLI:
esbuild src/app.jsx --jsx=automatic
JS API:
await esbuild.build({
entryPoints: ['src/app.jsx'],
jsx: 'automatic'
});
Другие варианты:
jsx: 'transform'
jsx: 'preserve'
--jsx-factory →
jsxFactoryCLI:
esbuild src/app.jsx --jsx-factory=h
JS API:
await esbuild.build({
jsxFactory: 'h'
});
--jsx-fragment →
jsxFragmentCLI:
esbuild src/app.jsx --jsx-fragment=Fragment
JS API:
await esbuild.build({
jsxFragment: 'Fragment'
});
--jsx-import-source
→ jsxImportSourceCLI:
esbuild src/app.jsx --jsx-import-source=preact
JS API:
await esbuild.build({
jsxImportSource: 'preact'
});
В CLI используется специальный режим:
esbuild src/index.js --watch
В JavaScript API применяется объект контекста:
const context = await esbuild.context({
entryPoints: ['src/index.js'],
bundle: true
});
await context.watch();
Соответствие здесь не является прямым свойством конфигурации, поскольку наблюдение запускается отдельным методом.
CLI не имеет полного аналога в виде флага.
JS API:
const context = await esbuild.context({
entryPoints: ['src/index.js'],
bundle: true
});
await context.rebuild();
Механизм используется для повторной сборки без полной инициализации проекта.
--metafile →
metafileCLI:
esbuild src/index.js --metafile=meta.json
JS API:
const result = await esbuild.build({
entryPoints: ['src/index.js'],
metafile: true
});
Сохранение результата:
import fs from 'fs';
fs.writeFileSync(
'meta.json',
JSON.stringify(result.metafile)
);
--outbase →
outbaseCLI:
esbuild src/pages/home.js \
src/pages/admin.js \
--outdir=dist \
--outbase=src
JS API:
await esbuild.build({
entryPoints: [
'src/pages/home.js',
'src/pages/admin.js'
],
outdir: 'dist',
outbase: 'src'
});
Позволяет сохранить структуру вложенных каталогов.
--log-level →
logLevelCLI:
esbuild src/index.js --log-level=warning
JS API:
await esbuild.build({
logLevel: 'warning'
});
Поддерживаемые уровни:
logLevel: 'silent'
logLevel: 'error'
logLevel: 'warning'
logLevel: 'info'
logLevel: 'debug'
--legal-comments →
legalCommentsCLI:
esbuild src/index.js --legal-comments=eof
JS API:
await esbuild.build({
legalComments: 'eof'
});
Допустимые значения:
legalComments: 'none'
legalComments: 'inline'
legalComments: 'linked'
legalComments: 'external'
legalComments: 'eof'
--write=false →
writeCLI:
esbuild src/index.js --write=false
JS API:
await esbuild.build({
write: false
});
Получение результата:
const result = await esbuild.build({
entryPoints: ['src/index.js'],
bundle: true,
write: false
});
console.log(result.outputFiles);
| CLI | JS API |
|---|---|
--bundle |
bundle |
--outfile |
outfile |
--outdir |
outdir |
--format |
format |
--platform |
platform |
--target |
target |
--minify |
minify |
--minify-whitespace |
minifyWhitespace |
--minify-identifiers |
minifyIdentifiers |
--minify-syntax |
minifySyntax |
--sourcemap |
sourcemap |
--entry-names |
entryNames |
--chunk-names |
chunkNames |
--asset-names |
assetNames |
--splitting |
splitting |
--loader:.ext=value |
loader |
--external |
external |
--define |
define |
--drop |
drop |
--jsx |
jsx |
--jsx-factory |
jsxFactory |
--jsx-fragment |
jsxFragment |
--jsx-import-source |
jsxImportSource |
--metafile |
metafile |
--outbase |
outbase |
--log-level |
logLevel |
--legal-comments |
legalComments |
--write=false |
write: false |
Понимание этой таблицы существенно упрощает переход между автоматизированными сценариями сборки и ручным запуском Esbuild из командной строки. Практически любой CLI-флаг имеет прямой аналог в JavaScript API, что обеспечивает единообразие конфигурации независимо от способа запуска сборщика.