JavaScript依赖管理工具bower
来源:互联网 发布:ubuntu 查看32 64 编辑:程序博客网 时间:2024/06/09 21:02
js依赖管理工具bower
2014.9.4
和前面介绍的maven类似,只不过它是专门用来管理js包的,在我们开发应用的时候,大部分情况下一个应用里会使用很多js的包,比如一个项目里可能会用到jquery、dwr、d3等多个js包,有的时候可能版本还不一样,如果每次都是手工下载,然后放到本地项目中,是不是觉得很无趣?
bower就是来帮我们干这事的。
在安装bower之类请确保您已经安装了nodejs、npm管理工具及git。
安装bower:
npm install -g bower
安装完毕就可以使用bower了,很简单,如果需要使用到jquery时,在你的项目目录下,执行:
bower install jquery
执行完后,您将看到在你的项目目录下多出一个bower_components目录,如下所示:
bower_components/├── jquery│ ├── MIT-LICENSE.txt│ ├── bower.json│ ├── dist│ │ ├── jquery.js│ │ ├── jquery.min.js│ │ └── jquery.min.map│ └── src│ ├── ajax│ │ ├── jsonp.js│ │ ├── load.js│ │ ├── parseJSON.js│ │ ├── parseXML.js│ │ ├── script.js│ │ ├── var│ │ │ ├── nonce.js│ │ │ └── rquery.js│ │ └── xhr.js│ ├── ajax.js│ ├── attributes
好了,接下来在你要使用到jquery的地方通过下面的方法引入jquery。
<script src="bower_components/jquery/dist/jquery.js"></script>
当然这种引用方式是很“土”的,后面会给你介绍怎么样才不“土”。
我们还可以把js的包依赖定义在一个bower.json的配置文件中。
在项目目录下执行:
bower init
根据提示向导,输入项目名称、版本、作者、开源许可等信息后,你就看到系统会生成一个bower.json的配置文件 ,如下所示:
{ "name": "bowerp", "version": "0.1", "authors": [ "ChangjunZhao <zhaochj@126.com>" ], "description": "bower test", "main": "lib", "keywords": [ "df" ], "license": "MIT", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ]}
接下来再执行:
bower install jquery --save
再看bower.json:
{ "name": "bowerp", "version": "0.1", "authors": [ "ChangjunZhao <zhaochj@126.com>" ], "description": "bower test", "main": "lib", "keywords": [ "df" ], "license": "MIT", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "~2.1.1" }}
jquery的依赖信息被写入到了bower.json文件。
至此,你的项目再提交到版本管理工具时,bower_components这个目录里的东西就不需要再提交了,只需要把bower.json提交。别的开发个员拿到代码后,只需要在项目目录执行bower install
命令,这个项目所依赖的所有js就会自动下载。
怎么样? 方便吧?
关于bower的其它命令及使用方法,可以使用bower help
命令查看。建议大家不管学习什么东西,都从官方网站开始:http://bower.io/。这里就不多说了,自己动手吧!
cjzhaomacbook:testProject ChangjunZhao$ bower helpUsage: 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 lookup Look up a package URL by name prune Removes local extraneous packages register Register a package search Search for a package by name update Update a local package uninstall Remove a local package version Bump a package versionOptions: -f, --force Makes various commands more forceful -j, --json Output consumable JSON -l, --log-level 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 --version Output Bower version
- JavaScript依赖管理工具bower
- Js依赖关系管理工具Bower
- 安装第三方依赖管理工具bower
- javascript前端工具------Bower管理客户端依赖
- bower依赖
- Bower:客户端库管理工具
- Bower:客户端库管理工具
- Bower包管理工具基础
- 【web前端自动化工作环境配置】8. 依赖管理工具bower的基本用法
- bower的依赖管理
- bower管理包依赖
- web包管理工具bower简介
- bower--前端开发包管理工具
- bower管理依赖,软件包管理器
- bower 前端依赖包管理
- 学习Bower -- 前端开发包管理工具
- 前端开发入门:包管理工具bower
- 包管理工具之npm 和bower
- Java四大集合详解
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
- python--array
- python解析XML文件
- 网络编程【OSI/RM TCP/IP】【网络通信三要素】【UDP传输 & TCP传输】【DNS域名解析】
- JavaScript依赖管理工具bower
- 7种排序 C++实现
- 1、XML基础学习
- java 实现完全二叉树
- Java中的Random()函数
- 你知道吗?字体会让产品有不同的气质
- linux 查找错误的过程
- python mock 的一些小例子
- Android Log输出 log开关 日志打印器 LogUtil