Сделайте ваш контент index.html зависимым от переменных среды

При разработке приложения React вам может потребоваться включить или изменить скрипты или HTML-теги в зависимости от среды, для которой вы создаете. Это особенно актуально при работе с SEO или инструментами отслеживания, такими как Google Analytics или HotJar.



Как правильно создать приложение React в нескольких средах
Сохраняйте отдельную папку сборки для каждой среды betterprogramming.pub



Возможно, вы не знаете, что приложения React, инициализированные с помощью Create React App, предлагают вам возможность сделать это. Хотя найти документацию по нему в Интернете очень сложно, на самом деле это классная функция. Фактически, с помощью всего лишь нескольких строк кода вы можете сделать содержимое вашего index.html файла зависимым от переменных среды.

Давайте узнаем больше об этой малоизвестной функции и посмотрим, как ее использовать.

Условный код с HtmlWebpackPlugin

HtmlWebpackPlugin поставляется с приложением Create React и используется для объединения. В частности, он использует public/index.html в качестве шаблона и вставляет <script> с путем, предоставленным webpack, для создания окончательной HTML-страницы.

Кроме того, HtmlWebpackPlugin предлагает разработчикам возможность работать с условным кодом со следующим синтаксисом:

<% if (condition) { %>
    // code inserted in the final HTML file only if
    // condition is true
<% } %>

Вы также можете использовать ветку else и / или if else следующим образом:

<% if (condition1) { %>
    // code inserted in the final HTML file only if
    // condition1 is true
<% } else if (contition2) { %>
    // code inserted in the final HTML file only if
    // condition1 is true
<% } else { %>
    // code inserted in the final HTML file only if
    // both condition1 and contition2 are false
<& } %>

Кроме того, во время отладки вам может также потребоваться распечатать значение переменной или условия. Вы можете сделать это с помощью такого синтаксиса:

<%= variable %>

В конце процесса npm build или npm start вы найдете его значение, напечатанное в сгенерированном HTML-файле.

Условный код в действии

Допустим, вы хотели, чтобы только ваше рабочее приложение React сканировалось Google, а Google Analytics присутствовал только в рабочем состоянии. Вы можете подумать о написании двух пользовательских сценариев сборки, но это не обязательно.

Фактически, вы легко можете добиться обоих этих результатов. Вам нужно только условно изменить код вашего public/index.html файла в зависимости от текущей среды, как показано ниже:

Что происходит, так это то, что два раздела, написанные с использованием специального синтаксиса, представленного выше, будут включены в окончательный HTML-файл только тогда, когда process.env.NODE_ENV будет иметь желаемое значение. Эта переменная среды является частью приложения Create React, как указано в официальной документации.

[…] Встроенная переменная среды с именем NODE_ENV. Вы можете прочитать это с process.env.NODE_ENV. Когда вы запускаете npm start, он всегда равен 'development', когда вы запускаете npm test, он всегда равен 'test', а когда вы запускаете npm run build для создания производственного пакета, он всегда равен 'production'. Вы не можете изменить NODE_ENV вручную . - Создать приложение React

И вуаля! Ваше index.html содержимое теперь зависит от переменных среды.

Заключение

Сегодня мы рассмотрели, как изменить index.html файл в зависимости от переменных среды. Достичь этой цели легко и требуется всего несколько строк кода. В частности, это возможно благодаря HtmlWebPackPlugin, который по умолчанию поставляется с приложением Create React. Эта полезная, но не широко известная функция React может сэкономить вам время, позволяя избежать написания пользовательских сценариев для сборок, ориентированных на среду.

Спасибо за прочтение! Надеюсь, эта статья оказалась для вас полезной. Не стесняйтесь оставлять любые вопросы, комментарии или предложения.