1

这个问题是如此简单和常见，但我仍然无法找到一个好的解决方案。所以我想也许 Stackoverflow 的一些专家可以指导我了解最佳实践。

假设我有几个 Javascript 模块并将它们分别放在一个单独的文件中：

a.js
b.js
c.js
d.js

在发布软件时，我将它们连接在一起并缩小它们：

//pseudo command:
cat a.js b.js c.js d.js | minify > all.js

然后我在我的 html 文件中包含对 all.js 的引用，如下所示：

<script src="all.js"></script>

到目前为止，一切都很好。问题是，在开发软件时，我希望看到文件未缩小且未合并。一种解决方案是消除过程中的缩小，并这样做：

//pseudo command:
cat a.js b.js c.js d.js > all.js

并将其包含在<script>标签中。这可行，但我更希望将文件单独包含在内。所以我必须在我的 html 文件中这样做：

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>

这个按我的意图工作，但是在发布代码时，我必须检查所有的 html 文件并用这 4 个<script>标签替换<script src="all.js"></script>，这对我的项目来说工作量太大了，因为有很多 html 文件，而且我们定期进行调试/发布周期.

一种解决方案是为所有文件添加脚本标签：

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
<script src="all.js"></script>

但这会在运行时导致 4 个错误请求。（因为在发布时只有 all.js 可用）。

你将如何解决这个问题？

4

4 回答 4

2

为什么不使用像headjs这样的 javascript 加载器并动态提供文件？

然后当你投入生产时，你只需要修改 headJs 调用并只包含缩小的 js 文件。

于 2012-10-16T07:26:32.623 回答
1

由于我使用的是 ASP.NET，因此我将通过以下方式解决问题：

默认.aspx：

<%
if (ConfigurationManager.AppSettings["IsDebug"] == "true")
{
%>
<script src="Scripts/Application/Core/Constants.js" type="text/javascript"></script>
...
<script src="Scripts/Application/Core/Application.js" type="text/javascript"></script>
<%
} else {
%>
<script src="Scripts/compressed.js" type="text/javascript"></script>
<%
}
%>

网络配置：

<configuration>
  <appSettings>
    <add key="IsDebug" value="true"/>
  </appSettings>
</configuration>

我正在使用Google Closure Compiler将我所有的 JS 合并到一个文件中。

因此，如果您的客户遇到错误，您可以要求他更改IsDebug并true检查控制台输出（如果您正在使用它）以获取错误来源。

于 2012-10-16T07:38:09.160 回答
1

我们所做的是将 替换<script src="xxx.js">为服务器端函数，例如<% Require("xxx.js"); %>.

该函数被配置为渲染该文件的常规脚本引用，或者在缩小模式下，确定文件属于哪个聚合组（您只有一个组，称为“全部”，但这种方法支持多个聚合组）并为该聚合文件添加脚本引用（如果其他Require()调用尚未要求） 。

这允许我们在开发过程中随意在聚合（+minified）和非聚合模式之间切换。发布版本默认配置为使用聚合模式，而开发版本使用原始模式。

伪代码：

string RequireScript(string filename) 
{
    if (!IsAggregated)
    {
        return "<script src='$(filename)'>";
    }
    else 
    {
        var group = FindAggregationGroupFor(filename); 
        if (group in _requiredGroups) return "";

        _requiredGroups.Add(group);
        return "<script src='/aggregated/$(group).js'>";
    }
}
于 2012-10-16T07:38:45.270 回答
0

您也可以只编写一个头文件，然后将其动态地包含在您网站的每一页中，作为一个基本的模板系统。

因此，您只需修改一个文件即可编辑所有页面。

这是一个例子：http ://www.davidjrush.com/blog/2009/08/php-header-and-footer-templates/

于 2012-10-16T07:40:36.943 回答