在 ASP.NET Core 2.2 MVC 开发与生产环境中捆绑答案

【问题标题】：Bundling in ASP.NET Core 2.2 MVC dev vs prod environments在 ASP.NET Core 2.2 MVC 开发与生产环境中捆绑
【发布时间】：2019-12-05 02:56:41
【问题描述】：

我正在将我的应用程序设置为在未开发时捆绑 css 和 js 文件，而不是在开发时捆绑。

为此，我首先有一个 bundleconfig.json 文件：

[
  {
    "outputFileName": "wwwroot/css/bundle.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/bootstrap.min.css",
      "wwwroot/lib/jqueryui.jquery-ui.min.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/bundle.min.js",
    "inputFiles": [
      "wwwroot/lib/jquery/jquery.min.js",
      "wwwroot/lib/jqueryui/jquery-ui.min.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js"
    ]
  }
]

然后在我的页面中我有一个 head 标签：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title</title>
    <environment exclude="development">
        <link rel="stylesheet" href="~/css/bundle.min.css" asp-append-version="true" />
        <script type="text/javascript" src="~/js/bundle.min.js" asp-append-version="true"></script>
    </environment>

    <environment include="development">
        <link rel="stylesheet" href="~/lib/bootstrap/bootstrap.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.css" asp-append-version="true" />

        <script type="text/javascript" src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
        <script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js" asp-append-version="true"></script>
        <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
    </environment>
</head>

这一切都很好。我只是不喜欢我必须在 budingconfig.json 和标题中的开发环境标记中复制文件列表。

在 WebForms 项目中，我可以使用如果处于开发模式，它将为捆绑包中的每个项目生成链接，如果处于开发模式，它将为捆绑包生成 1 个链接不在开发模式。 .net core MVC 项目中是否也有类似的东西？

【问题讨论】：

标签： asp.net-mvc asp.net-core bundling-and-minification

【解决方案1】：

你可以试试下面这样的 TagHelper

https://github.com/meziantou/Meziantou.AspNetCore.BundleTagHelpers

这将帮助您实现您想要实现的目标。而不是编写以下类型的代码

<environment names="Development">
    <link rel="stylesheet" href="~/css/site1.css" />
    <link rel="stylesheet" href="~/css/site2.css" />
    <link rel="stylesheet" href="~/css/site3.css" />
</environment>

<environment names="Staging,Production">
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

你只能这样写：

<bundle name="wwwroot/css/site.min.css" />

在生产中，它使用缩小文件并将版本附加到查询字符串（与 asp-append-version 相同的行为）。
在开发中，它使用所有输入文件并且不附加版本。

【讨论】：

【解决方案2】：

在 ASP.NET Core 中没有内置方法来执行此操作。然而，推出自己的产品非常简单。

Mad Christensen 为 MVC5 构建了一个解包器，here 是一个使其适应 .NET Core 的要点。

你可以这样使用它：

<environment names="Development">
    @Bundler.Unpack(HostingEnvironment.ContentRootPath, "/js/site.min.js")
</environment>

但是，如果除了调试之外您没有特定的理由包含每个文件，您也可以依赖源映射。 bundleconfig 中有一个标志。 ("sourceMap": true)

【讨论】：