Angular Seed - 在与应用程序相同的目录文件夹级别安装 bower_components

Question

所以我最近在一个代码挑战中使用了angular-seed，作为求职面试过程的一部分。我因将 bower_components 保留在 app 文件夹中而受到谴责。

问题 1： 将 bower_components 保留在 app 文件夹中真的是一种糟糕的做法吗？

在搞定之后，我决定将 bower_components 安装在与 app 文件夹相同的级别。但当然，index.html 中的所有引用都不再有意义，因为这些引用预期 bower_components 位于 app 文件夹中。

问题 2：如何引用 app 文件夹外的 bower_components？这是否需要将应用程序复制到 ./public 文件夹，然后将 bower_compnents 复制到 ./public/app，然后启动服务器并告诉它从 ./public/app 提供静态文件的构建步骤的一部分？

我修改了“prestart”命令来完成此操作，但它只是感觉不对。然后还有一个问题是在 app 文件夹中进行更改，然后每次都必须重新启动服务器才能在浏览器中看到我的更改。

这里的最佳做法是什么？我知道 yeoman 生成器将 bower_components 保留在项目根目录之外，并且 gulp/grunt 任务会更正引用，但我喜欢 angular-seed，因为它非常小，我只想使用 npm 来执行构建任务。

Answer 1

最好将bower_components保留在应用文件夹之外，与node_modules相同。

他们都是包管理器。使用.bowerrc设置路径：(docs)

{
  "directory": "public/app/js"
}

bower install会将bower.json中的所有文件放到set目录下。

---

或者，如果您使用 grunt，您可以查看 yeoman generator-angular 如何使用 grunt 来缩小和清理 bower 脚本/css。

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/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-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="/scripts/app.js"></script>
        <script src="/controllers/main.js"></script>
        <!-- endbuild -->

Gruntfile.js looks like this. （使用yo angular时会生成Gruntfile）

当您使用grunt build 时，它会连接您的 index.html，将所有内容克隆到 dist 文件夹，脚本变为：

<script src="scripts/vendor.2bed74dc.js"></script>
<script src="scripts/scripts.f9d73ac6.js"></script>