如何在构建工具中使用 Bower“源映射”？答案

【问题标题】：How to use Bower "source mapping" with build tools?如何在构建工具中使用 Bower“源映射”？
【发布时间】：2014-03-25 05:29:52
【问题描述】：

鲍尔的documentation section on "Consuming a package" 说：

Bower 还提供了源映射。构建工具可以使用它来轻松使用 Bower 包。

然后它举例说明了你可以用一个简单的命令输出的JSON：

{
  "backbone": "bower_components/backbone/index.js",
  "jquery": "bower_components/jquery/index.js",
  "underscore": "bower_components/underscore/index.js"
}

我明白这里发生了什么......但我真的不明白它的用途，即如何使用它。

我无法找到使用这种源地图的人的示例，而且我不太清楚 Bower 文档的建议。我想知道这个 Bower 生成的 JSON 可以如何被构建工具用来轻松地使用包。

有人知道吗？有没有人做过或看到过？

【问题讨论】：

我猜有人否决了这个问题？我很想知道为什么。

标签： dependency-management bower package-managers

【解决方案1】：

使用 list --paths 选项并查看映射的主要用途之一（至少据我所知）用于构建工具 - 正如文档所建议的那样。如果他们举个例子就好了，但我可以在这里。

假设您正在使用 Bower 来管理前端依赖项，但您正在使用 Grunt 来构建您的站点/应用程序。你如何调和两者？ Bower 将依赖项安装在默认根目录中，例如“app/_bower_components/packageName/”，即您永远不想在生产甚至开发中使用的路径，因为它很笨拙，并且可能指的是未缩小的包/库 JS 版本.

Grunt 有像“uglify”这样的任务，它可以获取一个给定的 JS 文件，然后将其缩小并缩小到更小的大小，这对生产站点很有用。在 Grunt 中，您可能会编写这样的任务：

        uglify: {
        modernizr: {
            files: {
                'javascripts/modernizr.min.js': 'app/_bower_components/modernizr/modernizr.js'
            }
        }

这使用在第二个参数中提供的映射 Bower（即指向 Bower 源）并将丑化的输出输出到第一个参数（在本例中为 javascripts/modernizr.min.js）以用于生产目的。

从这个意义上说，您的构建工具 Grunt 会“使用”您的 Bower 包并为您的站点复制和缩小它们。这样，只要你的 Uglify 任务有正确的路径，你就可以使用 Bower 来更新/管理你的依赖，你不会直接编辑源代码。因此，例如，如果有一个新版本的 JQuery，您只需通过 Bower 更新它，不需要做任何其他事情；无需手动复制，无需编辑。

【讨论】：