【问题标题】：ASP.NET Core. Bower dependencies are not copied to wwwrootASP.NET 核心。 Bower 依赖项不会复制到 wwwroot
【发布时间】：2017-07-03 23:29:57
【问题描述】：

我有一个 ASP.Core 项目 (Visual Studio 2015)，我通过“管理 Bower 包”安装了引导程序

我在项目依赖项中看到包

但是 wwwroot 是空的，我无法从我的视图中访问 js 和 css 文件。

有什么想法吗？

【问题讨论】：

可能是因为你的 bower.json 没有指定输出目录？不知道您从哪里创建模板，或者它是否是旧的/手动添加的，但是 Visual Studio 中较新的 ASP.NET 核心模板应该有一个 bower.json 文件，它将“wwwroot”设置为输出目录并直接在那里恢复包。 docs.microsoft.com/en-us/aspnet/core/client-side/bower 向下滚动到“在 bower.json 中手动安装”部分

标签： visual-studio-2015 asp.net-core bower

【解决方案1】：

您应该使用：bower 设置文件或 gulp 或 webpack 之类的处理器：

选项 1：Bower 配置

文档：https://bower.io/docs/config/

简而言之。您可以使用{ directory": "wwwroot/bower_components" } 创建一个.bowerrc 文件。

现在，如果您 bower install 您的依赖项，它会将它们添加到 wwwroot/bower_components。

对于大型的 SEO 相关项目选项 2 是首选：

选项2：处理

在将文件添加到 wwwroot 之前，您可以使用 gulp 等工具来缩小文件。

它增加了额外的步骤/复杂性。但优点是文件更小（缩小）+ 你只复制你需要的内容，从而导致发布的包更小。

在gulpfile.js 你可以这样做：

var gulp = require('gulp');
var bower = require("./bower.json");
gulp.task("copy", function() {
  var resources = bower.webResources;
  var tasks = resources.map(function(resource) {
    return gulp.src("./bower_components/" + resource)
    .pipe(gulp.dest('./wwwroot/lib/')); //copy globpath to wwwroot/lib
  });
  return merge(tasks);
});

然后您可以将 webResources 列表添加到您的 bower.json 以定义需要复制的内容：

"webResources": [ //bootstrap example, with globbing
  "bootstrap/dist/**/@(bootstrap.css|glyphicons-halflings-regular.*|bootstrap.js)",
]

推荐使用 Webpack2

您可以使用 webpack2 将所有 Web 依赖项：Javascript、css、字体、图像合并到一个 javascript 文件中。

缺点： * 这将增加构建时间，因为 webpack 现在也必须编译。（亲：您可以使用 devserver 按需构建）。 * Delta 更新效率会降低

专业版： * 你得到一个文件作为依赖 * 您可以使用最新的 javascript/typescript 功能和 transpile&shim，使其适用于所有浏览器。

【讨论】：

【解决方案2】：

正如经常发生的那样，在发布此问题后不久就发现了问题。也许它会对某人有用。

快速解答：手动将 bower.json 添加到您的项目中，然后添加依赖项。

长答案：单击“显示所有文件”后，没有文件“bower.js”。我在一个项目的“添加新项目”中添加了它

并添加此代码

{
    "name": "asp.net",
    "private": true,
     "dependencies": {
       "bootstrap": "3.3.7",
       "jquery": "3.1.1"
    }
}

在它重新加载并复制包到 wwwroot 之后

【讨论】：

这个想法是使用 gulp 或 webpack 之类的处理器来编译/缩小/合并您的 javascript，然后将 hte 编译后的代码放在 wwwroot 中。
我已将 jQuery 3.2.1 添加到 ASP.NET 2.0 Web 项目中，并且我有一个 bower.json 文件和一个 .bowerrc 文件。当使用“Manager Bower packages”GUI 时，jQuery 文件按预期添加到 wwwroot/lib/jQuery/dist 下。该项目受 GIT 源代码控制，默认情况下不包括 jquery.js 等文件。当您将 GIT 存储库克隆到另一台计算机时，应该如何重新创建 jquery.js 文件？ VS 2017 Build 不这样做。

【解决方案3】：

将 Bower 包添加到 ASP.Net 2.1

添加 Bower 包

在工具栏中Project => Quick Install Packages（快捷键 => shift Alt 0）
选择鲍尔
输入包名，例如 Bootstrap
选择版本并点击安装
在解决方案的根目录中创建两个文件
Bower.json
.bowerrc

创建 Bower.json 文件

{
  "name": "RazorPagesMovie",
  "dependencies": {
    "bootstrap": "4.1.3",
    "jquery": "3.3.1"
  }
}

添加包名和版本

创建一个 .bowerrc 文件

这是至关重要的文件，因为在这里我们命名了我们的文件可用的路径（我们的静态文件）

{
  "directory": "wwwroot/lib"
}

将目录添加到您希望文件可用于开发/生产的 .bowerrc。

您可能需要在 cli 中使用 dotnet restore 来恢复包，或者右键单击 bower.json 并单击 bower restore packages。
查看 wwwroot。您应该会看到一个包含您的软件包的 lib 文件夹。
将文件路径添加到 _Layout.cshtml 文件中的脚本标签

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy">
</script>

注意检查您是否还需要更新任何 css 链接文件或更改版本参考。

【讨论】：