簡易Express資源合并中間件http-concat打賞

相信很多前端童鞋都見過一些網站有如下url輸出js或者css

http://example.com/??script1.js,script2.js,build/script.js

http://example.com/??script1.js,script2.js,build/script.js?v=2016

http://example.com/??style1.css,style2.css,build/style.css

http://example.com/??style1.css,style2.css,build/style.css?v=2016

在以前,使用YUI、DOJO等企業前端庫的時候,往往會用到類似功能,最近使用express,搜了下似乎沒有類似中間件,索性自己寫一個,參數形式參考了阿里的nginx-http-concat(似乎目前大部分有此類功能的網站都是采用阿里的nginx模塊實現)。代碼如下:

var fs = require('fs');
var path = require('path');

var MIME = {
    '.css': 'text/css;charset=utf-8',
    '.js': 'application/javascript;charset=utf-8'
};

var httpConcat = function (options) {

    options = options || {};

    var opts = {
        //file base path
        base: options.base || '/public',
        //url path
        path: options.path || '/',
        //separator for url path & file path
        separator: options.separator || '??',
        //separator for file path
        fileSeparator: options.fileSeparator || ',',
        //setHeaders callback
        setHeaders: options.setHeaders
    };

    return function httpConcat(req, res, next) {
        if (req.url.indexOf(opts.path) === 0) {
            var patten = req.url.split(opts.separator);
            if (patten.length < 2) {
                next();
            } else {
                var pathArrayStr = patten[1].split('?')[0],
                    pathArray = validPath(opts.base, pathArrayStr ? pathArrayStr.split(opts.fileSeparator) : []);
                if (pathArray.length) {
                    res.setHeader('Content-Type', parseMIME(pathArray[0]));
                    if (opts.setHeaders) opts.setHeaders(res);
                    outputFiles(pathArray, res);
                } else {
                    res.status(404);
                    next();
                }
            }
        } else {
            next();
        }
    };
};

module.exports = httpConcat;

function parseMIME(filename) {
    return MIME[path.extname(filename)] || 'text/plain;charset=utf-8';
}

function validPath(base, pathArray) {
    var validPathArray = [], tmpPath;
    for (var i = 0; i < pathArray.length; i++) {
        tmpPath = base + '/' + pathArray[i];
        if (fs.existsSync(tmpPath))
            validPathArray.push(tmpPath);
    }
    return validPathArray;
}

function outputFiles(pathArray, writer) {
    (function next(i, len) {
        if (i < len) {
            var reader = fs.createReadStream(pathArray[i], {encoding: 'utf-8'});
            reader.pipe(writer, {end: false});
            reader.on('end', function () {
                next(i + 1, len);
            });
        } else {
            writer.end();
        }
    }(0, pathArray.length));
}

安裝

npm i http-concat --save

使用

var app = express();

app.use(httpConcat({

base: path.join(__dirname, 'public', 'static'),

path: '/'

}));

github地址:https://github.com/weizs/http-concat

npm地址:https://www.npmjs.com/package/http-concat

簡易Express資源合并中間件http-concat
文章《簡易Express資源合并中間件http-concat》二維碼
  • 微信打賞
  • 支付寶打賞

已有13條評論

  1. 跨境電商是什么

    非常不錯~~~~~

    2016-10-12 11:36 回復
  2. 飛利浦呼吸機

    對于小白來說,真的看不懂

    2016-10-08 09:18 回復
  3. 連衣裙

    看不懂!崇拜高手!

    2016-09-22 22:12 回復
  4. 工控資料窩

    非常實用的分享,不錯哦

    2016-09-19 11:09 回復
  5. 浙江經濟理事會

    看不懂,純支持!

    2016-09-18 09:42 回復
  6. 外貿電商培訓

    大力頂起。。。。

    2016-09-16 09:34 回復
  7. 博客大全網

    感謝分享

    2016-09-16 09:08 回復
  8. 盧松松博客

    感謝分享,祝博主中秋節快樂

    2016-09-15 13:50 回復
  9. 微商

    按文章里 描述的去 編寫 就可以了

    2016-09-14 15:07 回復
  10. 短線炒股技巧

    新手,準備著手這個。。。

    2016-09-04 05:48 回復
  11. 劉明野博客

    寫的很好,感謝分享

    2016-09-03 19:48 回復
  12. 卡卡

    哥們 找工作嗎 我們是一家互聯網公司做自研產品哦 有興趣加我扣扣1452519241

    2016-08-31 18:38 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖