Comment utiliser les variables d'environnement avec webpack+reactjs ?

Question

Je compile mes fichiers Reactjs à l'aide de webpack. Dans mon projet, j'ai besoin de faire des appels API vers le backend.

Maintenant j'ai 3 environnements qui seraient local, développement et production.

J'ai donc un fichier constants.jsx dans lequel j'ai déclaré ce qui suit:-

export const url= 'http://localhost:8002/api/v0';

Ainsi, dans mes composants, j'importe l'url d'en haut et je les utilise pour appeler APIS, mais comment dois-je changer la variable d'en haut selon qu'il s'agit de local, dev ou prod.

Comment mettre en œuvre ce qui précède ?

Answer 1

J'ai donc essayé plusieurs choses et j'ai résolu le problème en faisant ce qui suit:-

Dans notre configuration webpack, ajoutez un DefinePlugin . Voici ma configuration web:-

 plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.environment),
    }
  })
  ],

Maintenant, pendant la compilation, nous utilisons les commandes suivantes : -

environment=local webpack (for local)
environment=development webpack(for dev)
environment=production webpack(for prod)

Maintenant, si vous voyez que nous avons défini 'NODE_ENV' avec l'entrée cli, alors quand 'NODE_ENV' est produit comme valeur, le webpack réduit automatiquement votre bundle de sortie.

Maintenant disons que nous avons l'url de l'API déclarée dans un fichier (j'avais Constants.jsx), donc nous ajoutons ce qui suit à constants.jsx. Nous pouvons lire le NODE_ENV défini dans la configuration de webpack dans ce Constants.jsx et les importer dans vos composants à partir desquels les APIS sont appelés en les exportant d'ici.

const api_url=function(){
  let api_url='';
  if(process.env.NODE_ENV == 'local'){
    api_url= 'http://localhost:8002/api/v0';
  }
  else if(process.env.NODE_ENV == 'development'){
    api_url = 'https://development/api/v0';
  }
  else if(process.env.NODE_ENV == 'production'){
    api_url = 'https://production/api/v0';
  }
  return api_url;
}

export const url= api_url();