私はreact.jsの初心者です。サーバーからデータをフェッチして次のように使用する1つのコンポーネントを実装しました。

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を使用すると、環境固有の設定を次の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

プロパティリーダーと呼ばれるnpmモジュールによってそれをwebpackにインポートできます。

すでにapplication.propertiesファイルがあるJava Springフレームワークと統合して反応しているので、これは本当に役に立ちました。これにより、すべての構成を1か所にまとめることができます。

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