17

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？

4

2 回答 2

16

我写了一个工具来帮助解决这个问题，grunt-bower-install. 这是一个非常适合 Yeoman 工作流程的 grunt 插件。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可以提供帮助，但最后，你最初所做的是最安全的方法。

只是一个更新。

Yeomangenerator-webapp现在包括这个 Grunt 任务，grunt-bower-install开箱即用。所以，我上面描述的结果已经过时了。

使用grunt-bower-installwith时的新结果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 -->
于 2013-07-31T21:04:35.830 回答
1

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

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

渴望听到反馈，因为这是我发布的第一个模块。

于 2014-03-16T23:37:54.040 回答