Как вы ссылаетесь на процесс.переменная env в HTML

у меня есть приложение react и я использую dotenv-webpack для управления ключами API.

Я: - создал .env с ключами API и gitignored его. - требуется и добавлен dotenv в качестве плагина в webpack.конфиг.js.

после этого я смог ссылаться на один из ключей в a .файл JS с помощью процесса.env.ключ API. Но у меня возникли проблемы с попыткой ссылаться на него в индексе.HTML в теге script.

.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>

как я могу ссылаться процесс.env.API_key здесь?

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

Я пробовал использовать backquotes, которые работают .JS файл, например, так ${API_KEY}, но это не работает .HTML-файл.

7
environment-variables gitignore google-maps reactjs webpack

2 ответов

я помещаю следующий код в componentWillMount, где отображается карта и это сработало (по крайней мере, в разработке: const API_KEY = процесс.env.GOOGLEMAP_API_KEY; const script = документ.createElement ('script'); script.СРЦ = https://maps.googleapis.com/maps/api/js?key=${API_KEY}; документ.голова.добавить (скрипт);

я смог заставить это работать, используя код, опубликованный bigmugcup в комментариях выше. Я не изменял webpack.конфиг.файл js.

1

решение

вы не можете ссылаться на process.env переменной непосредственно внутри html.

создать свой собственный шаблон index.html и замените url api параметром.

HtmlWebpackPlugin

упрощает создание HTML-файлов для обслуживания пакетов webpack.

вы можете либо позволить плагину генерировать HTML-файл для вас, предоставить свой собственный шаблон с помощью шаблонов lodash или использовать свой собственный погрузчик.

Webpack.конфиг.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}`,

        });
      ]
    }

шаблон.HTML-код

внутри шаблона, вы можете получить доступ к параметру:

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

посмотреть: Написание Собственных Шаблонов

Примечания

это модифицированный ответ из этого комментарий, пожалуйста, прочитайте полный разговор.

0