Verwenden von Dotenv-Modul mit React

Question

Ich habe dotenv in meiner dependencies meiner App. Den Anweisungen folgend, habe ich eine .env Akte und Innere ist NODE_ENV=development.

In meiner main.js Datei, betreibe ich eine einfache require('dotenv').config(); und doch, wenn ich process.env zugreifen, würde ich ein Objekt erwarten und ich {}

Was ich hier falsch mache? Danke

Answer 1

dotenv funktioniert nur in der Server-Seite. Um .env auf der Clientseite mit Webpack zu verwenden, verwenden Sie dotenv-webpack.

1. Installieren Sie das Paket, yarn add dotenv-webpack -D ODER npm install dotenv-webpack --save

2. es zu Webpack Konfigurationsdatei hinzufügen.

   // webpack.config.js 
   const Dotenv = require('dotenv-webpack'); 
   module.exports = { 
       ... 
       plugins: [ 
       new Dotenv({ 
        path: './.env', // Path to .env file (this is the default) 
        safe: true // load .env.example (defaults to "false" which does not use dotenv-safe) 
       }) 
       ] 
       ... 
   };

3. hinzufügen .env auf Ihre .gitignore Datei

HINWEIS: Ihre .env Dateien können vertrauliche Informationen enthalten. Aus diesem Grund wird dotenv-webpack nur Umgebungsvariablen offen legen, die in Ihrem Code explizit auf Ihr endgültiges Bundle referenziert werden.