现代混合应用程序通常依赖于大量的库和框架，这可能会给开发团队带来许多问题，尤其是当团队中有很多成员时。 问题可能包括：
开发团队中依赖项版本的变化 管理依赖项的下载和加载时的开销 在源代码树中始终难以找到依赖项的困难 始终如一地将依赖项加载到应用程序中的困难 源控制系统上的应用程序使用了过多的空间 持续集成过程中过于复杂Bower和wiredep可以缓解这些问题。
Bower有助于规范，下载和管理依赖项的版本和文件，可以选择从源代码控制系统中删除其文件。 通过确保始终加载Bower安装的依赖项， wiredep对Bower 表示赞赏。Node.js是命令行驱动的。 打开一个终端，然后使用以下命令使用节点包管理器来全局安装所需的Node.js包：
npm install –g wiredep bower创建一个新的名为MobileFirst项目ToolsProject并命名为混合应用程序AmazingApp 。 将Android环境添加到应用程序：
mfp create ToolsProject cd ToolsProject mfp add hybrid AmazingApp cd apps/AmazingApp从现在开始，执行ToolsProject/apps/AmazingApp目录中的所有命令。
初始化一个新的Node.js项目：
npm init按照提示操作-接受默认值就可以了。 为您的应用程序创建了一个新的package.json文件。
初始化一个新的Bower项目：
bower init按照提示进行操作-与Node.js项目初始化一样，接受默认值也可以。 为您的应用程序创建了一个新的bower.json文件。
通过创建名为ToolsProject/apps/AmazingApp/.bowerrc的文件，将Bower配置为使用MFP项目结构，其内容如下：
{ "directory": "common/bower_components" }该文件指示Bower将软件包安装在目录common/bower_components 。
您现在可以将Bower软件包添加到您的项目中-种类繁多。 Bower目录中提供了大多数Web框架。 出于演示目的，安装引导程序框架-对于许多项目来说，这是一个很好的起点：
bower install --save bootstrap运行此命令时，您会注意到安装了一个名为jQuery的附加软件包，因为Bootstrap依赖于它。 Bower会尝试自动解决这些依赖关系，并且仅在发生任何冲突时才会向您查询解决方案。 与NPM不同，Bower将所有软件包作为兄弟安装在bower_components目录中。 这样做会增加冲突的机会，但是会减少安装的软件包的数量。
现在，您的Bower软件包已安装，您可以将它们手动添加到应用程序HTML文件中。 为避免手动干预，您可以在从应用程序添加或删除其他Bower软件包时，使用wiredep自动执行此过程。 Wiredep使您可以将Bower依赖项关联到源代码中。
编辑您的common/index.html文件，并添加占位符以供wiredep使用，如下所示：
<html> <head> <!-- pre-existing <head> content --> <!-- New lines to support wiredep --> <!-- bower:css --> <!-- endbower --> </head> <body> <!-- pre-existing <body> content --> <!-- New lines to support wiredep --> <!-- bower:js --> <!-- endbower --> </body> </html>您现在可以使用以下命令注入Bower依赖项：
wiredep --verbose --bowerJson bower.json --src common/index.html如果打开common/index.html ，则会看到wiredep插入了HTML标记以加载Bower软件包公开的JS和CSS资源。
上面的命令太复杂了，难以记住，因此请创建一个快捷方式以备后用。 编辑package.json文件，并使用脚本条目对其进行扩充，如下所示：
{ "scripts": { "wiredep": "wiredep --verbose --bowerJson bower.json --src common/index.html" } }从现在开始，您只需输入npm run wiredep runwiredep即可npm run wiredep 。
您可以将Bower配置为在安装软件包时自动运行cableep。 编辑您先前创建的.bowerrc文件，并使用后安装脚本对其进行扩充，如下所示：
{ "scripts": { "postinstall": "wiredep --verbose --bowerJson bower.json --src common/index.html" } }删除并重新添加Bower依赖项，以验证wiredep是否按预期工作。 首先，删除依赖项并更新index.html文件：
bower uninstall --save bootstrap npm run wiredep检查您的common/index.html文件，您将看到JS和CSS加载标记已被删除。 接下来，重新添加依赖项。 Bower安装后脚本将自动更新index.html文件：
bower install --save bootstrap检查您的common/index.html文件-您将看到JS和CSS加载标签已重新添加。
在本教程中，您学习了如何使用Bower和wiredep在IBM Mobile First Platform上管理混合Web应用程序中的依赖关系。
翻译自: https://www.ibm.com/developerworks/websphere/library/techarticles/1503_maynard/1503_maynard.html
