React / Webpack исключает обновляемый файл конфигурации из пакета

Приложение My React использует веб-пакет для объединения ресурсов, которые затем помещаются в образ Docker для развертывания. У меня есть набор переменных конфигурации, которые я хочу добавить в файл JSON, который может быть прочитан моим приложением во время выполнения. Например, ключи API или URL-адреса API, которые можно изменить в любой момент. Этот файл JSON будет обновляться по мере необходимости через Kubernetes Configmaps и Secrets.

Я просмотрел много сообщений и решений, но, похоже, ни одно из них не работает правильно.

Например, если я попробую решения по приведенным ниже ссылкам, файл JSON будет объединен вместе с другими ресурсами. Мне нужно снова перезапустить webpack / build, чтобы изменения в файле JSON отразились в моем приложении.

Webpack - включить файл конфигурации как внешний ресурс

Как сохранить файл конфигурации и прочитать его с помощью React

Любой способ использовать веб-пакет для загрузки ресурса во время выполнения?

Как лучше всего удовлетворить мои требования?

Структура моего проекта следующая:

├── config
│   └── jsonConfig.prod.json (This will be updated on the server)
├── src (My react application code which gets bundled via webpack)

Содержимое jsonConfig.prod.json:

{
  "name": "my-app"
}

Мой webpack.config.js

externals: {
  'jsonConfig': JSON.stringify(PRODUCTION ? require('./jsonConfig.prod.json') : require('./jsonConfig.dev.json'))
}

В моем коде (после npm run build):

import * as jsonConfig from 'jsonConfig';
console.info(jsonConfig.name); // my-app

Меняю содержимое jsonConfig.prod.json:

{
  "name": "my-app2"
}

В моем коде (та же сборка, что и раньше):

import * as jsonConfig from 'jsonConfig';
console.info(jsonConfig.name); // Still my-app

Итак, вы пробовали добавить файл в externals в конфигурации Webpack, но это не сработало? Если это так, возможно, вы сделали что-то не так, потому что это 100% правильный способ решить эту проблему.

Adam 01.10.2018 08:14

да. Я добавил в свой вопрос несколько фрагментов кода, объясняющих мои изменения.

Eric P Pereira 01.10.2018 11:35

То, как вы пытаетесь это сделать, вводит содержимое jsonConfig прямо в бандл. Чтобы иметь внешний файл конфигурации, который может динамически обновлять приложение, вероятно, потребуется другой метод загрузки, такой как запрос AJAX при загрузке приложения.

Adam 01.10.2018 19:47

Я так и думал. Вместо этого рассмотрим переход на dotenv. Это послужило бы моей цели, верно?

Eric P Pereira 03.10.2018 06:17

Раньше я не использовал dotenv, но, похоже, это потенциально хорошее решение для этого.

Adam 03.10.2018 06:30

К сожалению, dotenv тоже не работает. Таким образом, webpack будет предоставлять все ссылки на переменные среды при объединении так же, как и при импорте. Ссылки: npmjs.com/package/dotenv-webpackwebpack.js.org/plugins/environment-plugin

Eric P Pereira 09.10.2018 05:54

Я прихожу к выводу, что то, чего я хочу достичь, невозможно, если я не перестрою все приложение или не получу вызов API на внутренний сервер узла моего приложения, который может считывать переменные среды и передавать их обратно моему приложению. Ссылки: github.com/facebook/create-react-app/blob/master/packages/…

Eric P Pereira 09.10.2018 05:56

Кто-нибудь может подтвердить мои выводы?

Eric P Pereira 09.10.2018 05:57

В документации create-react-app есть раздел, относящийся к Injecting Data from the Server into the Page. github.com/facebook/create-react-app/blob/master/packages/… Кто-нибудь знает, как это сделать? Кстати, я не использую create-react-app. Я использую свою конфигурацию с помощью webpack.

Eric P Pereira 09.10.2018 05:58

Я собираюсь попробовать это и посмотреть, подходит ли это моей цели: jvandemo.com/…

Eric P Pereira 09.10.2018 10:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
10
621
0

Другие вопросы по теме