Frontend builds in Bazel with Vite and rules_js

TL;DR: Bazel + Vite через rules_js позволяет создавать высокопроизводительные и воспроизводимые frontend-сборки. Этот подход сочетает мощь Bazel с современным DX от Vite.

Введение

Bazel — это мощный build system, который обеспечивает воспроизводимость и масштабируемость сборок. Однако его интеграция с frontend-экосистемой традиционно была сложной. С появлением Vite как современного инструмента для сборки frontend-приложений и rules_js как набора правил для работы с JavaScript в Bazel, эта задача стала значительно проще.

Основная часть

Настройка Bazel с rules_js

Для начала установим необходимые зависимости:

npm install @bazel/bazelisk @bazel/ibazel

Создадим файл WORKSPACE для инициализации Bazel:

load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")

http_archive(
    name = "rules_js",
    sha256 = "...",
    url = "https://github.com/aspect-build/rules_js/releases/download/v1.0.0/rules_js-v1.0.0.tar.gz",
)

load("@rules_js//js:repositories.bzl", "rules_js_dependencies")

rules_js_dependencies()

load("@rules_js//npm:repositories.bzl", "npm_translate_lock")

npm_translate_lock(
    name = "npm",
    pnpm_lock = "//:pnpm-lock.yaml",
)

Интеграция Vite

Создадим правило Bazel для сборки с помощью Vite:

load("@rules_js//js:defs.bzl", "js_binary")

js_binary(
    name = "vite",
    entry_point = "node_modules/vite/bin/vite.js",
    data = [
        "//:package.json",
        "//:vite.config.ts",
        "//src",
    ],
    args = ["build"],
)

Теперь можно запустить сборку:

bazel build //:vite

Оптимизации

Используем Bazel для кэширования и параллелизации:

load("@rules_js//js:defs.bzl", "js_library")

js_library(
    name = "src",
    srcs = glob(["src/**/*.ts"]),
    deps = [
        "@npm//react",
        "@npm//react-dom",
    ],
)

Практическое применение

Инкрементальные сборки

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

Кэширование

Bazel кэширует результаты сборки, что позволяет повторно использовать результаты на разных машинах и в CI/CD пайплайнах.

Масштабируемость

С помощью Bazel можно легко масштабировать сборку на сотни модулей и пакетов, сохраняя при этом высокую производительность.

Заключение

Интеграция Vite в Bazel через rules_js открывает новые возможности для создания эффективных и масштабируемых frontend-сборок. Этот подход сочетает лучшие стороны обоих инструментов: мощь и воспроизводимость Bazel с современным developer experience от Vite. Для команд, работающих над крупными проектами, это может стать значительным шагом вперед в оптимизации процессов разработки и сборки.

Источник: https://nerden.de/bazel_frontend_vite