bower简明入门教程

素颜马尾好姑娘i 2022-06-02 04:59 242阅读 0赞

## 什么是bower ##

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

## 准备工作 ##

1.  安装`node`环境:[node.js][]
2.  安装`Git`，bower从远程git仓库获取代码包:[git简易指南][git]

## 安装bower ##

使用npm，打开终端，输入：

npm install -g bower

其中`-g`命令表示全局安装

## 开始使用 ##

使用`help`命令查看帮助  
![d99586a09f693f02767e9ffa6ef89d78.png][]

### 自定义包的安装目录 ###

首先进入项目目录下，新建文件`1.txt`

然后命令行进入项目目录下，输入命令重命名该文件为`.bowerrc`：

rename 1.txt .bowerrc

这个`.bowerrc`文件是自定义`bower`下载的代码包的目录，比如现在我的项目结构如下图：

![699b330ea5c1cd0ac12e49ecf8b5832e.png][]

那我的`.bowerrc`文件内容如下：

{
      "directory" : "js/lib"
    }

### bower初始化 ###

命令行进入项目目录中，输入命令如下：

bower init

会提示你输入一些基本信息，根据提示按回车或者空格即可，然后会生成一个`bower.json`文件，用来保存该项目的配置，如下：

{
      "name": "bb_boot",
      "version": "0.0.1",
      "authors": [
        "savokiss <jaynaruto@qq.com>"
      ],
      "moduleType": [
        "amd"
      ],
      "license": "MIT",
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "js/lib",
        "test",
        "tests"
      ],
      "dependencies": {
      }
    }

### 包的安装 ###

下面终于开始安装需要的包了！  
比如我要安装一个`jquery`，输入如下命令：

bower install jquery --save

然后`bower`就会从远程下载`jquery`最新版本到你的`js/lib`目录下  
其中`--save`参数是保存配置到你的`bower.json`，你会发现`bower.json`文件已经多了一行：

"dependencies": {
        "jquery": "~2.1.4"
      }

### 包的信息 ###

比如我们想要查找`jquery`都有哪些个版本，输入如下命令：

bower info jquery

会看到`jquery`的`bower.json`的信息，和可用的版本信息

可以看到`jquery`最新的兼容版版本为`1.11.3`

### 包的更新 ###

上面安装的是最新版的高版本`jquery`，假如想要兼容低版本浏览器的呢？  
已经查到兼容低版本浏览器的`jquery`版本为`1.11.3`，下面直接修改`bower.json`文件中的`jquery`版本号如下：

"dependencies": {
        "jquery": "~1.11.3"
      }

然后执行如下命令：

bower update

`bower`就会为你切换`jquery`的版本了

### 包的查找 ###

还有一个很重要的功能，就是包的查找，比如我想要安装`bootstrap`的某个插件，但是记不住名字了，就可以直接在命令行输入：

bower search bootstrap

`bower`就会列出包含字符串`bootstrap`的可用包了

### 包的卸载 ###

卸载包可以使用uninstall 命令：

bower uninstall jquery

[node.js]: http://nodejs.org/
[git]: http://www.bootcss.com/p/git-guide/
[d99586a09f693f02767e9ffa6ef89d78.png]: /images/20220602/f5bf48ce5e9c402cbba096e6350acd54.png
[699b330ea5c1cd0ac12e49ecf8b5832e.png]: /images/20220602/c2f5876b2e76441286da4eb197f3bab1.png