前端模块管理器简介

标签： JavaScript | 发表时间：2014-09-14 10:13 | 作者：阮一峰
出处：http://www.ruanyifeng.com/blog/

模块化结构已经成为网站开发的主流。

制作网站的主要工作，不再是自己编写各种功能，而是如何将各种不同的模块组合在一起。

模块化结构

浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验。

为了解决这个问题，前端的模块管理器（package management）应运而生。它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来 所有的前端JavaScript项目，应该都会采用这种方式开发。

最早也是最有名的前端模块管理器，非 RequireJS莫属。它采用 AMD格式，异步加载各种模块。具体的用法，可以参考我写的 教程。Require.js的问题在于各种参数设置过于繁琐，不容易学习，很难完全掌握。而且，实际应用中，往往还需要在服务器端，将所有模块合并后，再统一加载，这多出了很多工作量。

RequireJS

今天，我介绍另外四种前端模块管理器： Bower， Browserify， Component和 Duo。它们各自都有鲜明的特点，很好地弥补了Require.js的缺陷，是前端开发的利器。

需要说明的是，这篇文章并不是这四种模块管理器的教程。我只是想用最简单的例子，说明它们是干什么用的，使得读者有一个大致的印象，知道某一种工作有特定的工具可以完成。详细的用法，还需要参考它们各自的文档。

Bower

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子目录中。下载后，就可以直接插入网页。

   
　　<script src="/bower_componets/jquery/dist/jquery.min.js">

bower update命令用于更新模块。

   
　　$ bower update jquery

如果不给出模块的名称，则更新所有模块。

bower uninstall命令用于卸载模块。

   
　　$ bower uninstall jquery

注意，默认情况下，会连所依赖的模块一起卸载。比如，如果卸载jquery-ui，会连jquery一起卸载，除非还有别的模块依赖jquery。

Browserify

Browserify

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编译的时候，会将脚本所依赖的模块一起编译进去。这意味着，它可以将多个模块合并成一个文件。

Component

Component

Component是Express框架的作者TJ Holowaychuk开发的模块管理器。它的基本思想，是将网页所需要的各种资源（脚本、样式表、图片、字体等）编译后，放到同一个目录中（默认是build目录）。

首先，安装Component。

   
　　$ npm install -g [email protected]

上面代码之所以需要指定Component的版本，是因为1.0版还没有正式发布。

然后，在项目根目录下，新建一个index.html。

   
　　<!DOCTYPE html>
　　<html>
　　  <head>
　　    <title>Getting Started with Component</title>
　　    <link rel="stylesheet" href="build/build.css">
　　  </head>
　　  <body>
　　    <h1>Getting Started with Component</h1>
　　    <p class="blink">Woo!</p>
 　　   <script src="build/build.js"></script>
　　  </body>
　　</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/[email protected] 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

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 {
　　  color: teal;
　　  background: url('./background-image.jpg');
　　}

编译时，Duo自动将normalize.css和layout.css，与当前样式表合并成同一个文件。

   
　　$ duo index.css > build.css

编译后，插入网页即可。

   
　　<link rel="stylesheet" href="build.css">

（完）

文档信息

相关 [前端 模块 管理] 推荐：

前端模块管理器简介

- - 阮一峰的网络日志
模块化结构已经成为网站开发的主流. 制作网站的主要工作，不再是自己编写各种功能，而是如何将各种不同的模块组合在一起. 浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签. 这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验.

模块化高扩展性的前端框架 KISSY

- - TaoBaoUED
模块化高扩展性的前端框架 KISSY. 注：本文为 2013 年 3 月程序员杂志同名文章的完整版. 伴随着淘宝的快速发展，诞生已三年多的 KISSY 也取得了巨大的成长. 目前应用于阿里集团的多个业务团队，特别是淘宝，天猫，一淘的绝大多数业务都采用了 KISSY， 满足了从前台的 web page 到后台的 web app 再到移动端应用（起步阶段）的广泛需求.

用In.js颗粒化管理、加载你的Javascript模块

- zhibin - 前端观察
近一年来，国内外都十分热衷于异步加载的研究，为了加快页面的载入速度，无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一. 国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器.

如何高效使用和管理Bitmap--图片缓存管理模块的设计与实现

- - CSDN博客移动开发推荐文章
传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229.         上周为360全景项目引入了图片缓存模块. 因为是在Android4.0平台以上运作，出于惯性，都会在设计之前查阅相关资料，尽量避免拿一些以前2.3平台积累的经验来进行类比处理.

浅谈大型组织中前端管理架构

- - 掘金 架构
前端，现代前端分工变得越来越细致，页面制作、JavaScript框架设计、组件插件、交互设计、工程化脚手架等，项目中前端的占比也越来越高，继而出现了BFF (Back-end for Front-end 服务于前端的后端)，这一切的助力离不开各大浏览器厂商的厮杀. 周末来跟大家分享大型组织中（前端工程师的人数开始超过15人）前端管理架构，主要涉及的是团队协作，如何让团队运作更加高效规范.

简述前端包管理工具机制和相关实践

- - IT瘾-dev
简述前端包管理工具机制和相关实践. 区别于 Python 的包管理工具 pip 的全局安装，npm 会安装依赖包到当前项目目录，使不同项目的依赖更成体系，这样做的好处是减轻了包作者的 API 兼容性压力；但是缺陷是如果两个项目依赖了一个相同的库，一般这个库会在这两个项目中各安装一次，即相同的依赖包会被多次安装.

干掉前端！3分钟纯 Java 注解搭个管理系统，我直接好家伙

- - 掘金后端本月最热
最近接触到个新项目，发现它用了一个比较有意思的框架，可以说实现了我刚入行时候的梦想，所以这里马不停蹄的和大家分享下. 在我刚开始工作接触的项目都还没做前后端分离，经常需要后端来维护页面，有时候觉得自己好像天生不适合干前端，你要是让我研究研究后端的技术，看个中间件源码啊，分析分析什么框架底层原理啊，这都问题不大，偶尔搞一下 JS也可以.

Nginx模块开发入门

- ripwu - 博客园-EricZhang&#39;s Technology Blog
Nginx是当前最流行的HTTP Server之一，根据W3Techs的统计，目前世界排名（根据Alexa）前100万的网站中，Nginx的占有率为6.8%. 与Apache相比，Nginx在高并发情况下具有巨大的性能优势. Nginx属于典型的微内核设计，其内核非常简洁和优雅，同时具有非常高的可扩展性.

nginx防hashdos模块释出

- - 五四陈科学院-坚信科学，分享技术
以下内容由 [五四陈科学院]提供. hashdos这个事，严格意义上不是各种语言的错了（不过perl的确处理得很好），但是用nginx来擦屁股要干净些. 借鉴tomcat的作法，实现了下面这个nginx-http-hashdos-module，通过设置hashdos（默认on）的开关和body_max_count(默认值1000)，对nginx后面的服务进行安全防护，相比对php或者java进行patch，这或许是最好的办法了.