command-line-interface - 在 yeoman 项目 HTML 文件中引用通过 bower 安装的 javascript 依赖项的 "right"方法是什么？

Question

Yeoman 的快速入门和包管理器指南建议使用 Bower 来管理依赖项。

他们被安装到

app/bower_components/[component_name]

该指南只是建议插入一个

<script src="app/bower_components/[component_name]/[relevant_file.js]"></script>

行到您的 html 文件中。

没关系。除非该组件具有依赖关系。 Bower 有助于获取这些组件，但是，据我所知，它并没有为您提供它们的列表以及它们需要插入到您的代码中的顺序。 (我知道你在安装时会得到一份安装的列表，并且可以从某个地方的 json 文件中挖掘出来，但这仍然只是 Bower 的组件名称，而不是需要的实际文件的路径引用)。这意味着，对于像 jquery-maonsonry 这样的流行组件，我必须手动插入

<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/eventie/eventies.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>

所有这些我都必须进入并找到相关的 js 文件名。鉴于所有这些文件都已在 json 依赖文件中定义，并且 bower 知道它们，有没有办法可以自动生成上述代码。要么让我手动放入我的 html，要么将 symLink 指向 watch 命令的输出。我知道 require.js 可能会代表我管理这个，但是有没有办法绕过需要 require？

Answer 1

我写了一个工具来解决这个问题， grunt-bower-install .这是一个非常适合 Yeoman 工作流程的 grunt 插件。您手动运行 grunt bower-install在更换 bower 组件后。 (安装一个新的之后，删除一个，无论如何)。

我用 jquery-masonry 试了一下...

$ bower install jquery-masonry --save
$ grunt bower-install

……结果……

<!-- bower:js -->
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>
<!-- endbower -->

这个插件不能更有帮助的原因是每个包的bower.json文件未指定 main属性(property)。如果没有这些知识，脚本(如我的)就无法可靠地检测到实际包的核心文件。

这些工具都很年轻。鉴于 Bower 的免费性质，任何人都可以注册一个包。作者可以选择不提及依赖关系，省略 main属性，选择包含不需要的文件，我们最终会有点困惑。如果包作者只是避免这些模式，Bower 为最终用户提供了理想的工作流程。希望他们能早日掌握这些做法。

然而，抛开困惑不谈，这仍然比几年前要好得多。实际上，您必须自己挖掘这些插件，将它们的 .zip 文件解压缩到一个文件夹中，然后自己找到您想要的真实文件。

所以，长话短说，像 grunt-bower-install 这样的工具可以提供帮助，但最终，您最初所做的是最安全的方法。

只是一个更新。

yeoman 的generator-webapp现在包括这个 Grunt 任务，grunt-bower-install ， 盒子外面。所以，我上面描述的结果已经过时了。

使用 grunt-bower-install 时的新结果与 jquery-masonry

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/eventie/eventie.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/jquery-masonry/masonry.js"></script>
<!-- endbower -->