前端模块管理器简介

作者: 阮一峰

日期: 2014年9月14日

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

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

模块化结构

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

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

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

RequireJS

今天,我介绍另外四种前端模块管理器:BowerBrowserifyComponentDuo。它们各自都有鲜明的特点,很好地弥补了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 component@1.0.0-rc5

上面代码之所以需要指定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/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

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">

(完)

珠峰培训

stuQ

留言(29条)

seajs怎么样?

建议比较一下Duo和seajs的区别,看起来很相似。

这篇文章真得是非常应景!

作者是做编程工作的?

国内用seajs的还是挺多的

这也叫做前端集成开发环境。百度的FIS也是个很不错的工具,值得一用。

ReqiureJS不是前端模块管理器,是前端模块规范和加载器。只是Bower、Npm等才可以作为前端模块管理器,也可以管理支持RequireJS(AMD)的模块。

阮老师贴的广告质量都很高。

网页体积不会臃肿吗?Component不错,虽然已经是处于停止开发。

webpack

同样疑惑duo和seajs之间的区别和抉择,从github提交记录上看duo好像还比较稚嫩,14年才刚刚开始,相比而言seajs要成熟很多了,国内已经很多大型网站都已经用的比较多了

我不太明白,如果像bower一样插入

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

模块多了以后不一样要“产生大量的HTTP请求”吗?

你好,gulp和grunt算前端模块管理吗,如果不算有什么差异呢

前端模块管理能否提高网站性能?

引用dfas的发言:

我不太明白,如果像bower一样插入

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

模块多了以后不一样要“产生大量的HTTP请求”吗?

后续会有合并压缩的工作需要做的,grunt,gulp有很多任务就干这个的

网页体积不会臃肿吗?Component不错,虽然已经是处于停止开发。

企业级生产环境还是推荐前端集成解决工具例如Grunt、FIS

写的有点浅,期待更详细的介绍。

希望写一些更详细些 新手

期待能够做一个duo和seajs的对比

browserify能不能异步加载?

最终还是不如AMD

安装bower那一步有个错误
$ npm install g bower

-g 全局
我是新手,记得别人写这里都有-,不知道是不是可以省略。

建议出一期关于 Webpack 的指南,毕竟现在 Webpack 很火~

引用Loyalsoldier的发言:

建议出一期关于 Webpack 的指南,毕竟现在 Webpack 很火~

老师已经出了 https://github.com/ruanyf/webpack-demos

内容不错,刚好这几天也在学习前端自动化工具。

搜CSS 管理通过另外一个连接也指到这里来了,今天的第三次……

对于刚接触webpack + react的人来说 对ES6语法还不太熟悉 请教大概多久才能学好 请推荐资源 通俗易懂的教程 多谢

所谓"安装",就是将该模块(以及其依赖的模块)下载到当前目录的bower_components子目录中。下载后,就可以直接插入网页。

原来是这样!我以前一直在想到底为什么要“install”安装啊,我安装了别人没安装网页看不到怎么办。。哭。。谢谢老师

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接