扒一扒前端包管理器

很久没有写文章了，前端时间一直瞎忙，最近总算有空闲时间能够好好学习下了，今天和你们分享一下有关前端包管理器的东西，主要把工做中经常使用的bower与最近一直在研究的browserify、duo以及快过期的component进行了一下介绍与对比，都是干货，但愿你们勿喷。啦啦啦，话很少说，开始吧：

 

1、Bower

 

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模块化思想，把功能分散到各个模块中，让模块和模块之间存在联系，经过 Bower 来管理模块间的这种联系，其主要做用就是：为模块的安装、升级和删除，提供一种统一的、可维护的管理模式。

包管理工具通常有如下的功能：

· 注册机制：每一个包须要肯定一个惟一的 ID 使得搜索和下载的时候可以正确匹配，因此包管理工具须要维护注册信息，能够依赖其余平台。

· 文件存储：肯定文件存放的位置，下载的时候能够找到，固然这个地址在网络上是可访问的。

· 上传下载：这是工具的主要功能，能提升包使用的便利性。好比想用jquery 只须要 install 一下就能够了，不用处处找下载。上传并非必备的，根据文件存储的位置而定，但须要有必定的机制保障。

· 依赖分析：这也是包管理工具主要解决的问题之一，既然包之间是有联系的，那么下载的时候就须要处理他们之间的依赖。下载一个包的时候也须要下载依赖的包。

 

首先，安装Bower：

下面是bower经常使用的一些命令：

 

而后，使用bower install安装模块，下面是一些例子：

 Bower的安装实际上就是将须要的模块及模块的依赖下载到当前目录的bower_components子目录中，一般在安装时会自动生成bower_components目录，此外，还能够经过手动设置bower_components目录的存放路径，以下图所示，在工程中添加.bowerrc配置文件，内容以下：

下载后，就能够直接将文件插入网页。

bower update命令用于更新模块：

若是不给出模块名称，则更新全部模块。

bower uninstall 命令用于卸载模块：

注意，默认状况下，会连所依赖的模块一块儿卸载。好比，若是卸载jquery-ui，会连jquery一块儿卸载，除非还有别的模块依赖jquery。

 

2、Browserify

Browserify的出现可让Nodejs模块跑在浏览器中，用require()的语法格式来组织前端的代码，加载npm的模块。在浏览器中，调用browserify编译后的代码，一样写在<script>标签中。

用 Browserify 的操做，分为3个步骤。

1. 写node程序或者模块

2. 用Browserify 预编译成 bundle.js

3. 在HTML页面中加载bundle.js

Browserify 的发布页：http://browserify.org/ 

首先，安装Browserify:

 如下是browserify经常使用命令：

而后，写一个服务器端脚本即nodejs文件：

 脚本文件完成，如今能够用browserify来进行编译：

 “>”左边的是要编译的文件，右边是编译后的文件，文件的路径能够本身指定。Browserify编译的时候，会将脚本所依赖的模块一块儿编译进去。这意味着，它能够将多个模块合并成一个文件。

 编译完成后直接将文件插入页面，并在页面调用编译后的函数：

在浏览器中打开，查看效果：

 

 3、component

 

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

 首先，安装Component

 

经常使用命令：

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

 上面代码中的build.css和build.js，就是Component所要生成的目标文件。接着，在项目根目录下，新建一个component.json文件，做为项目的配置文件。

 上面代码中，指定JavaScript脚本和样式表的原始文件是multiply.js和index.css两个文件，而且样式表依赖normalize模块（不低于3.0.0版本，但不高于4.0版本）。这里须要注意，Component模块的格式是"github用户名/项目名"。

 最后，运行component build命令编译文件。

 

浏览器中查看效果:

 

在编译的时候，Component自动使用autoprefixer为CSS属性加上浏览器前缀。目前，Component彷佛处于中止开发的状态，代码仓库已经将近半年没有变更过了，官方也推荐优先使用接下来介绍的Duo。

 4、Duo

Duo是在Component的基础上开发的，语法和配置文件基本通用，而且借鉴了Browserify和Go语言的一些特色，至关地强大和好用。

 首先，安装Duo。

 而后，编写一个本地文件test-duo.js。

 上面代码加载了uid和fmt两个模块，采用Component的"github用户名/项目名"格式。

接着，编译最终的脚本文件。

 编译后的文件能够直接插入网页。

Duo不只能够编译JavaScript，还能够编译CSS。下面是style.css的内容

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

 

 编译后，插入网页便可。

 浏览器中查看效果：

 

（完）

PS:但愿广大读者朋友批评指证,如需转载请注明出处.