Какой сборщик нужен: его выбирает платформа

«Какой сборщик взять?» — вопрос почти всегда задают не в том порядке. Сначала выбирают платформу: фреймворк, мобильное приложение, сервер или страницу вовсе без фреймворка. Нужен ли фреймворк, решает статья про фреймворки, а здесь — какой сборщик приходит вместе с ответом. Его называет скрипт в package.json, и этот скрипт положил туда шаблон проекта.

Ниже — скрипты трёх проектов учебника: приложения Next из статьи про Turbopack, шаблона Vite оттуда же и мобильного приложения автора. Прогноз: встретится ли в них слово webpack, Turbopack или Metro?

$ grep -E '"(dev|build|typecheck)":' next-app/package.json vite-app/package.json mobile/package.json

Ни разу. Сборщик назван командой платформы: за next dev и next build стоит Turbopack, за vite — Vite с Rolldown внутри, за expo start — Metro, который собирает бандл для телефона. Компилятор файла мобильное приложение тоже не выбирало: в babel.config.js один пресет, babel-preset-expo, и нужные плагины он подключает сам. Выбрали шаблон — выбрали и сборщик.

Заметьте и то, чего сборщик не делает ни в одном из трёх проектов, — проверку типов. У Vite перед сборкой стоит tsc -b, у мобильного приложения — отдельный скрипт typecheck, а next build проверяет типы своим шагом Running TypeScript. При любом сборщике типы проверяет не он.

Те же ответы одной таблицей. Версии в ней — на 15.09.2026, и у вас они могут быть уже другими: как это проверить, покажет последний раздел.

На том же Vite стоят SvelteKit и проекты, которые создаёт create-vue: выбрав их, вы выбрали и сборщик. Где какой компилятор файла и когда в проекте появляется Babel, подробнее — в таблице статьи про компилятор файла. Самому выбирать приходится в трёх нижних строках, где платформы нет или она из прошлого, — им и отданы следующие разделы.

Нижняя строка таблицы — самая короткая. Страница из своих модулей работает вовсе без сборки: точку входа подключают с type="module", остальные файлы браузер подтянет сам. Голому имени пакета адрес даёт карта импортов — тег <script type="importmap">. В статье про npm карта дала адрес имени dayjs, а Vite лечил ею каскад хешей в статье про свой сборщик. Карта ничего не склеивает и хеш в имя не ставит: она только говорит браузеру, где лежит файл с таким именем.

Сборка появляется вместе с первым пунктом из списка ниже. Все пункты в главе и раньше уже разобраны, поэтому здесь — только где:

Третья задача прикладывает этот список к странице из четырёх файлов: какие из них браузер не выполнит как есть.

webpack никуда не делся: пятая версия выходит до сих пор, даты последних выпусков — в листинге последнего раздела. Но для нового проекта его уже не советуют: документация React для сборки приложения с нуля называет Vite, Parcel и Rsbuild. У проекта, который уже живёт на webpack, три дороги — переехать на Turbopack, если это Next, переехать на Rspack или остаться.

Начнём с Next: Turbopack в нём — сборщик по умолчанию, и старый webpack.config приходится разбирать. Правило вы видели в статье про Turbopack: лоадеры переезжают в turbopack.rules, алиасы — в resolveAlias, плагины — нет, и кому без плагина не обойтись, тот собирает с флагом --webpack. migrate раскладывает типичный конфиг по этому правилу с одним уточнением: у DefinePlugin замена в next.config есть. Прогноз: какие строки получат «не переедет»?

// что из webpack.config переедет в next.config без webpack
const webpackConfig = {
  resolve: { alias: { "@": "./src" } },
  module: { rules: [{ test: /\.svg$/, use: ["@svgr/webpack"] }, { test: /\.ya?ml$/, use: ["yaml-loader"] }] },
  plugins: ["DefinePlugin", "BundleAnalyzerPlugin", "CopyWebpackPlugin"],
};

function migrate(config: typeof webpackConfig): string[] {
  const out: string[] = [];
  for (const name of Object.keys(config.resolve.alias)) out.push(`alias ${name} → turbopack.resolveAlias`);
  for (const rule of config.module.rules) out.push(`${rule.use.join()} → turbopack.rules`);
  for (const plugin of config.plugins) {
    // у DefinePlugin есть своя настройка в next.config, остальные плагины Turbopack не исполняет
    out.push(plugin === "DefinePlugin" ? "DefinePlugin → compiler.define" : `${plugin} → не переедет`);
  }
  return out;
}

migrate(webpackConfig).forEach((line) => console.log(line));

Две: BundleAnalyzerPlugin и CopyWebpackPlugin. «Не переедет» говорит о плагине, а не о задаче, которую он решал: у задачи бывает замена другим механизмом. Для разбора бандла у Next есть экспериментальная команда next experimental-analyze — по её справке, только для Turbopack. Замена DefinePlugin — настройка compiler.define, и на ней переезд легко сломать: значение там понимается иначе. Вот одни и те же пять значений в compiler.define у Next и в DefinePlugin у webpack:

$ cat next-define/next.config.ts

Одни и те же значения — два разных файла. У DefinePlugin значение — код: строка "/api" встала в бандл голыми буквами /api, и файл не разбирается, хотя сборка прошла без единой ошибки. Поэтому строки в webpack пишут через JSON.stringify("/api"). А "Date.now()" стало вызовом, который выполнится у посетителя, а не на сборке. У compiler.define значение — данные: в исходниках Next, в next/dist/build/define-env.js, каждое проходит через JSON.stringify. "/api" стало строкой, false и 3 — значениями, и ветку "dev" оба сборщика выбросили: Next свернул условие до "prod", webpack без минификации оставил на её месте 0. А JSON.stringify("/api") из старого конфига принёс кавычки внутрь текста.

Отсюда правило переноса: JSON.stringify снимают, а выражение данными не станет — его или вычисляют в самом next.config, или оставляют в коде. Перенос целиком — первая задача.

Вторая дорога — Rspack: сборщик с API webpack, написанный на Rust, и Rsbuild — готовая сборка над ним, та самая, что названа в документации React. Полной совместимости Rspack не обещает, и что переедет, проверяют по его же руководству по переезду:

$ D=https://raw.githubusercontent.com/web-infra-dev/rspack/main/website
$ curl -s $D/docs/en/guide/migration/webpack.mdx | grep -E "supports most|compatible with most|implemented most|new rspack.DefinePlugin|CopyRspackPlugin.*instead"

Везде стоит слово most — «большинство». Формат конфига тот же, лоадеры, как правило, берутся без изменений, у встроенных плагинов те же имена и параметры: DefinePlugin меняет только пространство имён, rspack.DefinePlugin вместо webpack.DefinePlugin. У copy-webpack-plugin есть встроенная замена, webpack-bundle-analyzer в таблице совместимости отмечен как работающий. Остальные плагины сверяют с той же таблицей по одному. Отсюда и место Rspack: проект держится за конфиг и плагины webpack, но хочет уйти с самого webpack.

Третья дорога — остаться. webpack выпускается, и для проекта, где всё работает, переезд — отдельная работа, а не обязанность. В Next остаться — значит собирать с --webpack.

Бывает, что платформы нет вовсе: нужен один файл для чужой страницы, расширения браузера или своей оснастки. Dev-сервер, горячая замена и манифесты такому файлу ни к чему — хватает одной функции build, и её даёт esbuild. Так собрана оснастка песочницы этого учебника. ts — настоящий компилятор TypeScript из примеров статьи про компилятор файла — приезжает в песочницу файлом, который собирает вот этот вызов:

$ grep -n -B6 -A3 "globalName: 'ts'" apps/web/scripts/build-ts-runtime.mjs

format: 'iife' оборачивает весь бандл в функцию, которая тут же выполняется, — тот самый приём IIFE. globalName: 'ts' кладёт её результат в глобальную переменную, отсюда первые байты файла: var ts=(()=>{. Песочница подключает этот файл тегом script раньше кода примера, поэтому ts в примерах и доступен без всякого import. Тем же скриптом и тем же esbuild для песочницы собран React — его подстановку режима вы видели в статье про компилятор файла.

Серверу на Node бандл нужен реже: пакеты из node_modules и файлы с диска Node находит сам. Nest из части VI собирает команда nest build: по умолчанию она зовёт tsc, и тот выпускает по файлу на каждый исходник, а с флагом -b swc — SWC. Чем этот выбор оборачивается для Nest, разберёт часть VI.

Всё версионное в этой главе подписано датой: листинги, таблица компиляторов и таблица из первого раздела. Дата там не для порядка. Проверить, что сдвинулось, можно двумя командами npm: dist-tags показывает, что ставится по умолчанию и что готовится следом, time — даты выпусков.

$ npm view next dist-tags.latest dist-tags.canary

Читается это просто. У Next рядом с latest стоит canary следующей версии, так что строка таблицы про Next поменяет номер. webpack и Rspack выпускаются по нескольку раз в месяц — номер webpack в таблице отстанет скоро. А тег next у babel-preset-expo уже смотрит на следующую ветку пресета, то есть на следующий SDK Expo, и вместе с ним сдвинется строка про Metro и Babel.

Кое-что уже известно как движущееся, и в главе оно помечено экспериментальным: порты React Compiler на Rust в Next и в Vite, режим разработки с бандлом и карта импортов для кусков в Vite. Babel 7, на котором работает Metro, получает только исправления безопасности, и срок у них назначен — он в таблице статьи про компилятор файла. А TypeScript уже сменился: npm install -D typescript ставит нативный компилятор седьмой версии.

$ npm ls typescript

Команда tsc на месте, только за ней теперь исполняемый файл под вашу платформу из отдельного пакета. А прежнего JS API в главном экспорте пакета нет: require("typescript") отдаёт только номер версии, и transpileModule там не найти. Новый API лежит в экспортах typescript/unstable/* и сам ничего не компилирует: он запускает тот же исполняемый файл отдельной программой и обменивается с ним сообщениями. Запускать программы Node умеет встроенным модулем node:child_process — его имя и нашёл grep в файлах API. Странице в браузере запускать программы на компьютере нельзя, поэтому песочница учебника, которой компилятор нужен прямо на странице, осталась на шестой версии.

Номера из этой главы устареют, а то, что вы собрали руками, — нет. Граф импортов, обёртка модуля и реестр с кешем, кусок по import() и хеш в имени, дерево и посетитель компилятора, ключ работы из входа — из этих деталей в разных сочетаниях собраны все сборщики главы, и от смены названий они не устареют. Появится новый — задайте ему те же вопросы: как он строит граф, где держит реестр, как называет куски, кто переводит файл и из чего собран ключ кеша.