React를 사용하여 구성 파일을 저장하고 읽는 방법

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을 컨피규레이션파일에 저장하고 싶기 때문에 테스트 서버 또는 프로덕션에서 이 파일을 전개할 때 js 파일에 없는 구성 파일의 URL을 변경해야 하지만 react.js에서 구성 파일을 사용하는 방법을 알 수 없습니다.

어떻게 하면 좋을까요?

웹 팩을 사용하면 환경 고유의 설정을externals에 참가하다.webpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

Configuration을 다른 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/...')

반응의 경우:

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

변수 이름은 RECT_APP_로 시작해야 합니다.

컴포넌트에서 액세스 할 수 있습니다.

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

이를 웹 팩에 Import하려면 properties-reader라는npm 모듈을 사용합니다.

이미 application.properties 파일이 있는 Java Spring 프레임워크와 react를 통합하고 있기 때문에 매우 도움이 되었습니다.이를 통해 모든 설정을 한 곳에 유지할 수 있습니다.

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

"properties-reader": "0.0.16"

2. 이 모듈을 맨 위의 webpack.config.js로 Import합니다.

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/...')

이것은 오래된 질문이라는 것을 알고 있습니다.wj-config라는 질문에 대한 향후 독자를 위해 새로운 설정 패키지를 추가하겠습니다.

저도 최근에 dotenv가 제 욕구를 충족시키지 못하기 때문에 이 주제를 이해하려고 노력했습니다.가 되는 것.대부분의 경우 인터넷 개발자로 잘 알고 있습니다.넷 구성이 마음에 들어서 JavaScript 세계에서도 이런 것을 꼭 원했습니다.

아무것도 찾을 수 없어서 wj-config를 만들었습니다.와 거의 비슷하게 동작합니다.Net Configuration, NodeJ 및 ReactJ 및 기타 브라우저 라이브러리/프레임워크에서 작동합니다.주의사항:ES 모듈로 기술되어 있기 때문에 비교적 최신 버전의 NodeJ와 최신 브라우저에서만 작동합니다.또한, React에는 아직 활성화되지 않은 최상위 수준의 대기 기능이 필요하지만, 프로젝트의 ReadMe가 3분 이내에 이 문제를 해결하는 방법을 설명하므로 걱정할 필요가 없습니다.

그 용도를 설명하는 블로그 투고도 했습니다.

이 패키지는 특히 URL 설정에 탁월하며, 수백 개의 URL이 필요한 경우 dotenv에서 볼 수 있는 가장 큰 단점입니다.

언급URL : https://stackoverflow.com/questions/30568796/how-to-store-configuration-file-and-read-it-using-react