当前位置:   article > 正文

浅谈Web前端开发软件包管理器—Bower的基本使用_fastadmin bower 怎么用

fastadmin bower 怎么用

前言

Bower 是一个客户端的软件包管理器,它可用于搜索、安装和卸载如 JavaScript、HTML、CSS 之类的网络资源,Bower 是 Web 开发中的一个前端文件包管理器,类似于 Node 模块的 npm 包管理器,bower 依赖于 Git、Node 和 npm。 

安装 Bower

全局安装

使用 npm 安装 Bower。(Bower 依赖于 Node, npm 和 Git。)

$ npm install -g bower

Bower 初始化

命令行进入项目目录中,输入命令如下:bower init

会提示输入一些基本信息,根据提示按回车即可,通过问答向导的方式在当前目录生成一个bower.json文件,用来保存该项目的配置。

基本用法

安装程序包

程序包安装命令 bower install,默认安装目录 bower_components/

$ bower install <package>

package 可能是 GitHub Shorthand,或者是 Git 仓库地址,或者 URL。

  1. # registered package
  2. $ bower install jquery
  3. # GitHub shorthand
  4. $ bower install desandro/masonry
  5. # Git endpoint
  6. $ bower install git://githu.com/user/package.git
  7. # URL
  8. $ bower install http://example.com/script.js

更改默认安装目录

要更改默认安装目录,可在工作目录根路径下创建 .bowerrc,添加以下内容:

  1. {
  2. "directory": "my_components"
  3. }

关于 bower.json

Bower 使用 bower.json 作为程序包清单。(早期版本使用 component.json 作为清单文件)。

你可以使用 $ bower init 命令来创建 bower.json 文件,以下是 bower.json 示例:

  1. {
  2. name: 'hello-world',
  3. version: '0.1.0',
  4. authors: [
  5. 'Yin Zhenhua <hendikoy@gmail.com>'
  6. ],
  7. description: 'the first package.',
  8. main: 'hello.js',
  9. keywords: [
  10. 'amd'
  11. ],
  12. license: 'MIT',
  13. ignore: [
  14. '**/.*',
  15. 'node_modules',
  16. 'bower_components',
  17. 'test',
  18. 'tests'
  19. ]
  20. }

name

必填 注册到 bower 仓库的名字。
* 名字必须具有唯一性。
* 命名采取 slug style,例如 unicorn-cake。
* 名字包含小写字母、数字、连字符或英文句号(后两者不能位于开始和结束位置)。
* 不能连续使用连字符和句号。
* 不能多于 50 个字符。

version

暂时没有使用,目前 bower 使用 Git tag 作为版本号。

description

程序包简略描述,最多不超过 140 个字符。

main

为程序包建立一个入口文件是很有必要的,每一类型文件只能有一个入口文件。入口文件包含模块的输入物和导入物。

图片和字体文件可以被 JS 或 Sass 文件使用,因此它们不能算作入口文件。

  1. * 使用含有模块输入物和输出物的文件作为入口文件。
  2. * 不要使用压缩后的文件。
  3. * 不要使用图片、字体、音频或视频文件作为入口文件。
  4. * 文件名不要包含版本号。
  5. * 不要使用 `js/*.js` 的这样用法。

dependencies

依赖包是一个键位包名,值为标识符或 URL 的哈希字典。

  1. * 键必须是有效名字。
  2. * 值必须是一个有效版本、Git URL 或 URL。
  3. * Git URL 必须在结尾处添加 # 符号,并附注 revision SHA,branch 或 tag。
  4. * 如果是 GitHub 项目,则使用 owner/package 这样的简写方式。
  5. * 本地调试时可以使用本地路径作为值。

devDependencies

调试依赖包和 dependencies 规则相同,但仅做本地开发时使用。

moduleType

在 main 中定义模块的类型。

  1. * `globals`:表示模块直接导入全局名字。
  2. * `amd`:符合 AMD 规范,例如 RequireJS,使用 `define()` 语法。
  3. * `node`:符合 node 和 CommonJS 规范,使用 `module.exports` 语法。
  4. * `es6`:符合 ECMAScript 6 模块规范,使用 `export``import` 语法。
  5. * `yui`:符合 YUI 模块规范,使用 `YUI.add()` 语法。

keywords

与 name 字段规则相同。

authors

作者名录。

homepage

主页。

repository

源文件所处仓库。

liscense

授权许可。

ignore

安装包的时候需要忽略的模块。

resolutions

如果两包发生冲突,则自动根据该字段解析依赖包。

private

如果设置为 true,则不能发布该包。这样做是为了避免意外发布。

维护依赖包

使用 bower install <package> --save 命令将 <package> 添加到 bower.json 的 dependencies 数组。

使用 bower install <package> --save-dev 命令将 <package> 添加到 bower.json 的 devDependencies 数组。

注册程序包

注册后的程序包可以使用 bower install <package> 命令进行安装。

  1. * 包名必须符合 bower.json 规范。
  2. * 项目根目录必须存在合法的 `bower.json` 文件。
  3. * 包必须使用 [semver](http://semver.org/) Git tag。
  4. * 你的包必须是公开的,其他人都可以访问到你的 Git 仓库,记住推送 Git tags。
  5. * 对于私有包,使用私有的 [Bower Registry](https://github.com/bower/registry)。

使用 bower register 命令注册包:

$ bower register <my-package-name> <git-endpoint>

例如:

$ bower register example git://github.com/user/example.git

Bower 注册现在还不支持身份验证。

Bower 不支持 GitHub 风格的命名(org/repo),但你可以使用 - 符号来命名相关联的包,例如 angular-

注销程序包

使用命令 bower unregister 注销你的代码包。你首先要使用 bower login 来验证 GitHub 身份,确保你是代码包的贡献者。

  1. bower login
  2. # enter username and password
  3. ? Username:
  4. ? Password:
  5. #unregister packages after successful login
  6. bower unregister <package>

你也可以手动请求注销代码包

API

cache

  1. $ bower cache clean
  2. $ bower cache clean <name> [<name> ...]
  3. $ bower cache clean <name>#<version> [<name>#<version> ..]

清理缓存的程序包。

  1. $ bower cache list
  2. $ bower cache list <name> [<name> ...]

显示缓存的程序包。

help

$ bower help <command>

home

  1. $ bower home
  2. $ bower home <package>
  3. $ bower home <package>#<version>

打开程序包主页。

info

  1. $ bower info <package>
  2. $ bower info <package> [<property>]
  3. $ bower info <package>#<version> [<property>]

显示程序包或某一个版本的程序包信息。

install

  1. $ bower install [<options>]
  2. $ bower install <endpoint> [<endpoint> ..] [<options>]

安装项目依赖包,或者指定的终端地址集。

终端有三种形式:

  1. * <package>
  2. * <package>#<version>
  3. * <name>=<package>#<version>

其中:

  1. * <package> 是 URL,物理路径或注册名。
  2. * <version> 是有效范围、commit、分支等。
  3. * <name> 本地配置的名称。

lookup

$ bower lookup <name>

查询程序包 URL。

prune

$ bower prune

卸载本地多余程序包。

register

$ bower register <name> <url>

注册程序包。

search

  1. $ bower search
  2. $ bower search <name>

查找程序包。

update

$ bower update <name> [<name> ..] [<options>]

根据 bower.json 内容安装最新的程序包。

update options

  1. * `-F`, `--force-latest`:强制安装最新版本(无论冲突与否)
  2. * `-p`, `--production`:不要安装项目的 devDependencies。

uninstall

$ bower uninstall <name> [<name> ..] [<options>]

从本地 bower_components 目录卸载程序包。

uninstall options

  1. * `-S`, `--save`:从 bower.json dependencies 中移除卸载的程序包。
  2. * `-D`, `--save-dev`:从 bower.json devDependencies 中移除卸载的程序包。

unregister

$ bower unregister <package>

卸载程序包。

官网:Bower — a package manager for the web

参考资料

Node.js 自动化工具 - Bower

相关资料

Node.js 自动化工具 - Gulp

Node.js 自动化工具 - YEOMAN

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/381752
推荐阅读
相关标签
  

闽ICP备14008679号