Bower 将 bower.json 中未定义的组件安装到 asp.net 5 应用程序答案

【问题标题】：Bower installed components that not defined in bower.json to asp.net 5 applicationBower 将 bower.json 中未定义的组件安装到 asp.net 5 应用程序
【发布时间】：2015-08-11 22:38:48
【问题描述】：

尝试在 ASP.NET 5 应用程序中使用 Bower 安装客户端软件包时遇到问题。我在 bower.json 文件中定义了一些我想安装到我的应用程序的包，如下所示：

 {
  "name": "bower",
  "license": "Apache-2.0",
  "private": true,
  "dependencies": {
    "jquery": "1.11.2",
    "modernizr": "2.8.3",
    "bootstrap": "3.3.4",
    "jquery.uniform": "2.1.2",
    "fluidbox": "1.4.3",
    "owl-carousel": "1.3.2",
    "photo.swipe": "4.0.8",
    "magnific-popup": "1.0.0",
    "slippry": "1.2.9",
    "fastclick": "1.0.6",
    "imagesloaded": "3.1.8",
    "jquery-validate": "1.13.1",
    "fitvids": "1.1.0",
    "jquery-gridrotator": "0.1.0" }

保存后，我看到隐藏的bower_components文件夹中还有一些我没有在bower.json文件中定义的包，像这样：

运行 grunt 任务后，我看到一些奇怪的包安装到我的应用程序中。

我的简单 gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: true
                }
            }
        }
    });

    grunt.registerTask("default", ["bower:install"]);

    grunt.loadNpmTasks("grunt-bower-task");
};

那么，我怎样才能只将我想要的软件包安装到我的 ASP.NET 5 应用程序中呢？非常感谢。

【问题讨论】：

imagesloaded 似乎依赖于eventie 和eventEmitter，所以这解释了这两个，但我无法从新的 Web 项目开始使用其他额外的包来重现该问题。

标签： asp.net bower asp.net-core asp.net-core-mvc bower-install

【解决方案1】：

它们是 Bower 通过示例安装的依赖项 Masonry 使用此依赖项

{
  "name": "masonry",
  "version": "3.3.0",
  "description": "Cascading grid layout library",
  "main": "masonry.js",
  "dependencies": {
    "get-size": "~1.2.2",
    "outlayer": "~1.4.0",
    "fizzy-ui-utils": "~1.0.1"
  }
}

我建议您使用 dest、js_dest、css_dest 和 font_dest 按类型拆分文件并将选项 keepExpandedHierarchy 设置为 false 类似这样

           {
                dest: "wwwroot/lib",
                js_dest: "wwwroot/lib/js",
                css_dest: "wwwroot/lib/css",
                fonts_dest: "wwwroot/lib/font",
                options: {
                    keepExpandedHierarchy: false
                }
            }

并使用诸如 includeSource 之类的模块将所有文件添加到您的 cshtml 文件中

includeSource: {
            layout: {
                files: {
                    'Views/Shared/_Layout.cshtml': 'Views/Shared/_Layout.cshtml'
                }
            },
            options: {
                basePath: "wwwroot/lib/js",
                baseUrl: '~/lib/',
            }
        }

您必须在页面中添加标记

 <!-- include: "type": "js", "files":"**/*.js", "ordering": "top-down" -->
    <!-- /include -->

希望对你有帮助

【讨论】：