创建react app:script标签url取决于环境

Question

我们用create-rect应用程序创建了一个React应用程序。我们必须在head标记(在public/index.html文件中(中包含一个外部脚本标记。

脚本的提供者为我们提供了两个片段：一个用于开发，一个用于生产环境。

例如，在开发环境中，脚本标记为：

<script src="https://myscript.org/scripttemplates/script.js"  type="text/javascript" charset="UTF-8" data-domain-script="4a1xxxxx-xxx-xxxx-xxxxx-test"></script>
<script type="text/javascript">
function OptanonWrapper() { }
</script>

对于生产环境，脚本标记为：

<script src="https://myscript.org/scripttemplates/script.js"  type="text/javascript" charset="UTF-8" data-domain-script="4a1xxxxx-xxx-xxxx-xxxxx"></script>
<script type="text/javascript">
function OptanonWrapper() { }
</script>

因此，您可以看到这两个环境之间唯一的区别是data-domain-script属性。所以我的问题是，我们如何根据环境来放置好的片段？

提前谢谢。

Answer 1

<script>    
const x = env === 'prod' ? prodCDN : otherCDN;    
document.write("<script type='text/javascript' src='"+ x + "'></scr" + "ipt>");
</script>

Answer 2

在我们的应用程序中，我们基于public/index.html:中的env变量使用它

<% if (process.env.NODE_ENV === 'production') { %>
<script src="https://myscript.org/scripttemplates/script.js"  type="text/javascript" charset="UTF-8" data-domain-script="4a1xxxxx-xxx-xxxx-xxxxx-test"></script>
<% } else { %>
<script src="https://myscript.org/scripttemplates/script.js"  type="text/javascript" charset="UTF-8" data-domain-script="4a1xxxxx-xxx-xxxx-xxxxx"></script>
<% } %>

Node.js将基于env变量生成经典html