Замените переменные в пакете веб-пакета, не нарушая исходную карту и не перестраивая

Question

У меня есть некоторые переменные в моем коде javascript (который связан с веб-пакетом), которые необходимо заменить для каждой среды:

const AUTHENTICATE_URL = '{{conf.authenticate_url}}'

Как мне это сделать, не перезапуская сборку для каждой среды (запуск выполняется слишком медленно). У меня не может быть второго тега в моем html, мне нужен только один тег, содержащий пакет.

В настоящее время я просто заменяю эти переменные с помощью процессора шаблонов, но это нарушает отображение источника и означает, что я могу потенциально заменить вещи, которые я не собирался заменять.

Answer 1

Это действительно не лучшая идея - собирать все один раз и вставлять один и тот же код в каждую среду, но если это так, как должно быть ...

Плагин определения веб-пакета

WebPack

new webpack.DefinePlugin({
  'SERVICE_URL_DEV': JSON.stringify('http://dev.example.com'),
  'SERVICE_URL': JSON.stringify('http://example.com')
});

JS

if (DEV_ENVIRONMENT) {
  console.log(SERVICE_URL_DEV);
} else {
  console.log(SERVICE_URL);
}

Я предполагаю, что здесь вы можете определить разницу, в какой среде вы находитесь, и я предполагаю, что в вашем коде была константа, которую вы выяснили через URL или что-то из окна, и она называлась DEV_ENVIRONMENT, которая было верно в dev и false в продукт.

Редактировать: Поскольку мы действительно не знаем, что вы имеете в виду 100%. В случае, если вы никогда не хотите перестраивать, и вам просто нужно каждый раз менять переменную для каждой среды.

Использование axios.

Файл

variable.json в каждой среде, разные URL-адреса в каждой

{authUrl: 'https://dev.example.com'}

Файл JS в приложении

let AUTHENTICATE_URL;
axios.get('https://yoururl.com/path/to/variable.json').then((response) => {
  AUTHENTICATE_URL = response.data.authUrl;
});