ScriptBundle(“~/脚本/供应商”)

Question

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

所以我决定，不把脚本放在scripts中，把其他所有东西都放在内容(Css，图片)中，只把主题放在主题文件夹中(使用子目录- js，css，img)

因此，我尝试将脚本绑定更改为指向主题/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)方法将一个脚本包添加到bundles表中，您可以通过提供给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)中使用的别名和我的实际文件系统之间没有重叠来修复它(在你的例子中，主题/js是包和你包含的脚本之间的相同路径。

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

Answer 3

您正在创建一个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")
          );