Bower未添加用于Angular的传递依赖项

Question

我不确定它是如何工作的，所以请原谅我的问题。我正在使用Angular进行开发，并注意到Bower存在一些不良行为。我使用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 文件中添加传递依赖吗？或者这是一个不好的想法，应该手动管理？在社区中，最佳实践是什么？

- Arash

Answer 1

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

只要你安装并保存了Bower组件及其依赖关系在bower.json中，那么它们将按照它们之间的关系顺序注入到你的HTML中。然而，唯一不起作用的情况是当Bower组件在自己的bower.json文件中没有指定main属性时。

所以，明确一点，你有一个列出应用程序依赖项的。此外，您列出的每个依赖项大多数情况下将具有其自己的，其中列出了它的依赖项（如果有），并且具有一个main属性，告诉像grunt-bower-install这样的东西将哪个文件注入到HTML中。只要其中一个依赖项未遵循指定main的约定，grunt-bower-install就会失去其魔力。

在angular-ui-tinymce的情况下，它确实将tinymce列为依赖项, 但tinymce没有配置bower.json文件。因此，没有bower.json文件有一个main属性来告诉grunt-bower-install注入哪个文件从所有这些文件中。

我能看到的最好的选择是手动编写<script>标签，就像你说的那样，并在你决定不使用它时手动删除它。最糟糕的情况是，当grunt-bower-install无法工作时，它仍然只是我们多年来一直使用的Web开发。 :)

- Stephen

---

ooc，我假设这与grunt构建过程无关，该过程处理缩小。那么仍然会发生在正确文件夹中的js文件吗？ - KevDog

Answer 2

正确的解决方案是在您的文件中为任何需要生成文件且缺少主文件的包添加一个覆盖。例如：

  "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 文件没有主文件，因此我们在 override 部分提供它，路径相对于包根目录。

- Tony BenBrahim

---

@naXa，“overrides”基本上是用你提供的内容替换package.json中的依赖项。上面的示例中，tinymce包有一个package.json，但它没有定义主入口点，因此我们在这里提供它（以便像wiredep这样的工具可以包含js脚本语句）。 - Tony BenBrahim