在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 -->