web-dev-qa-db-fra.com

Comment référencez-vous une variable process.env en HTML <script src = ""? Réagir

J'ai une application de réaction et j'utilise dotenv-webpack pour gérer mes clés d'API. 

J'ai: - créé un .env avec les clés de l'API et l'ai gitignoré .- requis et ajouté dotenv comme plugin dans webpack.config.js.

Ensuite, j'ai pu référencer l'une des clés d'un fichier .js en utilisant process.env.api_key. Mais j'ai des problèmes pour essayer de le référencer dans index.html dans la balise script.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=process.env.GOOGLEMAP_API_KEY"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

Comment référencer le process.env.API_key ici?

<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script>

J'ai essayé d'utiliser des guillemets arrières qui fonctionnent dans le fichier .js, comme par exemple ${API_KEY}, mais cela ne fonctionne pas dans le fichier .html. 

reactjsgoogle-mapswebpackenvironment-variablesgitignore
8
bigmugcup

Je mets le code suivant dans ComponentWillMount où la carte rend et cela a fonctionné (au moins en développement: const API_KEY = process.env.GOOGLEMAP_API_KEY; const script = document.createElement ('script'); script.src = https: // maps .googleapis.com/maps/api/js? key = $ {API_KEY}; document.head.append (script);

J'ai réussi à faire en sorte que cela fonctionne à l'aide du code posté par bigmugcup dans les commentaires ci-dessus. Je n'ai pas modifié le fichier webpack.config.js. 

2
Tbot

Solution

Vous ne pouvez pas référencer la variable process.env directement dans html.

Créez votre propre modèle à partir de index.html et remplacez l’URL de l’API par un paramètre.

HtmlWebpackPlugin

Simplifie la création de fichiers HTML pour servir vos ensembles de packs Web.

Vous pouvez laisser le plugin générer un fichier HTML pour vous, fournir votre propre modèle à l'aide de modèles lodash ou utiliser votre propre chargeur.

Webpack.config.js

HtmlWebpackPlugin vous permet de créer et de transmettre des paramètres à votre modèle:

   const api_key = process.env.api_key;
   const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
      entry: 'index.js',
      plugins: [
        new HtmlWebpackPlugin({
          inject: false,
          template: './template.html',

          // Pass the full url with the key!
          apiUrl: `https://maps.googleapis.com/maps/api/js?key=${api_key}`,

        });
      ]
    }

template.html

Dans le modèle, vous pouvez accéder au paramètre:

<script src="<%= htmlWebpackPlugin.options.apiUrl %>"></script>

Voir: Écrire vos propres modèles

Remarques

Ceci est une réponse modifiée à partir de ce commentaire , veuillez lire la conversation en entier.

0
btzr