基於Node的Axure文件在線預覽

前言

公司如今的產品Axure文檔在生成好Html文件以後，都是經過git來進行管理的，每次文件更新，你們都須要從git上進行拉取，而後在本地查看，更新會出現不及時的問題，你們有時候忘記git拉取致使出現實現效果與最終產品稿不一致。最近在看Koa的東西，所以經過git hooks 搭配Koa來實現了一個在線預覽，實現上大概是根據訪問路徑查找指定目錄，而後對目錄進行遍歷，而後根據目錄和文件類型的區分返回相應的數據。

實現

作的過程當中須要注意的點，

• 對於在Git服務端的文件是在.Git文件夾下的，所以咱們沒法獲得其文件目錄，實現的方式是經過git clone的方式將其clone下來，而後經過git hook的方式，當有push操做以後，則執行git pull來將文件拉取到本地，經過這種方式來將作到文件的實時更新。
• 文件的返回，對於圖片文件的讀取方式要經過二進制的方式，對於其它的文件，如css，js之類要經過

Utf-8的方式，開始統一經過binary的方式讀取，而後返回致使圖片能夠顯示，可是js執行報錯。

實現代碼以下

const Koa = require('koa');
const path = require('path');
const fs = require('fs');
let mimes = {
    'css': 'text/css',
    'html': 'text/html',
    'jpg': 'image/jpeg',
    'jpeg': 'image/jpeg',
    'json': 'application/json',
    'js': 'text/javascript',
    'xml': 'text/xml',
    'png': 'image/png',
    'pdf': 'application/pdf',
    'less': 'text/css',
    'gif': 'image/gif',
    'txt': 'text/plain',
    'tiff': 'image/tiff',
    'svg': 'image/svg+xml'
};
// Scan dir
function walk(reqPath) {
    let files = fs.readdirSync(reqPath);
    let fileList = [];
    for (let i = 0, len = files.length; i< len; i++) {
        let item = files[i];
        if (item.startsWith('.')) {
            continue;
        }
        let realPath = reqPath + '/' + files[i];
        if (isDir(realPath)) {
            fileList.push(filter(reqPath, files[i]));
        } else {
            fileList.push(files[i]);
        }
    }
    return fileList;
}

function isDir(path){  
    return fs.existsSync(path) && fs.statSync(path).isDirectory();  
}  
//
function filter(reqPath, filePath) {
    let files = fs.readdirSync(reqPath + '/' + filePath);
    for (let i = 0; i < files.length; i++) {
        let item = files[i];
        if (item.endsWith('index.html')) {
            return filePath + '/' + 'index.html';
        }
    }
    return filePath;
}

function dir(url, reqPath) {
    let contentList = walk(reqPath);
    let result = '<div align="center" style="font-family:arial;font-size:30px;">Product Document</div><ul>';
    if (url == '/') {
        url = '';
    }
    for (let [index, item] of contentList.entries()) {
        let realHref = url + '/' + item;
        let realItem = item.split('/');
        result += '<li> <a style="font-family:arial;font-size:20px;" href=' + realHref + '>' + realItem[0] + '</a></li>';
    }
    result = result + '</ul>';
    return result;
}

async function file (url, filePath) {
    let resultMime = parseMime(url);
    let content;
    if (resultMime && resultMime.indexOf('image/') >= 0) {
        content = fs.readFileSync(filePath, 'binary');
    } else {
        content = fs.readFileSync(filePath, 'utf8');
    }
    return content;
}

async function content(ctx, fullStaticPath) {
    let url = decodeURI(ctx.url);
    let reqPath = path.join(fullStaticPath, url);
    let exist = fs.existsSync(reqPath);
    let content = '';
    if (!exist) {
        content = 'Local file not exists';
    } else {
        let stat = fs.statSync(reqPath);
        if (stat.isDirectory()) {
            content = dir(ctx.url, reqPath);
        } else {
            content = await file(ctx.url, reqPath);
        }
    }
    return content;
}

function parseMime(url) {
    let extName = path.extname(url);
    extName = extName ? extName.slice(1) : 'unknown';
    return mimes[extName];
}
const app = new Koa();
const staticPath = '../onlinedoc';`請輸入代碼`
app.use(async(ctx) => {
    let fullStaticPath = path.join(__dirname, staticPath);
    let resultContent = await content(ctx, fullStaticPath);
    let resultMime = parseMime(ctx.url);
    if (resultMime) {
        ctx.type = resultMime;
    } 
    if(resultMime && resultMime.indexOf('image/') >= 0) {
        ctx.res.writeHead(200);
        ctx.res.write(resultContent, 'binary');
        ctx.res.end();
    } else {
        ctx.body = resultContent;
    }
});
app.listen(8080, () => {
    console.log('Running');
});