你应该在生产中链接到bower_components吗？

Question

我对使用Bower相对较新，我不知道你是否应该在生产中链接到bower_components。我是否应该使用grunt任务将我需要的文件从bower_components链接或复制到一个单独的目录中？

我问这个是因为我从未见过一个名为“bower_components”的网站，所以我有点害怕。所有初学者指南都链接到'bower_components / ...'，就像角度教程一样。

Answer 1

你在使用Yeoman吗？

根据您的Gruntfile.js，您应该有不同的任务， 其中一个是'bower-install'：这个任务将读取你index.html， 找到以下评论栏

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

和注入在其中包含bower.json中指定的所有依赖项。 这意味着该任务将为您的所有＆lt; script src“/ bower_components /..”＆gt;块。

你从未注意到一个带有“bower_components”引用的网站，因为你的/ app dir是你的'开发'环境，你的源项目。 从源代码中，您将创建运行“构建”任务的生产应用程序：此任务由生成不同作业的不同子任务组成，其中一个是连接 bower_install任务在一个js中添加的所有脚本文件。

然后还有另一个任务将缩小此文件，另一个将运行测试，另一个将创建生产站点所在的“dist”目录等等...

如果您使用Yeoman，您已经在Gruntfile.js中配置了所有这些任务，只需打开它并尝试了解每项任务的作用。

初看起来很难理解，例如构建任务指的是14或15个子任务，我建议你注册只运行一个任务的自定义任务，看看会发生什么。

干杯

Answer 2

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

{
  "directory": "public/vendor"
}

然后还有一个密切相关的问题，即您是否应该检查此目录的内容以进行源代码管理。 For a much more in depth discussion of that question, see here

最后，正如其他人已经提到的那样，建议您连接并缩小前端依赖关系。

Answer 3

我没有看到直接链接到它的任何问题，但通常你会想要将所有脚本连接到一个文件中并对其进行uglify，以便减少文件大小以进行生产。

咕噜uglify task可以很容易地为你处理这两件事。您只需提供要加入的文件数组。

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

Answer 4

通过使用bower_components开始很常见。您可以在the angular-seed starter project's script references中看到此信息。一旦部署了生产应用程序并且加载时间和性能变得至关重要，您应该考虑转换到解决方案以合并和缩小依赖关系。