如何在asp.net中捆绑js文件？

Question

我有一个有很多js文件的angular应用程序，我如何捆绑所有这些文件。

我在web上看到的每一个地方，他们都建议使用BundleConfig来捆绑js文件，但我在asp.net中使用的是空的web应用程序模板。

如何按顺序捆绑js文件，这样就不会出现冲突，并且在选择绝对路径和相对路径时也不会出现问题。

Answer 1

如何创建一个完整的MVC项目(选择MVC作为模板，而不是'empty‘。然后查看App_Start/BundleConfig.cs，创建该文件，并将其注册为global.asax.cs中的默认项目。

global.asax.cs：

BundleConfig.RegisterBundles(BundleTable.Bundles);

App_Start/BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace WebApplication1
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

不过老实说。我会使用基于Node的工具，如webpack或gulp来做这件事。您可以使用捆绑包，但它们没有那么强大，而且您错过了很多可以在前端构建中完成的事情。例如，它在正确的加载顺序方面会有更大的帮助。

Answer 2

通常，我们有两种方式来捆绑AnguarJS/ASP.NET：

1. 使用上面的捆绑包发布来自Justsayno BundleCollection的
2. 使用像grunt或gulp这样的压缩JS工具。示例。https://github.com/MarlabsInc/webapi-angularjs-spa或https://github.com/dchill72/NpmBowerGulpSample

希望它能帮上忙！