0

So I recently used angular-seed in a code challenge as part of a job interview process. I got dinged for keeping bower_components inside the app folder.

Question 1: Is this really such a bad practice - to keep bower_components inside the app folder?

After getting dinged, I decided to install bower_components on the same level as the app folder. But of course, all the references in index.html no longer made sense since the references expected bower_components to be inside the app folder.

Question 2: How would I reference the bower_components outside the app folder? Would this need to be part of a build step to copy app to a ./public folder, then copy bower_compnents into ./public/app, then start the server and tell it to serve static files from ./public/app?

I modified the "prestart" command to accomplish this, but it just didn't feel right. And then there's also the issue of making changes in the app folder and then having to restart the server every time to see my changes in the browser.

What's the best practice here? I know the yeoman generator keeps bower_components outside the project root and a gulp/grunt task corrects the references, but I like angular-seed because it's pretty minimal and I'd like to just use npm for build tasks.

4

1 回答 1

0

最好保留bower_components在应用程序文件夹之外，与node_modules.

他们都是包管理器。用于.bowerrc设置路径：（docs）

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

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

或者，如果您使用 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 看起来像这样。 （使用时会生成 Gruntfile yo angular）

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

<script src="scripts/vendor.2bed74dc.js"></script>
<script src="scripts/scripts.f9d73ac6.js"></script>
于 2016-08-30T19:43:19.527 回答