[转载]前端模块管理器简介

时间 2019-11-17

标签转载前端模块管理器简介繁體版

原文原文链接

http://www.ruanyifeng.com/blog/2014/09/package-management.htmljavascript

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

制做网站的主要工做，再也不是本身编写各类功能，而是如何将各类不一样的模块组合在一块儿。html

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

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

最先也是最有名的前端模块管理器，非RequireJS莫属。它采用AMD格式，异步加载各类模块。具体的用法，能够参考我写的教程。Require.js的问题在于各类参数设置过于繁琐，不容易学习，很难彻底掌握。并且，实际应用中，每每还须要在服务器端，将全部模块合并后，再统一加载，这多出了不少工做量。jquery

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

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

Bower

Bower的主要做用是，为模块的安装、升级和删除，提供一种统一的、可维护的管理模式。npm

首先，安装Bower。json

　　$ 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自己不是模块管理器，只是让服务器端的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是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是在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">

（完）