Как вы, возможно, знаете, в большинстве случаев мы можем использовать переменные среды для разных сред, а не жестко кодировать URL-адреса API, ключи API и другие элементы конфигурации. Наиболее часто используемыми средами являются разработка и производство. 😆
Это еще один вариант использования, который может захотеть использовать конфигурации среды.
Я хотел изменить тему в соответствии с окружающей средой. Одно и то же приложение для двух или более разных поставщиков. 😃 Это лучшее решение, если одно и то же приложение предоставляется разным клиентам, они могут быть в восторге, если приложение имеет ту же тему, которая соответствует их бизнес-теме.
env-cmd
Простая программа node для выполнения команд с использованием среды из файла env.
Для различных настроек среды я использую файл «.env-cmdrc.json». Мы можем писать наши конфиги в формате json, что делает их более читабельными и ремонтопригодными. Который должен располагаться в корневом каталоге (см. рисунок 1).
Как установить
npm install env-cmd or npm install -g env-cmd
пример файла .env-cmdrc.json
{
«client1»: {
«REACT_APP_NAME»: «client-1»
},
«client2»: {
«REACT_APP_NAME»: «client-2 ”
}
}
Выше в конфиге json я поставил два конфигурационных окружения для двух разных клиентов. Это клиент-1 и клиент-2. Все имена конфигураций должны начинаться с префикса «REACT_APP».
Затем я могу получить доступ к этим конфигурациям среды, используя {process.env.property_name}блок кода.
Согласно приведенному выше файлу json, мы можем получить значение свойства REACT_APP_Header,
{process.env.REACT_APP_NAME}
Как мы можем начать с необходимой среды?
В файле package.json есть раздел скрипта. Как мой пример,
«скрипты»: {
«запуск»: «запуск сценариев реагирования»,
«сборка»: «сборка сценариев реагирования»
}
В этом скрипте мы видим команду с левой стороны (имя свойства json). С правой стороны мы видим конкретный файл сценария. При изменении свойства левой стороны мы можем указать аргумент. Как показано выше, мы можем запустить приложение реакции с помощью команды «npm run start». Здесь мы используем имя свойства «start» в качестве аргумента. Точно так же мы можем установить наш аргумент в соответствии с окружающей средой.
«сценарии»: {
«start:client1»: «env-cmd -e client1 запуск сценариев реагирования»,
«start:client2»: «env-cmd -e client2 запуск сценариев реагирования» ,
«build:client1»: «env-cmd -e client1 сборка реактивных сценариев»,
«build:client2»: «env-cmd -e client2 сборка реактивных сценариев»
}
Здесь я задаю отдельные аргументы для разных сред. В качестве значения свойства я установил сценарий env-cmd, передав имя среды, которое я упомянул в .env-cmdrc.json. Поэтому я могу запустить приложение для client1 (переменная среды) с помощью «npm run start:client1».
Хорошо, теперь я закончил основные настройки. Давайте перейдем к части стиля.
Здесь я использую файлы SCSS для стилизации. Затем я могу передать значения стиля в качестве параметров. Перед использованием файла SCSS необходимо установить пакет node-sass.
npm установить узел-sass
Вот моя структура проекта,
В соответствии с изображением выше я создаю папку ресурсов внутри «src». Точно так же я создаю отдельные файлы «scss» для разных клиентов, и есть основной файл style.scss, который будет импортироваться другими файлами «env.scss».
ресурс/env/client1/env.scss
// клиент-1 файл env.scss
$theme: red;
ресурс/env/client2/env.scss
// клиент-2 файл scss
$theme: blue;
ресурс/style.scss
.App {
background: $theme;
}
Наконец, я могу импортировать требуемый файл «scss» в файл «App.js» и использовать его стили.
if (process.env.REACT_APP_NAME === 'client-1') {
require(“./resource/env/client1/env.scss”);
}
else {< br /> требуют ("./resource/env/client2/env.scss");
}
or
require('./resource/env/'+process.env.REACT_APP_NAME+'/env.scss');
Демо…
запуск запуска npm: клиент1
запуск запуска npm: клиент2
Это базовый и простой пример, и вы можете разработать его по-своему в соответствии с бизнес-требованиями. 😏
URL Github: https://github.com/KavinduGayan/react-ui-theme-test
