@davidobryakov: “Переключение сред исполнения в Vite #советы #frontend #vite Мало ли вы…”

Переключение сред исполнения в Vite

#советы #frontend #vite

Мало ли вы не знали, но в vite можно использовать MODE. При этом, он будет браться из имени вашего файла. К примеру, у вас есть .env.prod и .env.dev. Если вы хотите, чтобы какой-то код был доступен только в деве (например, когда вы только выкатываете новую фичу для теста, а ветка по какой-то причине одна, такое бывает), то вы можете использовать такой код для этого:

const isProdMode = import.meta.env.MODE === 'prod';

if (isProdMode) {
    // Код, который должен исполняться только в prod режиме
} else {
    // Код для других режимов
}

Такой же код можно вставлять даже внутрь самих компонентов, например в JSX это может выглядеть так:

{isProdMode && <HelloWorld />}

При самой сборке и запуске можно указывать аргумент -m со значением dev или prod (или каким-либо другим значением, которое вы заложите).

  "scripts": {
    "start": "npm run dev",
    "dev:prod": "vite --port 3000 -m prod",
    "dev": "vite --port 3000 -m dev"
  }

Подробнее: https://vite.dev/guide/env-and-mode