当前位置: 首页 > Web前端 > HTML5

前端包管理Bower入门教程

时间:2023-04-05 00:20:08 HTML5

Bower了解到bower是twitter的一个开源项目,使用nodejs开发,用于web包管理。如果github上托管的开源项目越来越多,bower只需要在github上的项目中添加一个配置文件就可以使用bower的方式使用安装包了。bower作为一个包管理器,可以提供添加新的web包、更新web包、删除web包、发布web包、管理包依赖等功能。一个web包一般被认为是由html+css+javascript组成的。环境依赖bower依赖Node.js,所以安装前需要一个Node环境,在Node.js官网安装最新版本,然后在命令行查看是否安装成功node-v//版本号query我在v10.16.0上安装了Bowerbower官网优点:项目依赖安装,可以修复资源文件,支持资源版本升级,可以支持缓存安装等全局安装bowernpminstall-gbower//如果你觉得npm安装比较慢,安装完成后可以使用淘宝镜像cnpm安装,查询版本号bower-v//如果出现对应的版本号,则安装成功空文件夹bowerDemo被创建),然后命令行进入空文件cdbowerDemo初始化bowerbowerinit会提示输入一些基本信息,根据提示回车或者空格即可,然后是一个bower.json文件会生成保存项目配置的插件安装接下来就可以安装插件了,比如安装下载jquery,在根目录下输入如下命令安装bowerinstalljquery--save安装完成后就是成功,你会在文件夹中看到一个bower_components文件夹,这也是插件的默认文件夹。也可以输入查询包信息的命令,输入命令后会出现包的所有版本,然后可以更新安装不同版本bowerinfojquery//包信息bowerupdate//包更新boweruninstalljquery//packageuninstall这是一个简单的bower安装和插件包的下载当然,这些还不够。作为一个前端开发,有时候你会写很多html,css,js页面,甚至每次新建项目都使用同一个模板,所以这个时候,使用到bower的注册功能,发布自己的包或插件到bower平台,下载使用即可。bower平台发布插件,下载第一个标签(假设你已经将项目模板发布到github),在你本地仓库的根目录下运行如下命令//-a是添加标签名称,一般写版本号,-m为Tags添加注释信息gittag-a1.0.0-m“versioninfo”//–tags参数表示将所有的tags提交到服务器,正常的gitpushoriginmaster操作不会pushtags到服务器gitpushorigin--tags一切准备就绪后开始注册插件bowerregisterprojectName项目的github地址eg:bowerregisterfontendhttps://github.com/mengnn/fontendGet.git这样,你的插件注册成功,你可以在你的项目中使用了在根目录下下载你的插件(模板),这样就不需要重复copybowerinstallfontend--save-dev//fontendis我注册的插件名称。如果运行成功,可以看到你的模板已经下载到你的项目文件夹下了,就这样吧!这时候你的bower.json文件也会相应的显示你安装的插件配置信息(版本号,名称),当然对于“玩家”来说,真的很有意思!