Question

我写了一个新的应用程序，它将使用现有主题，将由设计师更改。

所以我决定，而不是将脚本放在脚本和内容中的其他内容（Css，图像）中，而不是将主题保存在主题文件夹中（包含子目录 - js，css，img）

所以我尝试更改脚本捆绑以指向我在Theme / js而不是Scripts中的脚本

我把它改成了

bundles.Add(
          new ScriptBundle("~/Scripts/vendor")
            .Include("~/Theme/js/jquery-{version}.js")
            .Include("~/Theme/js/knockout-{version}.debug.js")
            .Include("~/Theme/js/sammy-{version}.js")
            .Include("~/Theme/js/toastr.js")
            .Include("~/Theme/js/Q.js")
            .Include("~/Theme/js/breeze.debug.js")
            .Include("~/Theme/js/bootstrap.js")
            .Include("~/Theme/js/moment.js")
          );

我不明白的是行

new ScriptBundle("~/Scripts/vendor")

如果我将其保留如上（即使没有Scripts / vendor文件夹，代码也能正常工作，但是我将其更改为

new ScriptBundle("~/Theme/js/vendor")

我在firebug中遇到网络错误：

"NetworkError: 404 Not Found - http://localhost:51154/scripts/vendor"

其他脚本未加载。

这条线的作用是什么？

由于

Answer 1

bundles.Add(ScriptBundle)方法将一个脚本包添加到bundle表中，您可以通过提供给ScriptBundle(string)构造函数的字符串来引用它。

因此，使用new ScriptBundle("~/Foo")创建并添加到bundles的捆绑包可以稍后使用@Scripts.Render("~/Foo")呈现。

您可能忘记的是将_layout.cshtml中的@Scripts.Render("~/Scripts/vendor")更改为@Scripts.Render("~/Theme/js/vendor")，这将是您看到的错误。

传递给构造函数的参数仅为documented “捆绑包的虚拟路径”，因此您必须弄清楚这意味着什么以及您可以做什么不能放在那里。

Answer 2

我有一个类似的问题，我通过确保在ScriptBundle（xx）和我的实际文件系统中使用的别名之间没有重叠来修复它（在你的情况下，Theme / js是bundle和你之间的相同路径包含的脚本。

ScriptBundle类将所有包含的js文件打包成一个缩小的包。下载此单个捆绑包并且比几个独立的GET调用更有效。请注意，如果您正在调试解决方案并在VS中的调试器下运行站点，则不会提供捆绑以帮助调试，而是将离散的js文件发送到客户端。只有在<system.web\><compilation debug="false" ...>时才能投放该包。

Answer 3

您正在创建一个标识为字符串值“〜/ Scripts / vendor”的ScriptBundle，并且可以使用此包标识符进行呈现。

当您Include(...)时，此值表示您希望包含该资源包的资源的相对路径。

bundles.Add(
          new ScriptBundle("~/Scripts/vendor")
            .Include("~/Theme/js/jquery-{version}.js")
            .Include("~/Theme/js/knockout-{version}.debug.js")
            .Include("~/Theme/js/sammy-{version}.js")
            .Include("~/Theme/js/toastr.js")
            .Include("~/Theme/js/Q.js")
            .Include("~/Theme/js/breeze.debug.js")
            .Include("~/Theme/js/bootstrap.js")
            .Include("~/Theme/js/moment.js")
          );

ScriptBundle（ “〜/脚本/供应商”）

3 个答案: