前端模块化实践（工具篇）

相比与那些看上去很高明、很完善的玩具，我更喜欢那些简单的、笨笨的工具，哪怕它们看上去须要更多时间去学习，由于我清楚，它们才能最终让我更高效。

本文仅限于粗浅的介绍我在开发过程当中用到的一些工具，若是须要更进一步的研究，多花些时间去看看文档这样的笨功夫恐怕仍是免不了的。

使用nodejs搭建web服务

先后端的分离是必然的，若是你须要一个后端的接口，可是此时接口还没实现你该怎么办呢? 使用node能够很是简便的开启web服务，如下咱们以使用connect为例搭建一个动态web服务，它将返回json格式的请求url。

• 安装好nodejs后新建任意目录而后进入；
• 运行命令npm install connect
• 新建文件app.js，加入如下一段代码：

var connect = require('connect');
var http = require('http');

var app = connect();
var server = http.createServer(app);
//输出请求信息的日志
app.use(connect.logger('dev'))
    .use(function(req, res, next) {
        res.setHeader('Content-type', 'application/json');
        res.end(JSON.stringify({
            url: req.url
        }));
    })

server.listen(3000);

• 运行node app.js，浏览器访问http://localhost:3000便可。

代码检测与调试

我使用jshint来检测基本的语法错误，每次保存文件时vim都会调用它进行语法检测，错误会被直接标示在左侧标示栏，简单并且直接。以前使用webstorm发现它只能使用自带的且定制功能很是少的jshint，结果一屏幕的红黄线，极其让人不舒服，而sublime的jshint插件每次都会在下面弹出一个新窗口，这种打断用户的体验实在很影响效率。

jshint还能够支持自定义reporter，你能够在reporter里面过滤不须要的警告，显示你最关注的具体错误信息，或者改变结果的输出流，一个简单的例子以下：

'use strict';

module.exports = {
 reporter: function (res) {
   var len = res.length;
   var str = '';
   var codes = [ 'I003', 'W098', 'W033', 'W106', 'W015', 'W014', 'W116', 'W109', 'W064',
                 'I001', 'W079', 'W103', 'W069', 'W068', 'W003', 'W083' ];

   res.forEach(function (r) {
     var file = r.file;
     var err = r.error;
     var code = err.code;
     if (codes.indexOf(code) !== -1) {
       return;
     }

     str += code + ' ' + file + ': line ' + err.line + ', col ' +
       err.character + ', ' + err.reason + '\n';
   });

   if (str) {
     process.stdout.write(str + '\n' + len + ' error' +
       ((len === 1) ? '' : 's') + '\n');
   }
 }
};

咱们的代码老是被合并到一个文件后加载到页面上的，借助Source Map功能能够快速的在源码中进行调试。使用Source Map在component中很是简单，只须要在component build命令后加入--dev参数便可。

脚本

使用git自带的post-receive脚本能够帮咱们一键搞定代码检查、打包、压缩等等繁琐的部署工做，一个使用component的例子以下：

#! /bin/bash

base=/home/chemzqm/blog

# 导出master到项目路径
git archive master | tar -x -C ${base}
cd ${base}
# 安装node包
npm install
cd public

stamp=`date +%s`
# 替换页面上的为压缩文件名称并加入时间戳
sed -i "s/build.js/build.min.js?d=${stamp}/" index.html
sed -i "s/build.css/build.min.css?d=${stamp}/" index.html

sed -i 's/\s*--dev//' Makefile
# 编译component
component build
# 压缩
uglifyjs build/build.js > build/build.min.js
cssmin build/build.css > build/build.min.css

# 调用blog脚本重启服务
/home/chemzqm/blog restart

echo 'done'

component结合Makefile能够很是方便并且灵活的完成平常构建任务，Makefile主要优势以下：

• 简短，不用去维护大段大段的构建脚本
• 足够灵活，能够直接使用shell脚本
• 时间戳检测，当源文件时间戳早于目标文件时，任务不会被重复执行，能够结合watch工具实现灵活的自动构建。

web接口调试

随着Saas、laas之类的概念大行其道，前端也从传统的接受后端html页面输出变成了调用各类Rest接口。这种开发方式的优点很明显，一方面Rest接口作为后端能够独立的服务各类前端的应用（再也不须要考虑你是那种屏幕，或是须要整合成什么格式），另外一方面先后端能够更容易的独立并行开发。

我使用supertest进行Rest接口测试，最大好处是我能够直接把superagent写好的代码直接复制过去使用，由于它们的接口几乎彻底同样。

Postman作为一款Chrome的插件可让咱们快速的查看和使用Rest接口，它支持url参数设定、环境变量和分组，相比与同类Dev HTTP Client功能更加完备。

其它

• node-dev 监测文件变化并自动重启服务，开发nodejs必备。
• liveload 监测文件变化并自动刷新浏览器，在开发手机app或者电视app这种不便于重加载的条件下颇有帮助。
• watch 重复执行一项任务，能够结合Makefile完成任意自动化编译。
• autoprefixer 能够从Can I use上面获取浏览器兼容信息，并根据你给出的策略（默认常规浏览器最新的两个版本）自动补全css前缀。

以上只是一些我经常使用到的工具，web开发的复杂性致使咱们最终须要的工具确定远远不止这些。为了能够整体上节约时间，我我的更喜欢使用专一于作好某一方面的小工具，而不是妄想着借助某种神器一劳永逸。

(完)