Regardez les variables d'environnement React du code source

// 文件目录结构
|--config
		|--jest
		|--env.js
		...
		|--paths.js
|--node_modules
|--public
|--scripts
		|--build.js
		|--start.js
		|--test.js
|--src
|--package.json

Utiliser des bibliothèques tierces dotenv, dotenv-expand

Le fichier d'analyse dotenv est affecté à process.env et le fichier .env est analysé par défaut. Vous pouvez également ajouter une configuration pour analyser d'autres fichiers
```
const path = require("path");
const envFile = path.join(__dirname, ".env.local")
dotenv({
      
      path: envFile});
```
Dotenv-expand

Par défaut, dotenv ne peut pas analyser les variables dans le fichier, il doit s'agir d'une chaîne, dotenv-expand étend la fonction de dotenv

Les variables peuvent être référencées dans le fichier cible via $ / ${}
```
// .env.local
NODE_ENV = "production"
VUE_APP_NAME = "vue app"

SUNSET = $REAC_APP_NAME
```

règles d'utilisation

React stipule que pour utiliser des variables sur process.env, vous pouvez créer de nouveaux fichiers tels que .env, .env.development, .env.production, .env.local localement et définir REACT_APP
des variables commençant par dans les fichiers. Ensuite, vous pouvez utiliser process.env.xxxdes variables d'environnement comme dans votre projet.

Regardez le processus de définition des variables d'environnement à partir du code source

Lorsque nous exécutons npm start, scripts --> start.jsdeux variables sont montées au début de l'en-tête du fichier
BABEL_ENV,NODE_ENV

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

puis allez dans config --> env.jsle dossier

Tout d'abord, dotenvFiles est défini ici, qui est un tableau contenant plusieurs noms de fichiers.Ces noms de fichiers sont les fichiers qui définissent les variables (.env, .env.local, .env.development ...) spécifiées par react mentionné ci-dessus. paths.dotenv可以在config --> paths.js`, qui est le fichier .env dans le répertoire racine du projet,
et le reste est basé sur le nom de .env.

const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
      
      
  throw new Error(
    'The NODE_ENV environment variable is required but was not specified.'
  );
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
const dotenvFiles = [
  `${
        
        paths.dotenv}.${
        
        NODE_ENV}.local`,
  `${
        
        paths.dotenv}.${
        
        NODE_ENV}`,
  // Don't include `.env.local` for `test` environment
  // since normally you expect tests to produce the same
  // results for everyone
  NODE_ENV !== 'test' && `${
        
        paths.dotenv}.local`,
  paths.dotenv,
].filter(Boolean);

Ici, parcourez les dotenvFiles ci-dessus et utilisez dotenv, dotenv-expand pour lier les variables à process.env respectivement.

Après avoir exécuté le morceau de code suivant, vous pouvez voir les variables que vous avez définies dans .env et d'autres fichiers sur process.env.
Jusqu'à présent, ces variables ne sont visibles que dans l'environnement du nœud, pas dans le navigateur

Ensuite, injectez des variables dans l'environnement du navigateur via webpack.DefinePlugin.

// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.  Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
      
      
  if (fs.existsSync(dotenvFile)) {
      
      
    require('dotenv-expand')(
      require('dotenv').config({
      
      
        path: dotenvFile,
      })
    );
  }
});

Avant d'injecter des variables dans l'environnement du navigateur, react effectue également une couche de filtrage et config --> env.jsdéfinit une /^REACT_APP_/irégularité dans celui-ci. Cette fonction consiste à extraire uniquement les variables dont les noms de variables REACT_APP_commencent par elles en tant que variables d'environnement client.

const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
      
      
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
      
      
        env[key] = process.env[key];
        return env;
      },
      {
      
      
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
        // We support configuring the sockjs pathname during development.
        // These settings let a developer run multiple simultaneous projects.
        // They are used as the connection `hostname`, `pathname` and `port`
        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
        // and `sockPort` options in webpack-dev-server.
        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
      }
    );
  // Stringify all values so we can feed into webpack DefinePlugin
  const stringified = {
      
      
    'process.env': Object.keys(raw).reduce((env, key) => {
      
      
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {
      
      }),
  };

  return {
      
       raw, stringified };
}

module.exports = getClientEnvironment;

Ouvrez ensuite config --> webpack.config.js, dans pluginsla configuration
```
new webpack.DefinePlugin(env.stringified),
```
Cette étape consiste à injecter les variables finalement filtrées dans l'environnement client.

Enfin, mettez une partie du fichier introduction de webpack.

DéfinirPlugin

DefinePluginPermet la création d'une constante globale configurable au moment de la compilation . Cela peut être utile pour autoriser un comportement différent pour les builds en mode développement et en mode release. Si la journalisation est effectuée dans une version de développement, mais pas dans une version de version, une constante globale peut être utilisée pour décider de journaliser ou non. C'est DefinePluginlà qu'intervient le, configurez-le et oubliez les règles de développement et de versions.
```
new webpack.DefinePlugin({
      
      
  // Definitions...
})
```