Question

所以我最近在代码挑战中使用angular-seed作为求职面试过程的一部分。为了将bower_components保存在app文件夹中，我感到很沮丧。

问题1：这真是一个不好的做法 - 将bower_components保留在app文件夹中吗？

在遭遇恐慌后，我决定在与app文件夹相同的级别安装bower_components。但是，当然，index.html中的所有引用都不再有意义，因为引用期望bower_components位于app文件夹中。

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

我修改了＆＃34;预启动＆＃34;命令完成此任务，但它没有感觉正确。然后还有在app文件夹中进行更改然后每次都要重新启动服务器以在浏览器中查看我的更改的问题。

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

Answer 1

最好将bower_components保留在app文件夹之外，与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>

Angular Seed - 在与app相同的目录文件夹级别安装bower_components

1 个答案: