如何在网页中包含 Bower 组件

Question

我从 bower 开始，一开始关注 this tutorial。我安装软件包没有问题，但是如何在静态网页中使用它。

我显然可以这样做：

<script src="bower_components/module_name/module.js"></script>

对于我需要的每个组件，但在我看来这不是一个好方法。所以我想我错过了一些可以将页面生成链接到我的凉亭组件的东西。

可能有一个凉亭组件可以帮助我将所有包包含在bower_components 目录中。

Answer 1

这是一种方法，但我通常将 bower 与其他构建工具结合使用，例如 grunt 或 gulp。然后你可以使用一个任务，比如grunt-bower-task，只将必要的文件复制到你选择的目录中。

如果您真的很有野心，您可以利用bower api 推出您自己的构建解决方案，将“主要”文件提取到您的项目中。

需要注意的另一件事是，并非您想要包含的每个依赖项都能正确实现 bower 的配置（例如：缺少 main 属性或 bower.json 文件）。还有一些项目需要您包含资产（字体、图像等），而 bower 目前无法解决这些问题。在这些情况下，您将需要想出一种方法来移动文件。我总是不得不使用grunt-contrib-copy 之类的东西来把所有东西都放在它的位置。