Как вынести настройки переменных JavaScript вне репозитория?

Question

[kolya_krut]

Здравствуйте.

Есть сайт site.example.com. Есть сервер, на котором поднят веб-сокет ws.example.com. Есть локальные компьютеры разработчиков, есть сервер разработки, которые на совершенно других доменах.
JS скрипты собираются веб-паком.
Как адрес подключения к веб-сокету указать в каких-нибудь настройках, но так, чтобы в собранный файл попадал правильный сервер и работало везде? При этом настройки всегда можно было переопределить локально или на сервере разработки.
Как в php (да и практически везде на бэкэнде, наверное), допустим, есть config.php с основными настройками, которые уходят в репозиторий. И есть config.local.php, в котором переопределяется что нужно и файл не уходит в репозиторий. Сливаются 2 файла и получаем те настройки, которые нужны на данном конкретно сервере. Все счастливы.
С учётом веб-пака такая схема тут не прокатит - будет кто последний, тот и папа.
Как быть?

Answer 1

[Ilya]

у вас при сборке вебпака может указываться среда сборка process.env.NODE_ENV равная production или development, относительно ее можно разруливать значения тех или иных переменных

Comments

[kolya_krut]

это не подходит и в этом-то и проблема, т.к. вебпак соберет с какими-то конкретными значениями, которые должны отличаться.
если сказать вебпаку собрать некий единый /js/script.js с NODE_ENV=production со значениями боевого сервера, то он и соберёт с этими значениями. и открыв локальный сайт с подключенным только что собранным /js/script.js, то работать будет неправильно, т.к. собранный файл будет обращаться к боевому серверу, а нужно к локальному.
этот готовый /js/script.js должен быть одинаков для всех серверов

Answer 2

[kolya_krut]

пока вижу только такое решение.
на стороне бэкэнда в конфигах, которые вне репозитория, указать адрес вебсокета. при сборке страницы подставлять его в data атрибут какого-нибудь html элемента. а общий и одинаковый для всех js будет читать из этого атрибута адрес и открывать соединение

Answer 3

[Sergey Petrenko]

Заведите отдельный config.js, который на самом деле генерируется, например, тем же PHP и содержит в себе то, что нужно в зависимости от того, откуда пришёл запрос.

Если очень грубо, то:

<?php
echo "window.__appConfig = ".json_encode($frontConfig).";";
die();

Answer 4

[Дмитрий Щербаков]

Вы уже как-то решили свой вопрос? А то не отмечено решение ((

У меня такая же проблема, на фронте полностью отказался от php и перешел на HTML + JS (я правда бандл собираю через gulp) и тоже столкнулся с проблемой что задача gulp build собирает бандл который тоже должен работать и на локалке и на сервере и тоже гадаю где мне хранить путь (в моем случае до API сервера)

Я пока что придумал такое решение есть gulpfile.js в котором делаем
1. две переменные apiPathDev и apiPathProd
2. две задачи build-dev и build-prod

в зависимости от того какая задача выполняется в ней выполняется подстановка в index.html в какой-нибудь элемент, например в атрибут data-api-path="url-here"

а дальше js при старте подхватывает это значение и помещает в переменную

Comments

[Дмитрий Щербаков]

В общем я решил это вот так

Создал два файла
/src/env/env.js >> var pathServerAPI = 'your.api.domain.tld';
/src/env/env-dev.js >> var pathServerAPI = 'api.localhost';

Дальше они вот так в gulp перемещаются

function envProd() {
    return gulp.src('src/env/env.js')
        .pipe(gulp.dest('build/assets'));
}

function envDev() {
    return gulp.src('src/env/env-dev.js')
        .pipe(rename('env.js'))
        .pipe(gulp.dest('build/assets'));
}

Если запустили задачу build то переносится файл env.js
Если запустили задачу build-dev то переносится файл env-dev.js и переименовывается в env.js

В html подключаем файл

[kolya_krut]

Дмитрий Щербаков, спасибо за вариант.
Пока используется php, останусь на предложенном мной варианте.