Bower的安装与基本使用

livem 发布于2019-08-22 18:23 / 1840人阅读

摘要：安装依赖于和，如果要使用它需要先安装和，因为包含，所以只需要安装即可。安装配置文件作用类似于，执行时会依据这个配置文件更新库配置文件必须，如果需要注册包，则该包名唯一。

Bower是什么东西？

一个前端包管理工具。能够帮我们管理Web站点上的各种框架，类库等等。主要作用有如下：能够帮助我们跟踪前端包，并且保证他们是最新（或者是你指定的特定版本），Bower能够管理前端里面的HTML,CSS,JS，甚至还可以是图片。Bower还有一个最大的好处，它对我们前端进行了优化。如果多个包依赖于一个包，例如jQuery，那么Bower将只下载jQuery一次，这样就称为扁平依赖，它有助于减少页面加载。

简言之就是用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

安装

bower依赖于node.js和npm，如果要使用它需要先安装node.js和npm，因为node.js包含npm，所以只需要安装node.js即可。

1.Node安装（若已安装可跳过）：

Windows 安装包(.msi)
32 位安装包下载地址 : https://nodejs.org/dist/v4.4....
64 位安装包下载地址 : https://nodejs.org/dist/v4.4....

CentOS安装：

获取源码，解压，编译安装，配置变量修改权限,编译文件，检查版本
cd /usr/local/src/
wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz
tar zxvf node-v0.10.24.tar.gz
cd node-v0.10.24
./configure --prefix=/usr/local/node/0.10.24
make
make install
vim /etc/profile
设置nodejs环境变量，在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 一行的上面添加如下内容:
#set for nodejs
export NODE_HOME=/usr/local/node/0.10.24
export PATH=$NODE_HOME/bin:$PATH

//重编译生效
source /etc/profile
//检查是否安装成功
node -v

2.Bower安装：

npm install bower –g

初始化

bower init

安装、更新、卸载依赖包

bower install
如：bower install jQuery#1.2

bower update
bower unstall

清理缓存

bower cache clean

查询

bower search 包名

注册包

先去github上面建立一个库（项目）（公有，私有都行）或者其他，只要能让bower.com能访问到地址应该都可以。
比如建立了一个叫做angualr-demo的库，然后加入bower init来管理这个库。

bower install ngDemo 安装

Bower配置文件(bower.json)

作用类似于composer.json，执行bower install时会依据这个配置文件更新库

bower.json配置文件
{
"name":"",              //必须，如果需要注册包，则该包名唯一。
"description":"",       //可选，包描述
"main":[],              //可选，入口文件，bower本身不使用，供第三方构建工具会使用
//每种文件类型只能有一个。
"ignore":[],            //可选，文件或目录列表。bower安装的时候将忽略该列表中的文件。
//bower是从git仓库或压缩包下载一个包，里面的文件并不一定全部需要。
"dependencies":[],      //依赖包，name:value，value可以是包的semver       
//range(版本号范围)，也可以直接是一个包的git地址或压缩包地址。
"devDependencies":[],   //开发依赖包，仅仅在开发过程中测试或者编译文档用，部署生产环境是不需要。
//格式和dependencies 相同
"resolutions":[],       //包引用冲突自动使用该模块指定的包版本
//格式和dependencies 相同
"overrides" :[          //这个也很关键，可以覆盖一个包中的默认设置，比如main里面设定的入口文件
"package-name":{    //这样可以根据需要，让第三方工具只打包需要的文件。
"main":[]
        }
    ],                     
"moduleType":"",        //可选，指定包采用那种模块化方式(globals,amd,node,es6,yui)
"private":Boolean,      //是否公开发布当前包,如果只是使用bower来管理项目的包，设置为true.
"license":"",           //授权方式(GPL-3.0,CC-BY-4.0.....)
"keywords":[],          //可选，方便注册后容易被其他人搜索到。
"authors":[],           //作者列表
"homepage":[],          //主页，包介绍页
"repository":{          //包所在仓库。
"type": "git",
"url": "git://github.com/foo/bar.git"
    },
｝

.bowerrc

.bowerrc文件是用来配置bower本身的一些默认配置的

如，bower install 安装，默认会安装到当前目录下，要修改该安装位置，则需要编辑.bowerrc文件

新建.bowerrc文件
{
    "directory":"public/bower_components"
}

云服务器 GPU云服务器 hbase的安装与使用 mysql数据库的安装与使用 mysql安装与使用 hadoop安装与使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95806.html

Bower的安装与基本使用

摘要：安装依赖于和，如果要使用它需要先安装和，因为包含，所以只需要安装即可。安装配置文件作用类似于，执行时会依据这个配置文件更新库配置文件必须，如果需要注册包，则该包名唯一。 Bower是什么东西？一个前端包管理工具。能够帮我们管理Web站点上的各种框架，类库等等。主要作用有如下：能够帮助我们跟踪前端包，并且保证他们是最新（或者是你指定的特定版本），Bower能够管理前端里面的HTML,C...

PrototypeZ 2019-07-01 10:14 评论0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：还可以用作文件加载使用，详细请看。实用命令除了简单运行，还可以添加几个参数，方便部署文件处理。以上仅仅介绍了前端开发最基本的用法，更多参数以及功能使用，参考官网作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

roadtogeek 2019-08-21 10:47 评论0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：还可以用作文件加载使用，详细请看。实用命令除了简单运行，还可以添加几个参数，方便部署文件处理。以上仅仅介绍了前端开发最基本的用法，更多参数以及功能使用，参考官网作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

LeexMuller 2019-08-28 18:22 评论0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：还可以用作文件加载使用，详细请看。实用命令除了简单运行，还可以添加几个参数，方便部署文件处理。以上仅仅介绍了前端开发最基本的用法，更多参数以及功能使用，参考官网作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

KevinYan 2019-08-01 14:56 评论0 收藏0