Javascript 包含通过Bower安装的插件的一般方法是什么？

想象一下，我刚刚使用

bower install angular date range picker

在项目的根目录中安装了一个插件

现在，我的所有js文件（angular project）通常都位于项目根目录中名为js on的文件夹中

在这里，我觉得我错过了一些东西。如何将我的新插件包含到我的项目中，而不追溯到bower命令安装的每个依赖项？我通常会在index.html中包含我的所有脚本以及标记。我已经将插件js文件从bower_components文件夹复制到我的js文件夹中（我现在觉得这是错误的）

如果这是链接到插件的一种可接受的方式，那么我应该直接链接到bower_components文件夹吗？我如何包含该插件的所有依赖项，而不为每个依赖项编写脚本标记？（我怎么知道它取决于什么，比如bower_components文件夹中还有其他插件）

---

抱歉，如果这个问题没有任何意义，我显然缺少一些非常重要的工作流知识，我不知道如何用短语表达这个问题，以便在Google上找到我想要的东西。

您应该为每个问题编写一个脚本标签。在大多数情况下，检查相应的github repo以查看需要哪些依赖库。除此之外，查看脚本标记中应该引用的文件的提示的扩展名为

.min

.min

是库的缩小版本，它删除空白并替换大变量名

一旦应用程序准备好投入生产，您可以做几件事

您可能希望移动到内容交付网络（CDN），而不是在本地引用文件。这样做的好处是，您将有一个可靠的主机托管您的库文件

另一种选择是使用Grunt或Gulp，它能够将所有依赖性文件合并到一个文件中。这样做的好处是加载一个文件比加载多个文件的加载时间快得多

---

通常它的配置如下：

<!-- build:js ${contextRoot}/app/assets/scripts/modules.min.js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/select2/select2.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
...
<!-- endbuild -->

...

---

将脚本包含到index.html中。然后，在构建过程中，一些grunt/gulp（例如grunt usemin）插件可以用文件的缩小版本替换

注释之间的整个部分。

如前所述，您可以使用with，它是专门为此设计的，可用于自动将bower依赖项注入

index.html

，以及您的其他js/css文件（您将需要依赖项）

---

您将不再需要担心文件注入。

或者您可以使用gulp/grunt来整合所有第三方/供应商文件，并将所有文件都包含在一个文件中。好的，因此我当时的思路是正确的，您确实需要弄清楚插件需要哪些依赖项（我发现，文档中很少提供此类信息）并依次链接到每个。我喜欢连接的想法。我想这会让事情变得更简单。@lorless yeah main bower将文件压缩为一个文件，这样它也会自动为您按正确的顺序排列：）