前端模塊化實踐（工具篇）

相比與那些看上去很高明、很完善的玩具，我更喜歡那些簡單的、笨笨的工具，哪怕它們看上去須要更多時間去學習，由於我清楚，它們才能最終讓我更高效。

本文僅限於粗淺的介紹我在開發過程當中用到的一些工具，若是須要更進一步的研究，多花些時間去看看文檔這樣的笨功夫恐怕仍是免不了的。

使用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開發的複雜性致使咱們最終須要的工具確定遠遠不止這些。爲了能夠整體上節約時間，我我的更喜歡使用專一於作好某一方面的小工具，而不是妄想着藉助某種神器一勞永逸。

(完)