bower是什么?
bower用来管理项目中用到的js、css等框架,比如jquery、bootstrap、underscore等
为什么需要bower?
jquery我可以自行到网上去下载呀,为什么要需要bower呢?一个可以下载,多个你都去网上下载难道不浪费时间吗?而且网上下载的最好要去官网下载,不然有时候会出现莫名的错误。使用bower可以节省我们在网上下载这些框架的时间;同时,来源统一,相对安全。
bower的安装
F:\Program\workspaces\node\proedu>npm install -g bower
C:\Users\zhao\AppData\Roaming\npm\bower -> C:\Users\zhao\AppData\Roaming\npm\nod
e_modules\bower\bin\bower
+ bower@1.8.4
added 1 package in 52.826s
检测bower安装是否成功
F:\Program\workspaces\node\proedu>bower -v
1.8.4
使用bower下载jquery
F:\Program\workspaces\node\proedu>bower install jquery
bower not-cached https://github.com/jquery/jquery-dist.git#*
bower resolve https://github.com/jquery/jquery-dist.git#*
bower download https://github.com/jquery/jquery-dist/archive/3.3.1.tar.gz
bower extract jquery#* archive.tar.gz
bower resolved https://github.com/jquery/jquery-dist.git#3.3.1
bower install jquery#3.3.1
jquery#3.3.1 bower_components\jquery
查看当前目录,发现多了个bower_components文件夹,下载的jquery正是被放在了这个文件夹里面:
如何更改bower下载的文件存放目录?
比如,我并不习惯下载的js或者css框架放在bower_components文件夹里面,而是喜欢放在resources里面,怎么配置呢?在当前目录F:\Program\workspaces\node\proedu下新建一个名字叫做".bowerrc"的文件,增加如下内容:
{
"directory": "resources"
}
建好之后的目录结构如图:
此时再重新安装下jquery:
可以看到在我们配置的resources下面就已经有了,配置成功。“.bowerrc”文件就是用来配置bower安装目录的。
bower.json的使用
万一有一天我这个resources目录不小心被删除了,怎么办呢?难道我还要从项目里一个个寻找依赖并一个个地重新安装一次吗?不需要。我们安装的时候可以加上--save就可以把安装的插件保存在一个bower.json的文件中,这点很类似于npm,其实bower的语法跟npm本来就很相似。不过要想通过"--save"使用bower.json保存安装插件的信息,需要先使用bower init命令来通过向导创建这个bower.json文件。
F:\Program\workspaces\node\proedu>bower init
? name proedu
? description
? main file index.js
? keywords
? authors ghzdw <zhaodwaiguoxue@163.com>
? license ISC
? homepage
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being ac
? would you like to mark this package as private which prevents it from being ac
cidentally published to the registry? No
{
name: 'proedu',
description: '',
main: 'index.js',
authors: [
'ghzdw <zhaodwaiguoxue@163.com>'
],
license: 'ISC',
homepage: '',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'resources',
'test',
'tests'
],
dependencies: {
jquery: '^3.3.1'
}
}
? Looks good? Yes
F:\Program\workspaces\node\proedu>
创建的时候直接按回车就可以了。可以看到bower已经识别到我已经安装了jquery,自动在dependencies中帮我加上了。
再安装一个bootstrap:
查看bower.json:
查看resources文件夹已经有了bootstrap,里面的dist目录就是我们需要的:
不知大家有没有注意到,我在使用bower init的时候,bower帮我提示的作者是ghzdw <zhaodwaiguoxue@163.com>,这是因为我已经下载了git,使用bower需要依赖git,我们需要先下载这个git,关于git的使用,请参见我的其他文章
查看插件信息,bower info 插件名,如:
bower info jquery
查询包信息,bower search 插件名,如:
bower search bootstrap
上面的命令会去查找含有bootstrap关键字的插件。
根据bower.json里面配置的依赖安装插件使用bower install:
使用"bower update 包名"更新指定包:
修改bower.json里面的
"dependencies": {
"jquery": "^3.3.1",
"bootstrap": "^4.0.0"
}
为:
"dependencies": {
"jquery": "^1.12.4",
"bootstrap": "^4.0.0"
}
即修改了jquery的版本,执行命令:
F:\Program\workspaces\node\proedu>bower update jquery
bower not-cached https://github.com/jquery/jquery-dist.git#^1.12.4
bower resolve https://github.com/jquery/jquery-dist.git#^1.12.4
bower download https://github.com/jquery/jquery-dist/archive/1.12.4.tar.gz
bower extract jquery#^1.12.4 archive.tar.gz
bower resolved https://github.com/jquery/jquery-dist.git#1.12.4
bower install jquery#1.12.4
jquery#1.12.4 resources\jquery
此时,我们resources目录下的jquery的版本就由原先的3.3.1变为1.12.4了。