ASP.NET核心。 Bower依赖项不会复制到wwwroot

Question

我有一个ASP.Core项目（Visual Studio 2015），我通过＆＃39; Manage Bower packages安装了bootstrap＆＃39;

我在项目依赖项中看到了包

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

任何想法为什么？

Answer 1

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

选项1：Bower配置

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

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

现在，如果你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);
});

然后你可以在你的bower.json中添加一个webResources列表来定义需要复制的内容：

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

建议使用Webpack2

您可以使用webpack2将所有Web依赖项：Javascript，css，fonts，images合并到一个javascript文件中。

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

临： *您将单个文件作为依赖项 *您可以使用最新的javascript / typescript功能，并且可以在每个浏览器上使用它来进行转换。

Answer 2

事情发生后，问题在发布此问题后很快就找到了。也许对某人有用。

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

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

并添加了此代码

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

将软件包重新加载并复制到wwwroot后

Answer 3

将Bower程序包添加到ASP.Net 2.1

添加凉亭包

• 在工具栏Project => Quick Install Packages中（快捷键=>移动Alt 0）
• 选择Bower
• 键入软件包名称，例如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软件包。
• 查看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链接文件或更改版本引用。