1

想象一下，我刚刚bower install angular-date-range-picker在项目的根目录中安装了我想要的插件。

现在，通常我所有的 js 文件（角度项目）都位于项目根目录上名为 js 的文件夹中。

这就是我觉得我错过了什么的地方。如何在不追溯安装 bower 命令的每个依赖项的情况下将我漂亮的新插件包含到我的项目中？我通常在 index.html 中包含我的所有脚本和标签。我已经将插件 js 文件从 bower_components 文件夹中复制到我的 js 文件夹中（我现在觉得这是错误的）。

如果这是链接到插件的可接受方式，那么我是否应该直接链接到 bower_components 文件夹，以及如何在不为每个插件编写脚本标签的情况下包含所有该插件的依赖项？（我怎么知道它取决于什么，例如那个 bower_components 文件夹中还有其他插件）。

抱歉，如果这个问题没有任何意义，我显然缺少一些非常重要的工作流程知识，而且我不知道如何用谷歌来表达我想要的问题。

4

3 回答 3

2

您应该为每个脚本编写一个标签。在大多数情况下，检查相应的 github repo 以查看需要哪些依赖库。除此之外，查看应该在脚本标记中引用的文件的提示将具有扩展名.min. .min是库的缩小版本，它删除了空格并替换了大变量名。

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

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

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

内容交付网络 - 维基百科

咕噜声 - 主页

Gulp - 主页

于 2014-12-03T12:17:21.183 回答
0

通常它是这样配置的：

<!-- 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）插件可以将<!-- build: -->注释之间的整个部分替换为文件的缩小版本。

于 2014-12-03T12:21:25.120 回答
0

如前所述，您可以将Grunt与grunt-injector一起使用，它是专门为此而设计的，可用于将 bower 依赖项自动注入到您index.html的 js/css 文件以及您的其他 js/css 文件中（您将需要wiredep依赖项）。

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

于 2014-12-03T12:35:16.697 回答