Reactjs 如何告诉react create app build脚本不要最小化文件的某些部分？

TL；DR：如何让react构建脚本保留部分代码不变？

我制作了一个带有“创建反应应用程序”的应用程序。我正在使用标准的“npm run build”命令进行生产构建

在index.html文件中，我包含了一个谷歌标签管理器和谷歌优化代码段

在构建时，脚本以一种阻止它们工作的方式缩小它们

所以现在，每次我“构建”时，我都必须手动用原始代码段覆盖缩小的部分。这当然是非常不愉快的

我如何告诉构建脚本不要去管这些部分？我浏览了文档，但没有成功

谢谢你的帮助

正常（未统一）代码：

  <!-- Google Optimize async hide -->
  <style>.async-hide { opacity: 0 !important} </style>
  <script>
  (function(a,s,y,n,c,h,i,d,e){
   s.className+=' '+y;
   h.end=i=function(){
     s.className=s.className.replace(RegExp(' ?'+y),'')};
     (a[n]=a[n]||[]).hide=h;setTimeout(function(){
       i();h.end=null
     },c);
  })
  (window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-ABCDEF12':true});
  </script>


  <!-- 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-ABCDEF12');</script>
  <!-- End Google Tag Manager -->

  <style>.async-hide{opacity:0!important}</style>
  <script>!function(e,n,a,c,t,d,s,i,l){
     n.className+=" "+a,d.end=s=function(){
       n.className=n.className.replace(RegExp(" ?"+a),"")
     },
     (e[c]=e[c]||[]).hide=d,setTimeout(function(){
       s(),d.end=null
     },4e3)
   }(window,document.documentElement,"async-hide","dataLayer",0,{"GTM-ABCDEF12":!0})
    </script>
    <script>
    !function(e,t,a,n,g){
      e[n]=e[n]||[],e[n].push({
        "gtm.start":(new Date).getTime(),
        event:"gtm.js"
      });
      var m=t.getElementsByTagName(a)[0],
        r=t.createElement(a);
      r.async=!0,
      r.src="https://www.googletagmanager.com/gtm.js?id=GTM-ABCDEF12",
      m.parentNode.insertBefore(r,m)
      }(window,document,"script","dataLayer")
    </script>

.async hide{不透明度：0！重要}
（函数（a、s、y、n、c、h、i、d、e）{
s、 类名+=''''+y；
h、 end=i=function（）{
s、 className=s.className.replace（RegExp（'？'+y），''）；
（a[n]=a[n]| |[]）.hide=h；setTimeout（函数（）{
i（）；h.end=null
}（c）；
})
（window，document.documentElement，'async-hide'，'dataLayer'，4000，{GTM-ABCDEF12'：true}）；
（功能（w、d、s、l、i）{
w[l]=w[l]|【】；w[l]。推({
“gtm.start”：新日期（）.getTime（），
事件：'gtm.js'}）；
变量
f=d.getElementsByTagName[0]，
j=d.createElement，
dl=l！=“数据层”？“&l=”+l:“”；
j、 异步=真；
j、 src='1〕https://www.googletagmanager.com/gtm.js?id=“+i+dl；
f、 parentNode.insertBefore（j，f）；
})（窗口、文档、“脚本”、“数据层”、“GTM-ABCDEF12”）；

缩小代码：

  <!-- Google Optimize async hide -->
  <style>.async-hide { opacity: 0 !important} </style>
  <script>
  (function(a,s,y,n,c,h,i,d,e){
   s.className+=' '+y;
   h.end=i=function(){
     s.className=s.className.replace(RegExp(' ?'+y),'')};
     (a[n]=a[n]||[]).hide=h;setTimeout(function(){
       i();h.end=null
     },c);
  })
  (window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-ABCDEF12':true});
  </script>


  <!-- 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-ABCDEF12');</script>
  <!-- End Google Tag Manager -->

  <style>.async-hide{opacity:0!important}</style>
  <script>!function(e,n,a,c,t,d,s,i,l){
     n.className+=" "+a,d.end=s=function(){
       n.className=n.className.replace(RegExp(" ?"+a),"")
     },
     (e[c]=e[c]||[]).hide=d,setTimeout(function(){
       s(),d.end=null
     },4e3)
   }(window,document.documentElement,"async-hide","dataLayer",0,{"GTM-ABCDEF12":!0})
    </script>
    <script>
    !function(e,t,a,n,g){
      e[n]=e[n]||[],e[n].push({
        "gtm.start":(new Date).getTime(),
        event:"gtm.js"
      });
      var m=t.getElementsByTagName(a)[0],
        r=t.createElement(a);
      r.async=!0,
      r.src="https://www.googletagmanager.com/gtm.js?id=GTM-ABCDEF12",
      m.parentNode.insertBefore(r,m)
      }(window,document,"script","dataLayer")
    </script>

.async hide{opacity:0！重要}
!函数（e，n，a，c，t，d，s，i，l）{
n、 className+=“”+a，d.end=s=function（）{
n、 className=n.className.replace（RegExp（“？”+a），”）
},
（e[c]=e[c]| |[]）。hide=d，setTimeout（函数（）{
s（），d.end=null
}，4e3）
}（窗口，document.documentElement，“异步隐藏”，“数据层”，0，{“GTM-ABCDEF12”：！0}）
!函数（e，t，a，n，g）{
e[n]=e[n]| |[]，e[n]。推送({
“gtm.start”：（新日期）.getTime（），
事件：“gtm.js”
});
var m=t.getElementsByTagName（a）[0]，
r=t.createElement（a）；
r、 异步=！0，
r、 src=”https://www.googletagmanager.com/gtm.js?id=GTM-ABCDEF12“，
m、 parentNode.insertBefore（r，m）
}（窗口、文档、“脚本”、“数据层”）

退出退出配置，这将允许您自定义它如何编译您的资产

运行弹出 注意：这是单向操作。一旦你弹射出去，你就不能回去了

如果您对构建工具和配置选择不满意，可以随时弹出。此命令将从项目中删除单一生成依赖项

相反，它会将所有配置文件和可传递的依赖项（Webpack、Babel、ESLint等）复制到您的项目中，以便您完全控制它们。除eject之外的所有命令仍然可以工作，但它们将指向复制的脚本，以便您可以调整它们。现在你只能靠自己了

您不必使用eject。精心策划的功能集适合中小型部署，您不应该觉得有义务使用此功能。但是，我们理解，如果您在准备好使用时无法自定义此工具，则此工具将不会有用

---

至少有一个主要用例需要不缩小代码片段，即当代码使用反射时。 例如，假设您从Ajax调用接收到一个结构，如：

{
 "type": "SomeConcreteType",
 "fieldA": "Some value"
}

您的业务逻辑可能要求您创建SomeConcreteType的实例。 在一个非小型化的世界里，你只需写下：

var obj = new window[type]();

但在一个缩小的世界里，你不能这样做，因为某个具体类型的名称已被删除

相反，当向服务器发送实例时，您不能再依赖obj.constructor.name

这会导致非常难看的代码，在这里您可以打开硬编码字符串

就因为这个而不得不弹射，听起来不太对劲

---

不确定为什么CRA脚本无法加载某些配置文件以覆盖默认文件中的值…

为什么缩小会阻止它们工作？你确定这就是导致错误的原因吗谢谢你的回答。当我将未显示的版本粘贴到缩小的版本上时，它会起作用。我编辑了原始帖子以显示这两个代码。对我来说，缩小后的代码中唯一有意义的区别是逗号，而不是r.async=后面的分号！0-不过我想这也没问题..嘿，布兰登，谢谢你的回答。这似乎是一个相当残酷的方法，坦白说，这是我现在还不敢碰的东西。似乎也在某种程度上阻碍了未来的更新，不是吗？我正在寻找一种类似于eslint的方法，您可以在文件的某些部分周围放置注释，以便这些部分保持不变。在我看来，这似乎比弹出选项更轻量级：/有什么想法吗？是的，而且确实会使将来的更新变得困难。这段代码不是直接进入HTML吗？您是否尝试过将所有内容放入index.html之外的文件并链接到该文件？我甚至没有意识到它诚实地缩小了index.html。我会尝试使用外部文件！好主意！