Vite — Примеры

Пример 1 — Секрет в переменной окружения с префиксом

Модуль оформления заказа читает платёжный секрет из переменной окружения, а сама переменная работает локально и попадает в собранный JavaScript. Объясните, какое правило нарушено, затем поместите значение туда, где ему место.

# .env
VITE_PAYMENTS_SECRET=<боевой секрет>

// src/checkout.js
const secret = import.meta.env.VITE_PAYMENTS_SECRET;

Решение

# .env — только публичные значения
VITE_API_BASE=/api

// src/checkout.js
const apiBase = import.meta.env.VITE_API_BASE;

// server/checkout.js — секрет остаётся на сервере
const secret = process.env.PAYMENTS_SECRET;

Клиентскому коду открыты только переменные с префиксом инструмента, и это не механизм безопасности: всё открытое подставляется в бандл как литерал, поэтому любой, кто скачает JavaScript, прочитает его. Префикс — метка намерения, которая говорит «это значение публично», и потому секрет, названный с этим префиксом, публикуется. Конфигурация, которая должна оставаться приватной, живёт в серверной конфигурации времени выполнения, куда попадают через эндпоинт, а клиент получает только то, что ему можно знать, — здесь это базовый путь API.

Пример 2 — Сборка, снимающая типы без их проверки

Продакшен-сборка проходит успешно, а ошибка типов доходит до пользователя: скрипт сборки запускает один бандлер. Скажите, что инструмент на самом деле делает с TypeScript, затем закройте разрыв, не добавляя вторую систему сборки.

{
  "scripts": { "build": "vite build" }
}

// src/pricing.ts
const rate: number = "wholesale".length ? 1.07 : "0.9";
//                     ^ попадает в продакшен, потому что типы снимаются, а не проверяются

Решение

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "build": "tsc --noEmit && vite build",
    "check": "npm run typecheck && npm run test && npm run build"
  }
}

Бандлер снимает аннотации типов, чтобы быстро получить JavaScript, однако никогда их не проверяет: неверная аннотация ничего не стоит во время сборки и всё — во время выполнения. Если запустить компилятор без вывода в том же скрипте, проверка возвращается, причём до медленного шага сборки, — именно этот порядок скрипт check задаёт один раз для людей, хуков и конвейера. Та же форма подходит и серверу разработки: это быстрый цикл обратной связи, а не ворота. Всё, что должно быть истинно перед релизом, обязана обеспечивать команда, которую кто-то действительно запускает.