Перечень допустимых значений target

Параметр target в Esbuild определяет, для каких версий JavaScript-движков или браузеров должен быть сгенерирован итоговый код. На основе указанного значения Esbuild принимает решение о необходимости преобразования современных конструкций языка в более совместимый синтаксис.

Если целевая платформа не поддерживает определённую возможность JavaScript, Esbuild попытается выполнить соответствующую трансформацию. Если преобразование невозможно, будет выдана ошибка сборки.

Пример:

await build({
  entryPoints: ['src/index.js'],
  outfile: 'dist/app.js',
  bundle: true,
  target: 'es2017'
})

В данном случае код будет преобразован таким образом, чтобы соответствовать возможностям стандарта ECMAScript 2017.

Форматы указания цели

Параметр может принимать:

  • одно значение;
  • массив значений;
  • обозначение стандарта ECMAScript;
  • конкретные версии браузеров;
  • версии JavaScript-движков.

Пример одного значения:

target: 'es2020'

Пример нескольких целей:

target: ['chrome100', 'firefox100']

Esbuild анализирует все указанные платформы и выбирает уровень совместимости, удовлетворяющий каждой из них.

Значения ECMAScript

Наиболее распространённый способ настройки — указание версии стандарта ECMAScript.

es5

Поддержка старых браузеров и устаревших окружений.

target: 'es5'

Особенности:

  • максимально широкий уровень совместимости;
  • значительное количество трансформаций;
  • увеличение объёма итогового кода;
  • снижение производительности некоторых современных возможностей.

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

es2015 (ES6)

Первый крупный релиз современного JavaScript.

target: 'es2015'

Поддерживает:

  • стрелочные функции;
  • классы;
  • шаблонные строки;
  • модули;
  • let и const.

Пример исходного кода:

const sum = (a, b) => a + b

После трансформации для старых платформ:

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

es2016

Добавляет оператор возведения в степень.

target: 'es2016'

Пример:

const result = 2 ** 3

es2017

Добавляет поддержку асинхронных функций.

target: 'es2017'

Пример:

async function loadData() {
  return await fetch('/api/data')
}

es2018

Расширяет возможности работы с объектами и регулярными выражениями.

target: 'es2018'

Включает:

  • rest/spread для объектов;
  • асинхронные итераторы;
  • улучшенные регулярные выражения.

Пример:

const clone = {
  ...original
}

es2019

Добавляет ряд улучшений языка.

target: 'es2019'

Поддерживаемые возможности:

  • Array.prototype.flat;
  • Array.prototype.flatMap;
  • необязательный параметр в catch.

Пример:

try {
  doSomething()
} catch {
  console.log('Ошибка')
}

es2020

Один из наиболее популярных вариантов.

target: 'es2020'

Содержит:

  • Optional Chaining;
  • Nullish Coalescing;
  • BigInt;
  • динамический импорт.

Пример:

const name = user?.profile?.name

es2021

Добавляет новые строковые и логические операторы.

target: 'es2021'

Пример:

value ||= defaultValue

Также доступны:

value &&= newValue
value ??= fallbackValue

es2022

Расширяет возможности классов.

target: 'es2022'

Поддерживаются:

  • поля классов;
  • приватные поля;
  • статические блоки инициализации.

Пример:

class User {
  #name

  constructor(name) {
    this.#name = name
  }
}

es2023

Отражает возможности стандарта ECMAScript 2023.

target: 'es2023'

Используется для современных браузеров и актуальных версий Node.js.

es2024

Современная цель для новейших платформ.

target: 'es2024'

Подходит для проектов, ориентированных на последние версии браузеров и серверных сред выполнения.

esnext

Указывает Esbuild использовать максимально современный синтаксис без попыток понижения версии.

target: 'esnext'

Пример:

await build({
  target: 'esnext'
})

Особенности:

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

Часто используется для библиотек и внутренних проектов, где контроль над окружением полностью известен.

Целевые браузеры

Вместо версии стандарта можно указывать конкретные браузеры.

Chrome

Формат:

target: 'chrome80'

Пример:

target: 'chrome115'

Firefox

Формат:

target: 'firefox102'

Пример:

target: 'firefox120'

Safari

Формат:

target: 'safari16'

Пример:

target: 'safari17'

Edge

Формат:

target: 'edge110'

Пример:

target: 'edge120'

Opera

Формат:

target: 'opera95'

Internet Explorer

Формат:

target: 'ie11'

Используется крайне редко из-за устаревания браузера.

Следует учитывать, что Esbuild не способен полностью эмулировать все современные возможности JavaScript для Internet Explorer.

iOS Safari

Формат:

target: 'ios15'

Пример:

target: 'ios17'

Целевые JavaScript-движки

Помимо браузеров, поддерживаются различные среды выполнения.

Node.js

Формат:

target: 'node18'

Примеры:

target: 'node16'
target: 'node20'
target: 'node22'

Очень распространённый вариант для серверных приложений.

Deno

Формат:

target: 'deno1.40'

Пример:

target: 'deno1.41'

Hermes

JavaScript-движок, используемый в React Native.

target: 'hermes'

Либо с указанием версии:

target: 'hermes0.12'

Использование массива целей

Часто приложение должно работать сразу в нескольких окружениях.

Пример:

target: [
  'chrome110',
  'firefox110',
  'safari16'
]

Esbuild анализирует минимальные возможности среди всех перечисленных платформ и генерирует код, совместимый с каждой из них.

Сравнение популярных значений

Значение Типичный сценарий
es5 Поддержка устаревших браузеров
es2015 Старые корпоративные проекты
es2017 Широкая совместимость
es2020 Современные веб-приложения
es2022 Новые браузеры и Node.js
esnext Максимально современный код
node18 Серверные приложения
node20 Современные backend-проекты
chrome120 Приложение для актуального Chrome

Выбор подходящего значения

Для современных веб-приложений

Наиболее распространённый вариант:

target: 'es2020'

или

target: [
  'chrome110',
  'firefox110',
  'safari16'
]

Для Node.js-сервисов

Если используется современный Node.js:

target: 'node20'

Такой подход позволяет избежать лишних трансформаций.

Для библиотек

Часто применяется:

target: 'esnext'

или несколько сборок:

target: 'es2018'

для совместимой версии и

target: 'esnext'

для современного варианта.

Для максимальной совместимости

target: 'es5'

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

Проверка поддержки синтаксиса

При указании слишком старой цели Esbuild может сообщить о невозможности преобразования определённой конструкции.

Например:

target: 'es5'

и код:

await fetch('/api')

может привести к диагностическому сообщению, если требуемое преобразование невозможно выполнить безопасно без дополнительных инструментов.

В подобных случаях обычно используются:

  • полифилы;
  • Babel;
  • повышение версии target;
  • изменение исходного кода.

Влияние target на производительность сборки

Чем современнее указанная цель, тем меньше преобразований требуется выполнить.

Пример:

target: 'esnext'

Преимущества:

  • более быстрая сборка;
  • меньший размер бандла;
  • сохранение современного синтаксиса.

Пример:

target: 'es5'

Недостатки:

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

Поэтому рекомендуется выбирать наиболее современную цель, которая соответствует требованиям поддерживаемых платформ.

Оглавление