Вставьте встроенный скрипт в index.html с помощью переменной env

Question

Вставьте встроенный скрипт в index.html с помощью переменной env

У меня есть index.html, куда я хочу загрузить код отслеживания hotjar (только встроенный скрипт), но это зависит от переменной env. Я пытался использовать веб-пакет 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 или что-то вроде этого? Кто-нибудь может мне помочь? Благодарю.

0

reactjs webpack environment-variables inline-scripting

Источник

user6930575 22 авг '18 в 10:51

1 ответ

Другие вопросы по тегам reactjs webpack environment-variables inline-scripting

user419448 22 авг '18 в 11:09 2018-08-22 11:09 · Answer 1 · 2018-08-22 11:09

Вы можете использовать разные файлы для каждой среды. подобно tracking_test.jstracking_prod.js и использовать веб-пакет, чтобы выбрать соответствующий файл при сборке и переименовать его в tracking.js, См. tracking.js в HTML-файл. Таким образом, вы не отправляете ненужный код.

Если вы хотите продолжить свой модифицирующий маршрут innerHTML, загляните в https://github.com/nfl/react-helmet У них есть более приятные API для того же.