你是否应该在生产环境中链接到bower_components？

Question

我在使用Bower上相对较新，我不确定在生产中是否应该链接到bower_components。我应该使用grunt任务将所需文件从bower_components链接或复制到单独的目录中吗？

我问这个问题是因为我从来没有见过一个有名字叫“bower_components”的目录的网站，所以我有点害怕。所有初学者指南都只链接到'bower_components/...'，就像Angular教程一样。

- user499054

Answer 1

你正在使用Yeoman吗？

根据你的Gruntfile.js文件，你应该有不同的任务。其中一个任务是'bower-install'：这个任务将读取你的index.html文件，查找以下注释块：

<!-- bower:js -->
<!-- endbower -->

将您在bower.json中指定的所有依赖项注入其中。

这意味着任务将为您编写所有的<script src"/bower_components/..">块。

您从未注意到带有"bower_components"引用的网站，因为您的/app目录是您的“开发”环境，您的源项目。从源代码创建生产应用程序时，您将运行“build”任务：该任务由执行不同工作的不同子任务组成，其中之一是将bower_install任务添加的所有脚本合并为一个单独的js文件。

然后有另一个任务将对此文件进行缩小，另一个任务将运行测试，另一个任务将创建一个“dist”目录，其中包含您的生产站点等等...

如果您使用Yeoman，则所有这些任务都已在Gruntfile.js中配置好了，只需打开它并尝试理解每个任务的作用即可。

乍一看可能很难理解，例如构建任务引用了14或15个子任务，我建议您注册仅运行一个任务的自定义任务，然后查看会发生什么。

干杯

- Sergio Rinaudo

---

很棒的答案 - 謝謝Sergio。我也注意到from the yeoman github comment thread，/bower_components確實包含在/dist中，但如果您描述的一切最終都會被縮小，我不確定是否理解邏輯。想法是什麼？ - Chazbot

@Chazbot，你说得对。我已经在我的项目上运行了grunt的'build'任务，并发现编译后的index.html使用了bower组件，而不是构建好的vendor.js文件。你可以手动编辑编译后的HTML，删除bower_component脚本块并添加vendor.js，但我正在寻找自动化解决方案。 - Sergio Rinaudo

@SergioRinaudo 那图片和字体怎么办？它们的引用仅存在于CSS资源中，你如何处理它们？我的意思是，在不复制所有bower_components到dist的情况下。 - bruha

@bruha 我不知道这是否是最佳实践，但是是的，我使用复制任务来复制所有必要的资源。 - Sergio Rinaudo

Yoeman是一个很棒的工具，但如果你已经使用了Yoeman之外的模板，那么它还有什么用处呢？是的，有一个grunt任务可以自动将你的依赖项添加到HTML文件中，但这与仅拥有应用程序所需的必要文件以节省空间是不同的。你能给我们举个构建文件的例子，看看它会是什么样子吗？ - Coded Container

Answer 2

你可以通过创建一个 .bowerrc 文件（放在你的 bower.json 文件旁边），并将 directory 属性设置为其他名称，来为你的 bower 安装目录起一个更好的名字。例如，我在我的 .bowerrc 文件中有以下内容：

{
  "directory": "public/vendor"
}

同时还有一个相关的问题，即你是否应该将此目录的内容检入源代码控制。要了解更深入的讨论，请参见这里。

最后，正如其他人已经提到的，建议您将前端依赖项进行合并和压缩。

- Lukas S.

---

这是一个很好的想法，然而，Bower有时会带来一些不必要的文件，只会占用服务器上的空间。 - Coded Container

Answer 3

我认为直接链接没有问题，但通常情况下，您会希望将所有脚本连接到一个文件中，并将其压缩以减小生产环境中的文件大小。

grunt uglify 任务 可以轻松地处理这两件事情。您只需提供要加入的文件数组即可。

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});

- dezman

---

这是一个用JavaScript文件的好点子，但是如果CSS引用图像，链接位置可能会变得有点混乱。 - Coded Container

Answer 4

很常见的情况是开始只使用bower_components。你可以在angular-seed起始项目的脚本引用中看到这一点。但是，当您需要部署生产应用程序并且加载时间和性能变得关键时，您应该考虑将解决方案转换为合并和压缩依赖项。

- Scott Willeke