先说下前后端模块管理的区别，后面会着重进行提到的这几个前端模块管理工具的比较和介绍。
npm属于node模块的管理器。而spm和bower是前端模块管理。这两者大的区别有两点：
NPM针对node模块，原生支持commonJS，而前端模块除非该管理器自己定了，否则规范是无法统一的。即便规定了commonJS，那么必定会有配套工具打包来实现实际的运转。处理依赖的方式不同。NPM针对的node模块，它的依赖是树状的。项目中用到的A,B,C三个模块，他们可以分别依赖不同版本的lodash，而互不影响。但是前端模块除非做了很好的模块隔离（如实现了commonJS，并能很好地进行打包，即便如此，前端环境的特殊性也无法忍受相同模块的不同版本并存。比如页面中引入两个版本的jQuery，代码数据传输X2），否则一般的依赖都是扁平的。
当然，确实有很多人仅仅将npm作为一个静态资源共享平台，用来发布和共享前端模块，但是这种做法不推荐，因为显然有更好的方案。
而spm和bower都是针对前端模块化共享而提供的解决方案，这里还有另一个比较有名的component ，TJ大神的作品。
下面详细介绍bower，component以及spm：
twitter推出包管理工具。其特点是对包结构没有强制规范，也因此bower本身并不提供一套构建工具，它充当的基本上是一个静态资源的共享平台。
bower本身不存储模块文件本身（NPM以及SPM则会将模块作者的文件打包保存在自己的服务器中），也不保存模块的版本信息。模块的发布者通过注册（register）的方式，将模块的可访问的公开的git地址记录在bower的数据库中。而所有的版本都是通过模块发布者自己控制代码库的tag来决定。
bower在安装流程基本上可以简单认为是将注册的git地址中的特定tag clone一份到你本地的bower_components 目录中。
看起来bower本身提供的功能，以及实现都比价简单，但是它确实使用最广的前端模块管理工具。它在github上的项目有1w+的star。之所以bower能这么流行，得益于它宽松的规范能很好地直接应用在很多已经存在的项目中，所有人都能通过简单地添加一个bower.json以及补充相关信息，不需要修改代码和目录结构，就马上开始使用注册发布自己的模块。
（好吧，发现官网打不开了，我可是翻墙了....）
TJ大神的项目，它比bower提供了更多规范和配套工具：
它使用commonJS规范它和bower一样，不储存模块代码，而是通过 github账号名/模块名 的方式作为一个模块的标识符，是的，这句话的意思就是它的模块都是在github上，进一步的意思是，你在github上新建一个public的仓库的过程就是发布一个新模块的过程，另外模块down到本地后，也会带上用户名作为文件夹。对于有强迫症的人来说，这个有点抓狂，虽然这样可以解决前端模块重名的问题（比如，slide，tooltip这类几乎每个合格的前端开发都自己早过一次轮子的组件，太常见了）它在配置文件中，罗列出必要的静态文件资源，因此在下载的过程中，是先抓去这个配置文件，然后再通过github的raw接口去抓取列出的文件。在传输效率上比bower的方式高效。且down下来的文件目录也会比较简洁。既然1提到了它使用commonJS，那么自然它也提供了配套的打包工具，打包工具包含的内容这里不细讲（要讲可以额外再列一个如“有哪些好的前端构建工具推荐？”这样的问题），主要有两个特点：
基于commonJS规范面向ES6（是的，你可以在componet中使用ES6的语法，而打包工具会帮你做好兼容，这也是component希望扮演的角色：&Component is currently a stopgap for ES6 modules and Web Components& )
作为的生态圈的包管理工具，围绕seajs而构建的，不仅包含模块的发布，传输共享，还包含一系列的构建工具。
为什么放到最后来讲，因为如果仔细看SPM3（注意是3）的功能，它基本上是对bower，compoent和npm以及其他一些有名的包管理工具优点的吸收。这里就说说我认为SPM3的优势：
SPM从3.X开始全面迎向CommonJS，逐步放弃CMD。CMD最有名的实现者是谁？SeaJS！是的，这里是想说，一方面对于CommonJS支持，能很好地扩大SPM的社区（比如Component的模块都能轻松地迁移过来），另一方面你会看到SPM3在打包上提供了
模式，不再依赖SeaJS和NPM的发布一样爽快的前端模块管理平台。上面提到的bower和component本身都是不托管用户的模块代码的，模块的使用就是通过开发者自己维护仓库和版本（打tag）。这样的问题在于，对于一个模块的实际版本是否稳定是难以保证的（我可以重复地去打相同的tag）而且代码掌握在别人手里稳定性难以保证（component使用github还是可靠，但是bower这种不限定git源的，就难说了）。在SPM中你可以使用如
$ spm publish
这样的方式发布代码了。提供了一套完善的构建流程和工具，包含：
打包调试测试集成文档生成
支付宝团队维护（支付宝自己在使用SPM，所以这个工具必定是经过实战考验的），中文文档。这些对于国内用户来说都是很重要的。
----------------- 总结 --------------------
优点：约束松散，使用简单--& 可用模块众多缺点：没有提供构建工具（当前应该能从社区中找到针对bower的构建工具），且直接在bower上安装模块稳定性难以保证（源的稳定性，以及国内网速的稳定性）。
不过如果是公司级别内部使用的话，结合公司本身的git仓库，并创建一个私有的bower server，并定制一套规范和打包工具，也是可行的。（好吧，这是我之前考虑过的在我厂内部实施的方案）
优点：基于commonJS，有比较完善的构建工具，面向ES6，且能解决命名冲突问题缺点：基于github，目录包含用户名...（我个人无法忍）
优点：托管模块代码，国内网络传输的稳定性（这个和bower以及component比起来就是很重要的优势），完善的构建流程，中文文档缺点：模块数量（目前是400多，和component以及bower的4位数比起来还是有差距）
本文已收录于以下专栏：
相关文章推荐
bower 的缺点比较明显，最大的问题就是缺乏统一的构建机制。但有意思的是 Google 的 Polymer 选择了 bower 作为包管理器，因为 Polymer 是建...
npmnpm属于node模块的管理器
npm针对node模块，原生支持commonJS，而前端模块除非该管理器自己定了，否则规范是无法统一的。即便规定了commonJS，那么必定会有配套工具打包来实...
学习前端自动化——首先从包管理器开始
bower的官网地址: http://bower.io/
Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。它擅长前端的包...
转载自：/blog/2aa4c7d3efb71cded12d.html
随着前端项目越来越复杂,随便引入几个第三方javascri...
包管理器Bower使用手册之一作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs一、Bower介绍Bower是一个适合Web应用的包管理器，它擅长前端的包管理...
前言：上篇 《Node.js简记》 安装Node.js并实现Helloworld 我们已经完成了node开发环境的安装配置，接下来我们先来了解一下node的一个重要的工具——包管理器npm。npm安装...
在 JavaScript 社区中，工程师们互相分享成千上万的代码，帮助我们节省大量编写基础组件、类库或框架的时间。每个代码包可能都依赖于其他代码，而代码间的依赖关系则由包管理器负责维护。目前最流行的 ...
npm常用命令
npm（node package manager），是node.js的一个包管理器，用于第三方模块的下载、安装和管理。
npm收录着庞大而丰富的第三方资源，截至目前为止已经收录了22010...
他的最新文章
讲师：汪剑
讲师：刘道宽
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)包管理器用哪个较好?bower or npm? - CNode技术社区
积分: 4130
大家给点意见啊:)
浏览器包可以用npm安装么?
bower 主要是浏览器端的包。
这两个不矛盾的存在。
bower东西好像不多,npm包括bower中所有包?
有很多前端的包好像 npm 没有
你用NPM也可用bower，没有说你用了npm就不能用。搞不清，你就一起用呗。
不是一回事儿吧,NPM是node的包管理器,bower是前端依赖的包管理器!
不过bower里能搜到的东西,在npm里好像都可以搜到呢,可以不用bower,全部用npm么?
看来还是不了解他们各自的作用
当我用过browserify之后
就运行了npm rm -g bower。。。
不是说bower没有npm好，一个就够了
这里也有很多讨论~
你好，想找人外包开发一个简单的静态网站，请问是否有朋友推荐？谢谢qq
你好，想找人外包开发一个简单的静态网站，请问是否有朋友推荐？谢谢qq
你好，想找人外包开发一个简单的静态网站，请问是否有朋友推荐？谢谢qq
bower不就是npm外面再包了一層嘛
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的Facilitate
阅读(8410)
& 目前比较流行的WEB开发的趋势是前后端分离。前端采用重量级的Javascript框架，比如Angular，Ember等，后端采用restful API的Web Service服务，通过JSON格式进行数据交互。
& 对于后端服务语言来说，不论是Ruby的rack，Java中的Maven或Gradle，或是Scala中的SBT，他们都能够提供编译运行、运行测试、打包部署、依赖管理等功能。再加上强大的插件系统，让它可以插拔式的使用很多强大的功能，像数据迁移工具(liquibase)，测试覆盖率插件以及一些代码样式检查的工具。
& 但是对于前段Javascript和CSS而言，很少有工具可以做到前面所述功能的集合。那么我们怎么样才能达到前面所说的说有功能呢？&&Grunt + Bower
& 号称自己是JavaScript世界的构建工具，它提供了强大的自动化功能。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻我们的劳动。Grunt同样拥有强大的插件系统，你所需要的大多数task都已经作为Grunt插件被开发了出来，并且每天都有更多的插件诞生。
& 但这还不够完美。
& 我们知道，在JavaScript开发当中，我们经常需要引入大量的开源工具。不可避免的会遇到不同版本之间的兼容性问题，例如Bootstrap所依赖的JQuery不是1.10，而是2.03。如果你正在做JS版本升级，那么我想你一定会到各个网站上把他们最新的包下载下来，然后小心翼翼的替换它的版本。但是这些功能在Gradle和其他后端的版本管理工具里已经不再是问题。的出现，完美的解决了这一难题。
&&在javascript的世界里，很多东西都是由社区提供的，所以每一种工具都相当独立。比如，工具都有着自己独立的配置文件，自己的命令行参数，有时候还需要有一些额外的插件把两个工具结合起来。所以下面将会有很多命令，我们需要一一了解。不过好在我们了解之后，下次就可以使用已经配置好的文件，通过几条命令将把有的东西都准备好，很方便。
第一步：安装nodejs
在Mac中，我们可以使用brew来安装。在其它系统下，请使用相应的工具或直接到官网下载。
brew install node
Nodejs可以让我们在服务器端使用javascript编程，它是很多js工具的基础。请确保它是最新的：
brew upgrade node
Npm是node官方提供的包依赖管理工具。我们下面使用的Grunt，Bower等，都是以插件形式下载安装的。当我们安装好nodejs后，&npm&就自动可用了。查看版本：
接下来新建一个目录grunt_bower，然后运行npm init，根据提示，最后会产生一个package.json如下：
"name": "grunt_bower",
"version": "1.0.0",
"description": "This is for grunt and bower",
"main": "index.js",
"repository": {
"type": "git",
"url": "/yeahyangliu/grunt_bower.git"
第二步：安装Grunt
你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo:
npm install -g grunt-cli
上述命令执行完后，grunt&命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。
在Grunt项目里一般需要在你的项目中添加两份文件：package.json&和&Gruntfile。其中package.json中里面已经包含了一些Grunt常用的插件，比如&grunt-contrib-jshint&等，我们可根据需要删减一些用不上的。那么现在我们的文件应该长成这样：
"name": "grunt_bower",
"version": "1.0.0",
"description": "This is for grunt and bower",
"main": "index.js",
"engines": {
"node": "&= 0.10.0"
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-qunit": "~0.5.2",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-uglify": "~0.5.0"
"repository": {
"type": "git",
"url": "/yeahyangliu/grunt_bower.git"
"author": "Yang Liu"
下面，我们需要一个gruntfile，gruntfile中定义了插件的功能，并且可以自定义一些任务来管理我们Javascript代码。通过执行下面命令生成一个gruntfile：
npm install grunt-init -g
git clone https:///gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile
接下来只需要把所有package.json中的插件通过npm装在本目录，我们就可以使用Grunt来帮我们运行，管理我们的Javascript代码了。
第三步：安装Bower
Bower跟npm在某种意义上相似，它是用来管理常用的js库的依赖的，比如jquery, underscore, angularjs等。同样我们可以通过npm安装它：
npm install bower -g
同样，Bower也有自己的配置文件bower.json
name: 'grunt_bower',
version: '0.0.0',
authors: [
'YANG Liu &yeah_&'
license: 'MIT',
'node_modules',
'bower_components',
接下来就是我们见证奇迹的时刻：
bower install angularjs --savebower insall jquery --save
我们就可以看到angular和JQuery已经被下载到本地。同时bower.json中多了两个依赖：
"dependencies": {
"angularjs": "~1.2.20",
"jquery": "~2.1.1"
而且，我们的目录里，两个版本的js文件也被下载到了本地。如果你觉得现在已经大功告成了，那么你就错了，bower只负责把依赖下载到本地的&bower_components&目录，并不负责把它们拷贝到我们项目中实际使用的地方，比如&public/js/lib&目录下。
为了实现这样的功能，我们还需要另一个插件的帮助：
npm install grunt-bower-task --save-dev
然后打开其，按照上面的提示进行配置。首先在&Gruntfile&中合适位置添加：
grunt.loadNpmTasks('grunt-bower-task');
然后在&grunt.initConfig({...})&参数中，添加相应的配置项，把bower下载的js库拷贝到&public/js/lib&下：
"bower": {
"install": {
"options": {
"targetDir": "./public/js/lib",
"layout": "byComponent",
"install": true,
"verbose": false,
"cleanTargetDir": false
最后我们只需要运行一行简单的命令，就可以讲grunt和bower完美结合起来：
grunt bower
有了这样两大利器，我们已经达到了从管理依赖，编译部署，压缩打包，运行测试的所有功能，并且非常清晰的配置，让项目上的人都拥有同一份配置，这种方式，大大的简化了团体的管理效率和维护成本，非常值得推崇！
再次感谢大家读到这里。
本文github地址:/yeahyangliu/grunt_bower.git
&原文链接:
阅读排行榜前端模块管理器简介 - 阮一峰的网络日志
前端模块管理器简介
模块化结构已经成为网站开发的主流。
制作网站的主要工作，不再是自己编写各种功能，而是如何将各种不同的模块组合在一起。
浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验。
为了解决这个问题，前端的模块管理器（package management）应运而生。它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来所有的前端JavaScript项目，应该都会采用这种方式开发。
最早也是最有名的前端模块管理器，非莫属。它采用，异步加载各种模块。具体的用法，可以参考我写的。Require.js的问题在于各种参数设置过于繁琐，不容易学习，很难完全掌握。而且，实际应用中，往往还需要在服务器端，将所有模块合并后，再统一加载，这多出了很多工作量。
今天，我介绍另外四种前端模块管理器：，，和。它们各自都有鲜明的特点，很好地弥补了Require.js的缺陷，是前端开发的利器。
需要说明的是，这篇文章并不是这四种模块管理器的教程。我只是想用最简单的例子，说明它们是干什么用的，使得读者有一个大致的印象，知道某一种工作有特定的工具可以完成。详细的用法，还需要参考它们各自的文档。
的主要作用是，为模块的安装、升级和删除，提供一种统一的、可维护的管理模式。
首先，安装Bower。
　　$ npm install -g bower
然后，使用bower install命令安装各种模块。下面是一些例子。
　　# 模块的名称
　　$ bower install jquery
　　# github用户名/项目名
　　$ bower install jquery/jquery
　　# git代码仓库地址
　　$ bower install git:///user/package.git
　　# 模块网址
　　$ bower install /script.js
所谓"安装"，就是将该模块（以及其依赖的模块）下载到当前目录的bower_components子目录中。下载后，就可以直接插入网页。
　　&script src="/bower_componets/jquery/dist/jquery.min.js"&
bower update命令用于更新模块。
　　$ bower update jquery
如果不给出模块的名称，则更新所有模块。
bower uninstall命令用于卸载模块。
　　$ bower uninstall jquery
注意，默认情况下，会连所依赖的模块一起卸载。比如，如果卸载jquery-ui，会连jquery一起卸载，除非还有别的模块依赖jquery。
Browserify
本身不是模块管理器，只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它，我们可以使用Node.js的npm模块管理器。所以，实际上，它等于间接为浏览器提供了npm的功能。
首先，安装Browserify。
　　$ npm install -g browserify
然后，编写一个服务器端脚本。
　　var uniq = require('uniq');
　　var nums = [ 5, 2, 1, 3, 2, 5, 4, 2, 0, 1 ];
　　console.log(uniq(nums));
上面代码中uniq模块是CommonJS格式，无法在浏览器中运行。这时，Browserify就登场了，将上面代码编译为浏览器脚本。
　　$ browserify robot.js > bundle.js
生成的bundle.js可以直接插入网页。
　　&script src="bundle.js"&&/script&
Browserify编译的时候，会将脚本所依赖的模块一起编译进去。这意味着，它可以将多个模块合并成一个文件。
是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想，是将网页所需要的各种资源（脚本、样式表、图片、字体等）编译后，放到同一个目录中（默认是build目录）。
首先，安装Component。
　　$ npm install -g component@1.0.0-rc5
上面代码之所以需要指定Component的版本，是因为1.0版还没有正式发布。
然后，在项目根目录下，新建一个index.html。
　　&!DOCTYPE html&
　　&html&
&title&Getting Started with Component&/title&
&link rel="stylesheet" href="build/build.css"&
&h1&Getting Started with Component&/h1&
&p class="blink"&Woo!&/p&
&script src="build/build.js"&&/script&
　　&/html&
上面代码中的build.css和build.js，就是Component所要生成的目标文件。
接着，在项目根目录下，新建一个component.json文件，作为项目的配置文件。
"name": "getting-started-with-component",
"dependencies": {
"necolas/normalize.css": "^3.0.0"
"scripts": ["index.js"],
"styles": ["index.css"]
上面代码中，指定JavaScript脚本和样式表的原始文件是index.js和index.css两个文件，并且样式表依赖normalize模块（不低于3.0.0版本，但不高于4.0版本）。这里需要注意，Component模块的格式是"github用户名/项目名"。
最后，运行component build命令编译文件。
　　$ component build
installed : necolas/normalize.css@3.0.1 in 267ms
build : resolved in 1221ms
build : files in 12ms
build : build/build.js in 76ms - 1kb
build : build/build.css in 80ms - 7kb
在编译的时候，Component自动使用为CSS属性加上浏览器前缀。
目前，Component似乎处于停止开发的状态，代码仓库已经将近半年没有变动过了，官方也推荐优先使用接下来介绍的Duo。
是在Component的基础上开发的，语法和配置文件基本通用，并且借鉴了Browserify和Go语言的一些特点，相当地强大和好用。
首先，安装Duo。
　　$ npm install -g duo
然后，编写一个本地文件index.js。
　　var uid = require('matthewmueller/uid');
　　var fmt = require('yields/fmt');
　　var msg = fmt('Your unique ID is %s!', uid());
　　window.alert(msg);
上面代码加载了uid和fmt两个模块，采用Component的"github用户名/项目名"格式。
接着，编译最终的脚本文件。
　　$ duo index.js > build.js
编译后的文件可以直接插入网页。
　　&script src="build.js"&&/script&
Duo不仅可以编译JavaScript，还可以编译CSS。
　　@import 'necolas/normalize.css';
　　@import './layout/layout.css';
　　body {
background: url('./background-image.jpg');
编译时，Duo自动将normalize.css和layout.css，与当前样式表合并成同一个文件。
　　$ duo index.css > build.css
编译后，插入网页即可。
　　&link rel="stylesheet" href="build.css"&
2017年6月，TC39 委员会正式发布了《ES2017 标准》。
Web 技术突飞猛进，但是有一个领域一直无法突破 ---- 游戏。
Node 主要用在开发 Web 应用。这决定了使用 Node，往往离不开 Web 应用框架。
一、什么是内存泄漏？
程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。}