Reactでどのように設定ファイルを使用できますか？

Question

5つのjsxファイルがあり、各ファイルにいくつかの設定パラメータがあるとします。 私のindex.jsファイルは、これらの5つのjsxファイルをすべてインポートします。

私の設定データを5つのファイルに広げる代わりに、jsxファイルが設定ファイルからデータをロードしたグローバルなJSオブジェクトからデータを取得する方法はありますか？

私はいくつかの例を見ましたが、私はそれらを動作させることができませんでした。
JS6 import function | Example using webpack

Answer 1

と仮定すると、ES6：次に

config.js 

export const myConfig = { importantData: '', apiUrl: '', ... }; 

：

jsxFileOne.js, jsxFileTwo.js, ... 

import { myConfig } from 'config.js'; 

がグローバルにWebPACKのを活用&輸出物事をインポートする他の方法がありますが、これはあなたが始める必要があります。

Answer 2

Webpackを使用してプロジェクトを構築する場合は、node-env-fileを使用することを検討してください。
例設定ファイルのスニペット：

development.env
API_SERVER_URL=https://www.your-server.com

webpack.config.jsあなたのjs/JSXコード内

const envFile = require('node-env-file'); 
... 
const appSettingsFile = isDevBuild ? '/settings/development.env' : '/settings/production.env'; 

try { 
    envFile(path.join(__dirname + appSettingsFile)); 
} catch (error) { 
    console.log("Failed to read env file!: " + __dirname + appSettingsFile); 
} 
... 
plugins: [ 
    new webpack.DefinePlugin({ 
     "process.env": { 
      API_SERVER_URL: JSON.stringify(process.env.API_SERVER_URL) 
     } 
    }) 
    ... 
] 

、あなたは今どの意志process.env.API_SERVER_URL変数にアクセスすることができます必要な値を含みます。

dotenvパッケージが人気のようですが、これも試してみることができます。