Node.js自学之路——2.前端管理

序——

《Node.js自学之路》系列文章，将记录我学习基于Node.js进行Web开发的过程。

Node.js是基于V8引擎运行的开发平台，执行JavaScript速度快、性能好；也因其以JavaScript作为开发语言，对于前端工程师而言，它的学习曲线更低、开发效率更高。

文章目录：

Node.js自学之路——1.环境搭建

Node.js自学之路——2.前端管理

一、Bower——前端类库管理

1.为什么使用bower

前端需要使用大量的类库，常用的就有：用来解决IE功能性Bug的HTML5 Shiv、ExplorerCanvas、Respond；JavaScript类库jQuery、Underscore.js；UI框架Bootstrap；其他完成特定功能的类库更是数不胜数。

当然这些类库都可以在Github找到，但在实际项目开发中进行手动下载是效率很低的、且不利于版本的更新；这时就需要使用bower高效地进行前端类库管理。

2.安装bower

npm install -g bower

检测版本

bower -v

3.创建配置文件

为了便于管理类库，需要创建配置文件；在项目文件夹下，使用以下命令，引导创建bower.json文件

bower init

默认情况下，bower下载类库时会自动创建bower_components文件夹并将类库放在其中，可以通过创建.bowerrc文件设置指定路径

{"directory" : "public/libs"}

注意：Win7环境下，创建文件必须指定名称，所以创建  .bowerrc  文件时需要借助编辑器

4.下载类库

当在bower的search界面搜索到需要的类库时，说明该类库已经被bower所收录，可以直接下载

bower install --save LIB_NAME

--save用于将该类库的信息写入bower.json文件

打开bower.json后就可以看到已经安装的类库，比如当安装了jquery和bootstrap后：

所以，更直接的方式是先在bower.json文件中写入要安装类库的信息，使用以下命令直接检测进行全部安装

bower install

若bower没有收录，则找到该类库的github页，在右侧找到clone地址，将LIB_NAME名替换成该地址，并将开头的http改为git

bower install --save git://...

注意：以上的操作必须在安装了Git的前提下进行

5.移除类库

bower uninstall --save LIB_NAME

当然可以直接进入public/libs中删除文件夹，并在bower.json中删除类库信息

二、RequireJS——JS文件引用管理

1.为什么使用require.js

上面说到前端需要大量的类库，而JS类库更是占了大部分，在使用JS类库时，存在很多的依赖关系，比如jquery.cookie是基于jquery开发的、backbone是基于underscore的等等，这些依赖关系需要手动进行引用的顺序管理；另一方面，在不同的页面上，对于JS的引用需求也是不同的，如果希望做到按需加载，那么就要使用require.js这样的类库，它实现了异步加载、避免阻塞、提高了页面性能。

2.下载require.js

bower install --save requirejs

3.使用require.js

在views/index.jade中添加：

script(type="text/javascript", src="/libs/requirejs/require.js", data-main="/js/index")

注意：jade的语法与html有较大差异，且对缩进的要求严格

　　　在使用require.js后，引用其它JS文件是不需要再加.js后缀的，所以data-main="/js/index"中index而非index.js

4.创建配置文件

在public/js下创建config.js文件，用于配置JS类库路径及依赖关系，以jquery和bootstrap为例

require.config({
    baseUrl: ‘/libs‘,
    paths: {
          jquery: ‘jquery/dist/jquery‘,
          bootstrap: ‘bootstrap/dist/js/bootstrap‘                 
    }, 
    shim: {
          bootstrap: [‘jquery‘]
    }  
});

注意：paths中的JS文件仍是不用加.js后缀的

　　   shim中指定了在引入bootstrap.js文件前必须引入jquery.js，因为前者是依赖于后者的

5.在JS文件中按需引用

在public/js文件夹下创建index.js文件

require([‘./config‘], function(config) {
    require([‘bootstrap‘], function() {
        //do something
    });
});

虽然，只引入了bootstrap.js文件，但因为在config.js文件中做了配置，会在bootstrap.js文件前引入jquery.js文件

可以打开浏览器的调试面板，查看

#########################################

Node.js正在快速发展中，软件包升级很快，文章有运行不通的地方请参考官方文档解决。我也会不定期更新文章，尽量保持文章代码的可用性。

#########################################

作者：@zhnoah
出处：http://www.cnblogs.com/zhnoah/
本文版权归本人和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连 
接，否则保留追究法律责任的权利。