web-dev-qa-db-fra.com

Comment utiliser un fichier de configuration dans React?

Disons que j'ai 5 fichiers jsx et que chaque fichier utilise un paramètre de configuration. Mon fichier index.js importe tous ces 5 fichiers jsx.

Au lieu de répartir mes données de configuration sur 5 fichiers, mes fichiers jsx peuvent-ils obtenir les données d'un objet JS global ayant chargé les données d'un fichier de configuration?

J'ai vu des exemples, mais je n'ai pas réussi à les faire fonctionner.
Fonction d'importation JS6 | Exemple utilisant webpack

javascriptreactjswebpack
7
Steven

En supposant que ES6:

config.js

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

Ensuite:

jsxFileOne.js, jsxFileTwo.js, ...

import { myConfig } from 'config.js';

Il existe d'autres moyens d'importer et d'exporter des éléments à l'échelle mondiale en exploitant WebPack, mais cela devrait vous aider à démarrer.

23
Bryan Fillmer

Si votre projet est construit à l'aide de Webpack, envisagez d'utiliser node-env-file .
Exemple de fragments de fichier de configuration: 

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

webpack.config.js 

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)
        }
    })
    ...
]

Dans votre code js/jsx, vous pouvez maintenant accéder à la variable process.env.API_SERVER_URL qui contiendra la valeur requise.

Il semble que dotenv package soit plus populaire, vous pouvez l’essayer aussi.

1
sntnupl