bower 加速
为什么要使用Bower和Wiredep?
现代混合应用程序通常依赖于大量的库和框架,这可能会给开发团队带来许多问题,尤其是当团队中有很多成员时。 问题可能包括:
- 开发团队中依赖项版本的变化
- 管理依赖项的下载和加载时的开销
- 难以在源代码树中始终定位依赖项
- 始终如一地将依赖项加载到应用程序中的困难
- 源控制系统上的应用程序使用了过多的空间
- 持续集成过程中过于复杂
Bower和wiredep可以缓解这些问题。
本教程的先决条件
- 您应该安装了IBM MobileFirst命令行工具。 您将使用它们来创建项目,应用程序和环境。
- 或者,您仍然可以使用IBM MobileFirst Studio。 下载IBM MobileFirst Studio开发人员版 。
- 您应该熟悉使用IBM MobileFirst Platform创建混合应用程序的基础知识。
- 本教程中使用的工具依赖于最新版本的Node.js,您可以从nodejs.org下载 。 要验证是否正确安装了Node.js,请打开一个终端并输入
node -v
。 如果已正确安装,则会看到版本号,例如v0.10.33
。
安装工具
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项目
初始化一个新的Node.js项目:
npm init
按照提示进行操作-接受默认值就可以了。 为您的应用程序创建了一个新的package.json文件。
初始化Bower项目
初始化一个新的Bower项目:
bower init
按照提示进行操作-与Node.js项目初始化一样,接受默认值也可以。 为您的应用程序创建了一个新的bower.json文件。
通过创建名为ToolsProject/apps/AmazingApp/.bowerrc
的文件,配置Bower以使其与MFP项目结构ToolsProject/apps/AmazingApp/.bowerrc
使用,其内容如下:
{
"directory": "common/bower_components"
}
该文件指示Bower将软件包安装在目录common/bower_components
。
添加凉亭包
您现在可以将Bower软件包添加到您的项目中-种类繁多。 Bower目录中提供了大多数Web框架。 出于演示目的,安装引导程序框架-对于许多项目来说,这是一个很好的起点:
bower install --save bootstrap
运行此命令时,您会注意到安装了一个名为jQuery的附加软件包,因为Bootstrap依赖于它。 Bower会尝试自动解决这些依赖关系,并且仅在发生任何冲突时才会向您查询解决方案。 与NPM不同,Bower将所有软件包作为兄弟安装在bower_components
目录中。 这样做会增加冲突的机会,但是会减少安装的软件包的数量。
自动将CSS和JS标签插入HTML
现在,您的Bower软件包已安装,您可以将它们手动添加到应用程序HTML文件中。 为了避免手动干预,您可以在从应用程序添加或删除其他Bower软件包时,使用wiredep自动执行此过程。 Wiredep使您可以将Bower依赖项关联到源代码中。
增强index.html
编辑您的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>
手动运行wiredep
您现在可以使用以下命令注入Bower依赖项:
wiredep --verbose --bowerJson bower.json --src common/index.html
如果打开common/index.html
,则会看到wiredep插入了HTML标记以加载Bower软件包公开的JS和CSS资源。
创建一个NPM脚本条目
上面的命令太复杂了,难以记住,因此请创建一个快捷方式以备后用。 编辑package.json
文件,并添加一个脚本条目,如下所示:
{
"scripts": {
"wiredep": "wiredep --verbose --bowerJson bower.json --src common/index.html"
}
}
从现在开始,您只需输入npm run wiredep
runwiredep即可npm run wiredep
。
自动运行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加载标签已重新添加。
结论
在本教程中,您学习了如何在IBM Mobile First Platform上使用Bower和wiredep在混合Web应用程序中管理依赖性。
翻译自: https://www.ibm.com/developerworks/websphere/library/techarticles/1503_maynard/1503_maynard.html
bower 加速