Как сохранить файл конфигурации и прочитать его с помощью 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. Документация здесь:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-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, где уже есть приложение.файл свойств. Это помогает мне держать всю конфигурацию вместе в одном место.

  1. импортируйте это из раздела зависимостей в пакете.в JSON

"properties-reader": "0.0.16"

  1. импортировать этот модуль в webpack.конфиг.js on top

const PropertiesReader = require('properties-reader');

  1. читать файл свойств

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

  1. импортируйте эту константу как config

externals: { 'Config': JSON.stringify(appProperties) }

  1. использовать его так же, как указано в принятый ответ

var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')