koa中靜態文件資源中間件實現

項目實踐過程中，會使用非常多的靜態資源，怎樣可以直接在瀏覽器中訪問到這些靜態資源

• • const fs = require('fs');
    const path = require('path');
    
    module.exports = (dirpath = "./public") => {
        return async (ctx, next) => {
            if (ctx.url.indexOf("/public") === 0) {
                //public 開頭 讀取文件
                const url = path.resolve(__dirname, dirpath);
                // path.basename(p, [ext])
                // 提取出用‘/’隔開的path的最後一部分，ext是過濾字元
                // path.basename('/foo/bar/baz/asdf/quux.html', '.html') 
                // returns 
                // 'quux'
                const fileBaseName = path.basename(url); // public
                const filepath = url + ctx.url.replace("/public", "");   //得到文件目錄
                console.log(filepath);
              
                try {
                    //判斷是否是一個文件夾
                    stats = fs.statSync(filepath);
                    if (stats.isDirectory()) {
                        const dir = fs.readdirSync(filepath);
                        console.log(dir);  // [ 'index.html', 'style.css' ]
                        
                        const ret = ['<div style="padding-left">'];
                        dir.forEach(filename => {
                            console.log(filename);
                            //不帶小數點的格式，就是文件夾
                            if (filename.indexOf(".") > -1) {
                                ret.push(
                                    `<p><a style="color:black" href="${ctx.url}/${filename}">${filename}</a></p>`)
                            } else {
                                //文件
                                ret.push(`<p><a href="${ctx.url}/${filename}">${filename}</a></p>`)
                            }
    
                        });
                        ret.push("</div>")
                        ctx.body = ret.join("");
                    } else {
    　　　　             //訪問到的是一個文件，則直接讀取內容
                        console.log('文件');
                        const content = fs.readFileSync(filepath);
                        ctx.body = content;
                    }
    
                } catch (error) {
                    ctx.body = "404 ,not found";
                    console.log(error);
                    
                }
            } else {
                //否則不是靜態資源，直接去下一個中間件
                await next();
            }
        }
    }

    同時在我們的app文件中添加中間件的引用

  • const static = require('./static');
    app.use(static('./public'));

    便可以在瀏覽器中使用public目錄來訪問文件了

    • 參考文檔https://www.gregjs.com/javascript/2016/checking-whether-a-file-directory-exists-without-using-fs-exists/  用來判斷是否是一個文件夾