模块化结构已经成为网站开发的主流。
制作网站的主要工作，不再是自己编写各种功能，而是如何将各种不同的模块组合在一起。
浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的http请求，拖慢显示速度，影响用户体验。
为了解决这个问题，前端的模块管理器（package management）应运而生。它可以轻松管理各种javascript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来所有的前端javascript项目，应该都会采用这种方式开发。
最早也是最有名的前端模块管理器，非requirejs莫属。它采用amd格式，异步加载各种模块。具体的用法，可以参考我写的教程。require.js的问题在于各种参数设置过于繁琐，不容易学习，很难完全掌握。而且，实际应用中，往往还需要在服务器端，将所有模块合并后，再统一加载，这多出了很多工作量。
今天，我介绍另外四种前端模块管理器：bower，browserify，component和duo。它们各自都有鲜明的特点，很好地弥补了require.js的缺陷，是前端开发的利器。
需要说明的是，这篇文章并不是这四种模块管理器的教程。我只是想用最简单的例子，说明它们是干什么用的，使得读者有一个大致的印象，知道某一种工作有特定的工具可以完成。详细的用法，还需要参考它们各自的文档。
　bower
bower的主要作用是，为模块的安装、升级和删除，提供一种统一的、可维护的管理模式。
首先，安装bower。
$ npm install -g bower
然后，使用bower install命令安装各种模块。下面是一些例子。
# 模块的名称$ bower install jquery# github用户名/项目名$ bower install jquery/jquery# git代码仓库地址$ bower install git://github.com/user/package.git# 模块网址$ bower install http://example.com/script.js
所谓安装，就是将该模块（以及其依赖的模块）下载到当前目录的bower_components子目录中。下载后，就可以直接插入网页。

browserify编译的时候，会将脚本所依赖的模块一起编译进去。这意味着，它可以将多个模块合并成一个文件。
　component
component是express框架的作者tj holowaychuk开发的模块管理器。它的基本思想，是将网页所需要的各种资源（脚本、样式表、图片、字体等）编译后，放到同一个目录中（默认是build目录）。
首先，安装component。
$ npm install -g component@1.0.0-rc5
上面代码之所以需要指定component的版本，是因为1.0版还没有正式发布。
然后，在项目根目录下，新建一个index.html。
getting started with component getting started with component woo!

上面代码中的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自动使用autoprefixer为css属性加上浏览器前缀。
目前，component似乎处于停止开发的状态，代码仓库已经将近半年没有变动过了，官方也推荐优先使用接下来介绍的duo。
　duo
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
编译后的文件可以直接插入网页。

duo不仅可以编译javascript，还可以编译css。
@import 'necolas/normalize.css';@import './layout/layout.css';body { color: teal; background: url('./background-image.jpg');}
编译时，duo自动将normalize.css和layout.css，与当前样式表合并成同一个文件。
$ duo index.css > build.css
编译后，插入网页即可。