Как сохранить файл конфигурации и прочитать его с помощью React
Я новичок в react.js я реализовал один компонент, в котором я получаю данные с сервера и использую его как,
CallEnterprise:function(TenantId){
fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises)
{
EnterprisePerspectiveActions.getEnterprise(enterprises);
}).catch(function()
{
alert("There was some issue in API Call please contact Admin");
//ComponentAppDispatcher.handleViewAction({
// actionType: MetaItemConstants.RECEIVE_ERROR,
// error: 'There was a problem getting the enterprises'
//});
});
},
Я хочу сохранить Url-адрес в файле конфигурации, поэтому, когда я развернул его на тестовом сервере или на производстве, я должен просто изменить url-адрес в файле конфигурации не в js-файле, но я не знаю, как использовать файл конфигурации в react.js
может кто-нибудь, пожалуйста, направьте меня, как я могу этого достичь ?
4 ответов
С webpack вы можете поместить env-конкретную конфигурацию в externals
поле в webpack.config.js
externals: {
'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
serverUrl: "https://myserver.com"
} : {
serverUrl: "http://localhost:8090"
})
}
если вы хотите сохранить конфигурации в отдельном файле JSON, это тоже возможно, вы можете потребовать этот файл и назначить Config
:
externals: {
'Config': JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
}
затем в ваших модулях вы можете использовать config:
var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')
не уверен, что он охватывает ваш случай использования, но он работает довольно хорошо для нас.
Если вы использовали Create React App, вы можете установить переменную среды с помощью a .файл env. Документация здесь:
в принципе сделать что-то подобное в .env файл в корне проекта.
REACT_APP_SECRET_CODE=abcdef
Вы можете получить доступ к нему из своего компонента с
process.env.REACT_APP_SECRET_CODE
вы можете использовать пакет dotenv независимо от того, какую настройку вы используете. Это позволяет вам создать .env в корне вашего проекта и укажите свои ключи так
SERVER_PORT=8000
в файле ввода приложений ваш просто вызовите dotenv (); перед доступом к ключам, как так
process.env.SERVER_PORT
в случае, если у вас есть .свойства файла или .ini-файл
На самом деле, если у вас есть какой-либо файл, который имеет пары ключевых значений, как это:
someKey=someValue
someOtherKey=someOtherValue
вы можете импортировать это в webpack с помощью модуля npm под названием свойства-reader
я нашел это очень полезным, так как я интегрирую react с Java Spring framework, где уже есть приложение.файл свойств. Это помогает мне держать всю конфигурацию вместе в одном место.
- импортируйте это из раздела зависимостей в пакете.в JSON
"properties-reader": "0.0.16"
- импортировать этот модуль в webpack.конфиг.js on top
const PropertiesReader = require('properties-reader');
- читать файл свойств
const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;
- импортируйте эту константу как config
externals: {
'Config': JSON.stringify(appProperties)
}
- использовать его так же, как указано в принятый ответ
var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')