Javascript 导入仅用于开发答案

【问题标题】：Javascript import just for developmentJavascript 导入仅用于开发
【发布时间】：2015-04-29 13:03:02
【问题描述】：

我来自 Java 背景，在这种情况下，测试依赖项而不是生产依赖项很常见，但是，我发现很难理解如何使用 Javascript 和 HTML 实现这一点。

我真的希望能够开发一些仅在我开发时运行的 javascript（运行 gulp serve），然后当我运行 gulp 时，这些文件不会包含在 dist 中，但我找不到任何常见的做法。

到目前为止，我正在使用 yeoman 的 gulp-webapp。

这是没有完成的事情（有一个未包含在生产版本中的测试脚本），还是我缺少一些自动化来做到这一点？

【问题讨论】：

您可以创建一个DEBUG_MODE 布尔变量，这样只有当它为真时，您才会加载测试依赖项。这些文件仍会在您的服务器上，但如果您将变量设置为 false，则不会加载这些文件。

标签： javascript dependencies gulp bower wiredep

【解决方案1】：

这里有几个不同的解决方案：

Javascript/jQuery: 如 blex 所述，一种方法是在始终加载的脚本中创建 DEBUG_MODE 布尔值，然后该脚本将在文档中插入更多的脚本节点将包含它认为适合加载的脚本。

例如：

if(DEBUG_MODE){
    for(var x=0; x<debuggingScripts.length; x++){
        InsertScript(debuggingScripts[x]);
    }
}

debuggingScripts 是一个脚本 URL 数组，InsertScript() 是一个将脚本添加到 DOM 的方法。

Python/清理脚本：我个人使用的另一种方法是使用脚本自动生成网页的“生产”版本。例如，我有一个 Python 脚本，它将忽略我的开发 HTML 文件中包含在  和  cmets 中的任何代码。当我运行脚本时，它会生成并打包我的代码的最新“发布”版本，而不会出现测试环境中存在的任何被忽略的代码。

PHP：您也可以使用 PHP（或任何其他预处理器/服务器端脚本）执行类似的操作，其中生成您的标头的 PHP 将忽略某个数组中的某些 javascript URL，但是您会格式化它。

希望其中之一对您有所帮助！如果您需要比我提供的更多示例代码，也请告诉我，我很乐意编写示例脚本。

【讨论】：

您好，感谢您回答这个问题，非常感谢。

【解决方案2】：

就像命运和橡皮鸭调试一样，我想我已经找到了我原本难以捉摸的问题的答案。很抱歉自己回答，但我把这个放在这里是为了繁荣，所以其他人可以学习。

生成的 gulp 脚本使用useref，这意味着可以将 cmets 放入 html 以将文件组合在一起。但是，它还可以使用以下语法删除这些文件：

<!-- build:remove -->
<script src="/bower_components/jquery-mockjax/jquery-mockjax.js"></script>
<script src="scripts/mock.js"></script>
<!-- endbuild -->

所以现在我只是使用它，当我使用 gulp serve 时，它包含 javascript 文件，而当我调用 gulp 时，它们就会被删除。

【讨论】：