web-dev-qa-db-ja.com

HTML <script src = ""でprocess.env変数をどのように参照しますか？ React

反応アプリがあり、dotenv-webpackを使用してAPIキーを管理しています。

私が持っている：-APIキーを使用して.envを作成し、それを無視しました。 -webpack.config.jsのプラグインとしてdotenvが必要および追加されました。

その後、process.env.api_keyを使用して.jsファイル内のキーの1つを参照することができました。しかし、scriptタグのindex.htmlで参照しようとすると問題が発生します。

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>

ここでprocess.env.API_keyを参照するにはどうすればよいですか？

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

${API_KEY}のように、.jsファイルで機能する逆引用符を使用しようとしましたが、.htmlファイルでは機能しません。

reactjsgoogle-mapswebpackenvironment-variablesgitignore
13
bigmugcup

マップがレンダリングされて機能するcomponentWillMountに次のコードを配置しました（少なくとも開発中：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）;

上記のコメントにbigmugcupが投稿したコードを使用して、これを機能させることができました。 webpack.config.jsファイルは変更しませんでした。

1
Tbot

既にcreate-react-appを使用している場合、これは、

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

これは文書化されています ここ

3
tsuz

解決

html内でprocess.env変数を直接参照することはできません。

index.htmlから独自のテンプレートを作成し、api urlをパラメーターに置き換えます。

HtmlWebpackPlugin

Webpackバンドルを提供するHTMLファイルの作成を簡素化します。

プラグインにHTMLファイルを生成させるか、lodashテンプレートを使用して独自のテンプレートを提供するか、独自のローダーを使用することができます。

Webpack.config.js

HtmlWebpackPlugin を使用すると、テンプレートを作成してテンプレートに渡すことができます。

   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

テンプレート内では、パラメーターにアクセスできます。

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

参照： 独自のテンプレートの作成

ノート

これはこれから修正された答えです コメント 、会話全体を読んでください。

3
btzr