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/  用来判断是否是一个文件夹