Приложение 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
да. Я добавил в свой вопрос несколько фрагментов кода, объясняющих мои изменения.
То, как вы пытаетесь это сделать, вводит содержимое jsonConfig прямо в бандл. Чтобы иметь внешний файл конфигурации, который может динамически обновлять приложение, вероятно, потребуется другой метод загрузки, такой как запрос AJAX при загрузке приложения.
Я так и думал. Вместо этого рассмотрим переход на dotenv. Это послужило бы моей цели, верно?
Раньше я не использовал dotenv, но, похоже, это потенциально хорошее решение для этого.
К сожалению, dotenv тоже не работает. Таким образом, webpack будет предоставлять все ссылки на переменные среды при объединении так же, как и при импорте. Ссылки: npmjs.com/package/dotenv-webpackwebpack.js.org/plugins/environment-plugin
Я прихожу к выводу, что то, чего я хочу достичь, невозможно, если я не перестрою все приложение или не получу вызов API на внутренний сервер узла моего приложения, который может считывать переменные среды и передавать их обратно моему приложению. Ссылки: github.com/facebook/create-react-app/blob/master/packages/…
Кто-нибудь может подтвердить мои выводы?
В документации create-react-app есть раздел, относящийся к Injecting Data from the Server into the Page. github.com/facebook/create-react-app/blob/master/packages/… Кто-нибудь знает, как это сделать? Кстати, я не использую create-react-app. Я использую свою конфигурацию с помощью webpack.
Я собираюсь попробовать это и посмотреть, подходит ли это моей цели: jvandemo.com/…





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