JavaScript：更改环境中的 src 文件答案

【问题标题】：JavaScript: Change src files on environmentJavaScript：更改环境中的 src 文件
【发布时间】：2015-05-19 19:11:53
【问题描述】：

我有一个网络应用程序，带有一个简单的index.html 文件：

<!DOCTYPE html>
    <head>
    </head>
    <body>
        <script src="assets/js/scripts.min.js"></script>
    </body>
</html>

我需要更改我的静态文件的src，因为在生产环境中它们将位于与开发环境不同的位置。但有一个要求：我不能通过构建来改变它。

所以我正在考虑创建一个像 application.properties 这样的本地文件，其中包含用于开发模式的源代码，并在生产环境中使用不同的源代码部署相同的文件。

有没有办法在 JavaScript 中做到这一点？

【问题讨论】：

标签： javascript angularjs deployment web-deployment

【解决方案1】：

您可以在 head 中检查它是哪个环境，然后根据当前环境（dev 或 prod）将脚本插入到 head 或 body 中。

<head>
  <script>
    var script = document.createElement('script');
    var devmode = /*condition to check if current enviroment is Development or Production*/ true;
    if (devmode === true) {
      // Development Scripr
      script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js";
    } else {
      // Production Script
      script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash..min.js";
    }
    document.head.appendChild(script);
  </script>
</head>

注意：上述解决方案适用于大多数现代浏览器。但是，建议使用良好的 AMD 解决方案，例如 Require.JS、yepnopejs（现已与modernizr 合并）或$script.js 等，因为它们会处理跨浏览器怪癖的一些边缘情况。

【讨论】：

@MatheusLima。 Require.JS、yepnopejs 等所有这些 AMD 加载程序在内部也做同样的事情，但它们让侦听器检测脚本的加载。如果您只想将脚本添加到 DOM，那么上述方法就足够了。但是如果你想检测 js 文件是否被加载并在加载后初始化一些东西，那么你应该使用 AMD 库。