나는 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을 저장하고 싶으므로 테스트 서버 또는 프로덕션에 배포 할 때 js 파일이 아닌 구성 파일의 URL을 변경해야하지만 react.js에서 구성 파일을 사용하는 방법을 모르겠습니다.

누구든지 이것을 어떻게 얻을 수 있습니까?

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(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

그런 다음 모듈에서 구성을 사용할 수 있습니다.

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

React의 경우 :

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

그것이 당신의 사용 사례를 포함하는지 확실하지 않지만 우리에게는 꽤 잘 작동하고 있습니다.

Create React App을 사용한 경우 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 문서는 다음과 같습니다.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

기본적으로 프로젝트 루트의 .env 파일에서 이와 같은 작업을 수행하십시오.

REACT_APP_NOT_SECRET_CODE=abcdef

구성 요소에서 액세스 할 수 있습니다.

process.env.REACT_APP_NOT_SECRET_CODE

어떤 설정을 사용하든 dotenv 패키지를 사용할 수 있습니다. 프로젝트 루트에 .env를 만들고 다음과 같이 키를 지정할 수 있습니다.

REACT_APP_SERVER_PORT=8000

응용 프로그램 항목 파일에서 dotenv (); 이렇게 키에 액세스하기 전에

process.env.REACT_APP_SERVER_PORT

.properties 파일 또는 .ini 파일이있는 경우

실제로 다음과 같은 키 값 쌍이있는 파일이있는 경우 :

someKey=someValue
someOtherKey=someOtherValue

properties-reader 라는 npm 모듈로 webpack으로 가져올 수 있습니다.

이미 application.properties 파일이있는 Java Spring 프레임 워크와 반응을 통합하고 있기 때문에 이것이 정말 유용하다는 것을 알았습니다. 이렇게하면 모든 구성을 한곳에 보관할 수 있습니다.

1. package.json의 종속성 섹션에서 가져옵니다.

"properties-reader": "0.0.16"

2. 이 모듈을 상단의 webpack.config.js로 가져옵니다.

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

3. 속성 파일 읽기

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

4. 이 상수를 구성으로 가져 오기

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

5. 수락 된 답변에 언급 된 것과 동일한 방식으로 사용하십시오.

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