关键词：
1、bower: 专门为前端表现设计的程序包管理器，类似npm，主要用于前端优化。bower可以管理包含HTML，CSS，JavaScript，字体甚至是图像文件的组成部分。bower并没有做别的事 - 它仅仅安装你需要的包及其依赖的正确版本。
2、**依赖node环境，window用户必须安装git工具。安装和升级bower必须用npm。
3、npm 和bower 的最大区别，就是 npm 支持嵌套地依赖管理（），而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。
**npm与bower的区别。
1.npm不能共享多个包共同依赖的包，每个包都会下载自己依赖的包。bower对于共享包只会下载一次。
2. npm主要运用于npm.js项目的内部依赖包管理，安装的模块位于项目根目录下的node_modules文件夹内。而bower大部分情况下用于前端开发，对于CSS/JS/模板等内容进行依赖管理，依赖的下载目录结构可以自定义。
实际项目中，可以采用npm作用于后端；bower作用于前端的组合使用模式
4、bower提供清单文件bower.json跟踪程序包，便于查阅包的版本、依赖情况。bower提供api和编程api，可在git bash、cmd或js中对包进行安装、卸载、更新、删除、发布等操作。
5、bower提供的api
bower install jquery：安装jquery库。
bower cache clean：安装失败后，清除缓存
- cache:bower缓存管理
- help:显示Bower命令的帮助信息
- home:通过浏览器打开一个包的github发布页
- info:查看包的信息
- init:创建json文件
- install:安装包到项目
- link:在本地bower库建立一个项目链接
- list:列出项目已安装的包
- lookup:根据包名查询包的URL
- prune:删除项目无关的包
- register:注册一个包
- search:搜索包
- update:更新项目的包
- uninstall:删除项目的包
6、bower提供的程序api---提供了可以操作的bower. commands 对象。
var bower = require(‘bower‘);
bower.commands
.install([‘jquery‘], { save: true }, { /* custom config */ })
.on(‘end‘, function (installed) {
console.log(installed);
});
bower.commands
.search(‘jquery‘, {})
.on(‘end‘, function (results) {
console.log(results);
});
7、bower中配置文件.bowerrc
{
"directory" : "components",
"json" : "bower.json",
"endpoint" : "https://Bower.herokuapp.com",
"searchpath" : "",
"shorthand_resolver" : ""
}
- directory：存放库文件的子目录名。
- json：描述各个库的json文件名。
- endpoint：在线索引的网址，用来搜索各种库。
- searchpath：一个数组，储存备选的在线索引网址。如果某个库在endpoint中找不到，则继续搜索该属性指定的网址，通常用于放置某些不公开的库。
- shorthand_resolver：定义各个库名称简写形式。
8、handlebars包的使用。
html代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Handlebars demo</title>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="../javascript/myjs.js"></script>
<style type="text/css"></style>
</head>
<body>
<h2>Simple handlebars demo</h2>
<button id="btn_simple">Click me</button>
<div id="my_div">
</div>
<h2>Handlebars Helpers demo</h2>
<button id="btn_helper">Click me</button>
<div id="helper_div">
</div>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<tr>
<th>Username</th>
<th>Real Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{{#if users}}
<tr>
<td>{{username}}</td>
<td>{{firstName}} {{lastName}}</td>
<td>{{email}}</td>
</tr>
{{else}}
<tr>
<td colspan="3">NO users!</td>
</tr>
{{/if}}
</tbody>
</table>
</script>
<script id="helper-template" type="text/x-handlebars-template">
<div>
<h1>By {{fullName author}}</h1>
<div>{{body}}</div>
<h1>Comments</h1>
{{#each comments}}
<h2>By {{fullName author}}</h2>
<div>{{body}}</div>
{{/each}}
</div>
</script>
</body>
</html>
js代码：
$(document).ready(function () {
Handlebars.registerHelper(‘fullName‘, function (person) {
return person.firstName + " " + person.lastName;
});
$("#btn_simple").click(function () {
// $(this).hide();
showTemplate();
});
$("#btn_helper").click(function () {
showHowUseHelper();
});
});
// var context = {title: "My New Post", body: "This is my first post!"};
var persion = { title: "My New Post", body: "This is my first post!" }
function showTemplate() {
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
users: [
{ username: "alan", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
{ username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" },
{ username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
]
};
$("#my_div").html(template(data));;
}
function showHowUseHelper() {
var context = {
author: { firstName: "Alan", lastName: "Johnson" },
body: "I Love Handlebars",
comments: [{
author: { firstName: "Yehuda", lastName: "Katz" },
body: "Me too!"
}]
};
var source = $("#helper-template").html();
var template = Handlebars.compile(source);
$("#helper_div").html(template(context));;
}
NPM/Bower/Composer - 区别？
...给我解释一下NPM、Bower和Composer之间的区别。他们都是包管理器-对吗？但是什么时候应该使用每一个呢？另外，每个似乎都有一个随附的json文件，这是否存储了您需要的所有包，以便可以通过cmd行安装它们？为什么需要这个文件... 查看详情
mac安装bower
...bower，得首先安装node： 1brewinstallnpm //npm是nodejs的程序包管理器，如果安装过nodejs，可忽略此步。2、安装Git（因为需要从Git仓库获取一些代码包）：1sudobrewinstallgit //也可以安装Git客户端版本3、安装bower：1sudonpminstall-gb... 查看详情
mac安装bower
...安装bower，得首先安装node： brewinstallnpm//npm是nodejs的程序包管理器，如果安装过nodejs，可忽略此步。2、安装Git（因为需要从Git仓库获取一些代码包）：sudobrewinstallgit//也可以安装Git客户端版本3、安装bower：sudonpminstall-gbower//-g... 查看详情
bower
什么是bower1.Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt，这个会在以后的文章中介绍。2.Bower是Web开发中的一... 查看详情
bower快速学习
什么是bower？Bower是一个前端类库管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的类库。官网：https://bower.io/安装bower使用npm，打开终端，输入：npminstall-gbower开始使用搜索包bowersearch 包名查看包的信息bowerinfo包... 查看详情
[yarn]yarn和npm的对比
...使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。Yarn是Facebook,Google,Exponent和Tilde开发的一款新的JavaSc 查看详情
javascript资源大全中文版
...网jspm：流畅的浏览器包管理器。官网Ender：没有库文件的程序库。官网volo 查看详情
NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]
...00【问题描述】：我正在尝试总结我对最流行的JavaScript包管理器、捆绑器和任务运行器的了解。如果我错了，请纠正我：npm&bower是包管理器 查看详情
windows环境下的nodejs+npm+bower安装配置
npm作为一个NodeJS的模块管理，之前我由于没有系统地看资料所以导致安装配置模块的时候走了一大段弯路，所以现在很有必要列出来记录下。我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹... 查看详情
nodejsyarn替代npm的包管理——快速安全可靠性高的依赖管理
Yarn能帮你解决的五件事转自： http://www.qingpingshan.com/jb/javascript/185590.html 长话短说（TL;DR）：在JavaScript领域有多个包管理器，举几个来说： npm ， bower ， component 和 volo 。截至写本文，最 查看详情
JavaScript 依赖管理：npm vs. bower vs.volo [关闭]
】JavaScript依赖管理：npmvs.bowervs.volo[关闭]【英文标题】：JavaScriptdependencymanagement:npmvs.bowervs.volo[closed]【发布时间】：2013-02-1202:16:07【问题描述】：你如何比较npm、bower和volo？这三个都可用于为UI项目安装JavaScript依赖项。我知道npm... 查看详情
JavaScript 依赖管理：npm vs. bower vs.volo [关闭]
】JavaScript依赖管理：npmvs.bowervs.volo[关闭]【英文标题】：JavaScriptdependencymanagement:npmvs.bowervs.volo[closed]【发布时间】：2013-02-1202:16:07【问题描述】：你如何比较npm、bower和volo？这三个都可用于为UI项目安装JavaScript依赖项。我知道npm... 查看详情
npm安装及简单使用
参考技术A包管理器(PackageManager)npm最初它只是被称为NodePackageManager，用来作为Node.js的包管理器。但是随着其它构建工具(webpack、browserify)的发展，npm已经变成了"thepackagemanagerforJavaScript"，它用来安装、管理和分享JavaScript包，同时... 查看详情
包管理器：Bower vs jspm
】包管理器：Bowervsjspm【英文标题】：PackageManager:Bowervsjspm【发布时间】：2014-10-1412:35:54【问题描述】：Bower与jspm有何不同？Bower能否提供关于SystemJSuniversalmoduleloader的jspm功能？【问题讨论】：Youdon\'tneedbower.【参考方案1】：JSPM是... 查看详情
什么是bower
Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt，这个会在以后的文章中介绍。准备工作安装node环境:node.js安装Git... 查看详情
你如何卸载 Bower（包管理器）？
】你如何卸载Bower（包管理器）？【英文标题】：HowdoyouuninstallBower(thepackagemanager)?【发布时间】：2014-07-2602:10:14【问题描述】：如何卸载Bower？我的意思是包管理器，而不是包（我已经卸载）。【问题讨论】：npminstall-gbower这首先... 查看详情
如何在 Rails 中使用 npm 包？
...08-0419:21:44【问题描述】：我正在尝试在我的RubyonRails应用程序中使用Aceeditor，其中大部分视图由React组件组成。我正在使用react-railsgem，我根本没有使用助焊剂。我找到了这个react-ace包，但是我必须使用npm来安装它。我已经能够... 查看详情
npm模块管理(代码片段)
安装完成node后，基本上自带npm模块管理器我们需要一个第三方（别人写的）模块、插件、类库或者框架等，需要提前下载安装才可以使用百度搜索，找到下载地址，然后基于浏览器下载即可（资源比较混乱，不好搜索）也可以... 查看详情