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

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

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

使用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开发的复杂性导致我们最终需要的工具肯定远远不止这些。为了可以总体上节约时间，我个人更喜欢使用专注于做好某一方面的小工具，而不是妄想着借助某种神器一劳永逸。

(完)