在yeoman项目HTML文件中引用通过bower安装的javascript依赖项的“正确”方法是什么？

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，要么是指向watch命令输出的symLink。我知道require.js可能代表我管理这个问题，但是有办法解决需要吗？

Answer 1

我写了一个有助于此的工具grunt-bower-install。这是一个非常适合Yeoman工作流程的插件。在更改凉亭组件后手动运行grunt bower-install。 （安装新的后，删除一个，等等。）

我用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属性。没有这些知识，脚本（像我的）就无法可靠地检测到实际包的核心文件。

这些工具都很年轻。鉴于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 -->

Answer 2

我只是在npm上放了一些代码，它们将你的依赖项放在一个有序的数组中。 https://www.npmjs.org/package/dependency-orderer

如果你没有使用grunt bower-install，或者不想使用脚本标签（如果你要捆绑你的javascript，你应该这样做），希望这对你有用。

热衷于听取反馈，因为这是我发布的第一个模块。