如何将代码片段包含在 .env 中作为变量？

Question

我有一个 React 应用程序，现在我需要在我的应用程序中包含 Google 标签管理器。 我有两个环境，dev 和 prod。 Google 为两种环境提供了两种不同的代码片段，据我所知，这些代码片段需要包含在 .env 文件中，并且需要包含在 index.html 中，语法为“ %REACT_APP_%" 所以我尝试如下

.env

REACT_APP_GOOGLE_TAG_MANAGER_HEAD=<!-- Google Tag Manager -->
  <script>(function (w, d, s, l, i) {
      w[l] = w[l] || []; w[l].push({
        'gtm.start':
          new Date().getTime(), event: 'gtm.js'
      }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-KW2QJK3');</script>
  <!-- End Google Tag Manager -->

当我这样做时，只有第一行被当作代码，我认为这是因为编译器不识别多行声明。所以这是我目前确定的两个解决方案。

在 .env 中的代码片段中为每一行放置不同的变量
将整个代码作为 .env 中的一行获取

我想知道，有没有其他更好的方法来完成这个？比如有没有办法在 .env 中定义代码片段或为单个变量声明多行？

Answer 1

尝试使用 react-gtm-module，它对我有用并且是一种干净的方法。

如何将代码片段包含在 .env 中作为变量？

How to include a code fragment inside .env as a variable?

environment-variables

google-tag-manager

reactjs