没有为角度添加凉亭传递依赖

Question

我不确定它是如何工作的，所以请原谅我的粗略问题。 我正在玩角度，并注意到凉亭的一些不良行为。我使用 yeoman 创建了我的应用程序，并使用 bower 进行依赖管理。 index.html 文件中有一个部分应该由 bower 管理：

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>
<script src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
<!-- endbower -->

我注意到传递依赖项未添加到此列表中。例如 angular-ui-tinymce 依赖于 tinymce。即使 tinymce 是作为传递依赖安装的，它也不包含在 index.html 文件中，所以我必须自己包含它。但这破坏了使用 bower 管理脚本的做法（即，如果我卸载 angular-tinymce，bower 将删除其脚本，但我手动添加的 tinymce 脚本将挂在那里。

可以告诉 bower 在 index.html 文件中添加传递依赖吗？或者这是一个坏主意，应该手动管理？ 这里社区的最佳做法是什么

Answer 1

这实际上是一个名为grunt-bower-install 的Grunt 任务，它正在插入到您的HTML 中。它在您的Gruntfile.js 中配置为bower-install，然后可能作为grunt serve 的一部分运行。也可以直接调用：grunt bower-install。

只要您在bower.json 中安装并保存了 Bower 组件，它及其依赖项就会按照与它们的关系匹配的顺序注入到您的 HTML 中。但是，唯一一次不起作用的是 Bower 组件未在其自己的 bower.json 文件中指定 main 属性。

所以，需要明确的是，您有一个bower.json，它列出了您的应用程序的依赖项。此外，您列出大部分时间的每个依赖项都将有自己的bower.json 列出其 依赖项（如果有）和一个main 属性，告诉事情比如grunt-bower-install 注入什么文件到 HTML 中。一旦这些依赖项之一未能遵循指定main 的约定，grunt-bower-install 就会失去它的魔力。

在angular-ui-tinymce的情况下，确实是list tinymce as a dependency，但是tinymce没有配置bower.json文件。因此，没有带有main 属性的bower.json 可以告诉grunt-bower-install 要注入哪个文件out of all these。

我能看到的最好的选择是自己手动写出<script> 标签，就像你说的那样，如果你决定不使用它，只需手动删除它。在最糟糕的情况下，当grunt-bower-install 不起作用时，它仍然只是我们这些年来习惯的Web 开发。 :)

Answer 2

正确的解决方案是为 bower 必须生成 bower.json 文件的任何包添加覆盖到您的 bower.json 文件，这将缺少 main.xml 文件。 示例：

  "dependencies": {
    "angular": "1.2.26",
    "angular-sanitize": "1.2.26",
    "angular-route": "1.2.26",
    "jquery": "1.11.1",
    "bootstrap": "3.1.1",
    "jquery-migrate": "1.2.1",
    "angular-ui-tinymce": "latest",
    "json3":"3.3.2",
    "es5-shim": "3.1.1"
  },
  "overrides": {
    "tinymce": {
      "main": "tinymce.min.js"
    }
  }

这里tinymce是angular-ui-tinymce的传递依赖，它生成的bower.json文件没有main，所以我们在override部分提供它，并带有相对于包根的路径。