Вставьте встроенный скрипт в index.html с переменной env
У меня есть index.html, где я хочу загрузить код отслеживания hotjar (только встроенный скрипт), но это зависит от переменной env. Я пробовал использовать webpack DefinePlugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
и получить этот env, но я могу получить его только из компонента реакции.
componentWillMount() {
const env = process.env.NODE_ENV;
document.getElementById('hotjar').innerHTML = env === 'production' ? "...script1" : "...script2"
}
Затем я использовал innerHTML, чтобы поместить свой скрипт в index.html, но он не работает так, как я ожидал.
Вот тело index.html
<body>
<div id = "root"></div>
<script src = "/dist/bundle.js"></script>
<script id = "hotjar">
</script>
</body>
Итак, мне нужно получить это в каком-то скрипте на index.html или что-то в этом роде? Кто-нибудь может мне помочь? Спасибо.
может теперь лучше
Возможный дубликат Как добавить скрипт элемента DOM в раздел заголовка?
Также много информации здесь stackoverflow.com/q/610995/125981
Большое спасибо! Последний мне помог
Ответы 1
Вы можете использовать разные файлы для каждой среды. Подобно tracking_test.jstracking_prod.js, используйте веб-пакет, чтобы выбрать соответствующий файл при сборке и переименовать его в tracking.js. Обратитесь к tracking.js в html файле. Таким образом, вы не отправляете ненужный код.
Если вы хотите продолжить изменение маршрута innerHTML, загляните в https://github.com/nfl/react-helmet. У них есть более хорошие API для того же.
Проблема в том, что мне нужно использовать только встроенный скрипт
"переменная env", "получить этот env, но я могу получить его только из компонента реакции", что это такое и не могли бы вы пояснить? Какая платформа? Пожалуйста, укажите то, что вы пробовали, чтобы мы могли помочь исправить это, а не просто «Я пробовал несколько вещей» и «Я не уверен, что делать». «код отслеживания hotjar» - какой код, кода мы не видим.