Bower 基本应用介绍

李逸汐

于 2022-02-10 17:32:08 发布

阅读量635

点赞数

分类专栏：前端文章标签： git bower

本文链接：https://blog.csdn.net/zdvhmas/article/details/122859902

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景说明：
事情是这样的，博主最近在研究一个开源项目，其UI模块使用了Grunt，Bower构建管理，本来这也没什么，技术人嘛，遇到了新家伙拿下就好了，但事情却出了点意外，由于咱天朝这个“墙”的问题，Bower死活都运行不过去，折腾了好几天才勉强搞定，故而，记录下来，避免再次采坑，同时，也希望能帮助到有需要的朋友。

1.Bower项目结构

bower.json文件

每一个Bower项目都会有一个名叫“bower.json”的文件，其内容为对当前项目的描述，包括名称，版本，依赖等等，参考如下
在这里插入图片描述

.bowerrc文件

该文件是bower的配置文件，根据其所在位置不同其作用域也会不同，内容参考如下：
在这里插入图片描述
directory：配置了依赖组件的下载目录
registry：指定了Bower服务器地址，该项默认值为官方提供的查询入口
strict-ssl：指定在使用https协议时是否验证证书

补充说明：
Bower 必须与git项目管理工具配合使用（似乎SVN也可以，未尝试），其结构大概如下：
在这里插入图片描述

更多配置项请参考传送门

最后，附上一个完整的项目结构图
在这里插入图片描述

2.常用的命令说明

在命令行窗口，进入到bower.json同级目录中，我们可以使用bower 附带的命令进行管理操作，以下列举了一些常用命令，如下：

bower init

初始化一个bower项目的命令，根据提示一步一步输入对应内容，最终得到的即bower.json文件。

bower search 包名

查找指定的组件包，该命令会请求bower服务器进行查询，若查询到相关组件，则会列出可用的组件

补充说明：我们也可以通过web去官网查询需要的组件包。官方传送门

bower info 包名 or 包名#版本号

查看指定组件包的信息

bower install 包名 or 包名#版本号 [–save or -S] [–offline]

安装指定的组件，其中**–save** 表示将安装的组件包自动添加到bower.json dependences 节中，–offline 表示使用离线安装，bower将使用本地cache。

bower uninstall 包名 [–save or -S]

从directory目录卸载指定的组件包

bower cache list

显示当前本地缓存的组件包

bower cache clean

清除本地缓存的组件包

bower prune 包名

移除本地的指定的包

bower version [patch|minor|major] 版本号

更新项目版本号

bower version --message ‘’ or -m ‘%s’

自定义git提交信息，其中%s 代表版本号

更多信息请前往此处查看，传送门

3.Bower私服搭建

操作系统：CentOS Linux release 7.5.1804 (Core)

安装说明

Nodejs：v10.15.3
安装简单，就不做赘述了，去官网下载tar.xz包，解压缩，添加环境变量，如图：

验证安装，确保node -v正常执行。
Git: git version 1.8.3.1
通过yum安装，同样不做赘述，命令如下
yum install -y git git-daemon
验证安装，确保 git --version 能正常输出。
安装private-bower
npm install -g private-bower

private-bower配置

cd /usr/local & mkdir private-bower & vi my-bower-cfg.json
在这里插入图片描述
关键参数说明：

server : 配置服务监听地址和端口等信息
registryFile: 保存注册组件索引的文件
public: 公开组件配置部分，包括服务器地址，索引写入文件等
repositorycache: 组件缓存配置，git对应git管理工具，svn对应svn管理工具，上述配置文件中开启了git的缓存，此处建议开启git或者svn，避免过多的网络请求，毕竟国内嘛，大家知道即可
proxySettings:代理设置，用于private-bower 像公开库查询索引等
log4js : private-bower日志配置

更多更详细的信息请前往官方查看，传送门

补充log4j.conf.json内容：

{
"appenders": [
    {
    "type": "dateFile",
    "filename": "private-bower.log",
    "pattern": "-yyyy-MM-dd",
    "alwaysIncludePattern": false
    },
    {
    "type": "console"
    }
],
"replaceConsole": true
}

运行private-bower

nohup private-bower --config 配置文件 2>&1 &
最终的目录结构如图：
在这里插入图片描述

4.处理Git，Bower下载问题

前置条件：一台能去国外的电脑，这里就叫电脑A吧

配置上网代理

在电脑A上开启代理，博主这里使用的代理软件是fiddler4，配置如下：
在这里插入图片描述

这里的8888即代理端口。

private-bower 代理配置

在其配置文件中增加proxySettings节，内容如下：

    "proxySettings" : {
        "enabled": true,
        "host": "电脑A的地址",
        "port": 8888,
        "tunnel": false
    }

之后，重启private-bower服务。

配置Git 代理

private-bower所在服务器以及bower客户端部分都需要配置，避免证书验证文件导致失败，如下：

编辑 .gitconfig文件
vi ~/.gitconfig

[http]
        proxy = http://电脑A的地址:8888
[https]
        proxy = http://电脑A的地址:8888
        sslVerify = false

或者

git config --global http.proxy http://电脑A的地址:8888
git config --global https.proxy http://电脑A的地址:8888
git config --global https.sslVerify "false"

至此，Bower的基本应用就介绍完毕。