网站首页 » 前端开发 » 前端工具 » Bower 前端依赖包管理器
上一篇:
下一篇:

Bower 前端依赖包管理器

前言

Bower 是一个软件包管理器(如JavaScript、HTML、CSS之类的网络资源),你可以在应用程序中用它来安装新的软件包,它可以让你很好地管理前端中各种依赖比如:jQuery、Boostrap、Angular、React 等。下面我们就来看看 Bower 这个好东西。

为什么是 Bower

在项目用使用 Bower 来管理依赖如以下几个好处:

  • 管理项目中所有依赖的版本号
  • 可以下载依赖源码
  • 让依赖关系处理起来变得前所未有的简单,可以帮你下载依赖的依赖(如你下载jquerui,bower 会自动把 jqueryui 的依赖库(jquery)一同下载下来)
  • 让依赖更新变得更加简单,只需要行一命令行就可以。

Bower 之旅

Bower 安装

通过 npm 来安装 Bower,打开 cmd 。输入如下命令行:

npm install -g bower

安装完这后,我们就可以通过 bower 来管理我们前端依赖了。

Bower 相关命令

命令如下
Usage:

    bower <command> [<args>] [<options>]
Commands:

    cache                   Manage bower cache
    help                    Display help information about Bower
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages - and possible updates
    login                   Authenticate with GitHub and store credentials
    lookup                  Look up a single package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for packages by name
    update                  Update a local package
    uninstall               Remove a local package
    unregister              Remove a package from the registry
    version                 Bump a package version
Options:

    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --loglevel          What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root
    -v, --version           Output Bower version
    --no-color              Disable colors
See 'bower help <command>' for more information on a specific command.

创建 bower.json

命令行
bower init

回车后把填写相关的信息就可以了,不必所有的都写,比如:

大致过程
D:\workspace\bower>bower init
? name bower_demo
? description bower_demo_descrition
? main file
? keywords
? authors yunkus.com
? license MIT
? 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 accidentally published to the registry? No

完了之后就会在 cmd 的当前目录里创建了一个bower.json 文件了,文件内容大概是:

代码如下
{
  "name": "bower_demo", // 项目名
  "description": "bower_demo_descrition", // 项目描述
  "main": "",
  "authors": [
    "yunkus.com" // 作者
  ],
  "license": "MIT", // 开源协议
  "homepage": "", // 个人主页
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

文件创建好后,接下来我们就来下载一个依赖库了,比如我们可以通过下面的代码来下载 jQuery 库文件,但很有可能会有如下提示:

提示
D:\workspace\bower>bower install jquery -save
bower                           ENOGIT git is not installed or not in the PATH

这是因为我们没有安装 git 。安装完 git 后,再次输入上面的命令行就可以下载安装 jQuery 了。命令执行完以后,你可以在目录下看到一个 bower_components 的文件夹,所有下载后的依赖都会保存到这里文件夹下,在项目中你可以像下面这样引入 jQuery :

<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>

如果你觉得下载的依赖目录下的文件太多,你也可以手动删除不需要的文件,只留下 dist 目录就可以。

但怎么看 bower_components 目录名怎么不顺眼,这里我们也可以指定下载文件的保存目录,比如 lib 文件夹中,那么你可以在项目的根目录下创建一个名为 .bowerrc 的文件,内容为:

输入标题
{
    “directory”:"lib"
}

但是在 window 系统中无是没有办法通过常规的方法创建一个名为.bowerrc 的文件的。不过你可以通过 cmd 的 rename 对文件进行重命名。在项目根目录下创建一个任意名字(window 系统允许即可,比如:abc.text)的文件。然后在 cmd 中输入如下命令行:

rename abc.txt .bowerrc

回车后,你就可以看到 a.txt 文件已经改成了.bowerrc 了。接下来你就可以通过编辑器添加代码了。

 

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/bower-usage/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END