webentwicklung-frage-antwort-db.com.de

Wie verweisen Sie auf eine process.env-Variable in HTML <script src = ""? Reagieren

Ich habe eine Reakt-App und verwende dotenv-webpack, um meine API-Schlüssel zu verwalten. 

Ich habe: - ein .env mit den API-Schlüsseln erstellt und gitignored .- benötigt und dotenv als Plugin in webpack.config.js hinzugefügt.

Danach konnte ich mithilfe von process.env.api_key auf einen der Schlüssel in einer .js-Datei verweisen. Ich habe jedoch Probleme beim Versuch, in index.html im Script-Tag darauf zu verweisen.

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>

Wie verweise ich hier auf den process.env.API_key?

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

Ich habe versucht, Backquotes zu verwenden, die in der .js-Datei funktionieren, wie ${API_KEY}, aber das funktioniert nicht in der .html-Datei. 

8
bigmugcup

Ich habe den folgenden Code in ComponentWillMount eingefügt, wo die Map .__ darstellt. und es hat funktioniert (zumindest in der Entwicklung: 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);

Ich konnte dies mithilfe des von bigmugcup in den obigen Kommentaren veröffentlichten Codes zum Laufen bringen. Ich habe die Datei webpack.config.js nicht geändert. 

2
Tbot

Wenn Sie bereits die create-react-App verwenden, ist diese bereits durch ein Update auf verfügbar

<script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_API_KEY%"></script>

Dies ist dokumentiert hier

3
tsuz

Lösung

Sie können die process.env-Variable nicht direkt in html referenzieren.

Erstellen Sie Ihre eigene Vorlage aus index.html und ersetzen Sie die API-URL durch einen Parameter.

HtmlWebpackPlugin

Vereinfacht die Erstellung von HTML-Dateien für die Bereitstellung Ihrer Webpack-Bundles.

Sie können entweder das Plugin eine HTML-Datei für Sie generieren lassen, Ihre eigene Vorlage mit lodash-Vorlagen angeben oder einen eigenen Loader verwenden.

Webpack.config.js

HtmlWebpackPlugin ermöglicht das Erstellen und Übergeben von Parametern an Ihre Vorlage:

   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

Innerhalb der Vorlage können Sie auf den Parameter zugreifen:

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

Siehe: Eigene Vorlagen schreiben

Anmerkungen

Dies ist eine modifizierte Antwort aus diesem Kommentar , bitte lesen Sie die gesamte Konversation.

0
btzr