引入koa-static处理静态资源

一、问题：

　　大家都知道在HTML中有三种使用CSS的方式，分别是：内联样式、内部样式、外部样式。外部样式，在head部分使用link标签引入外部写入css样式表的文件，示例如下：<link href="index.css" rel="stylesheet">，同时，在项目根目录下创建index.css文件，并写入样式。修改后我们刷新页面，发现页面背景色没有变成绿色, 不仅如此，我们在标签里引入一张图片。发现不仅引入的外部样式表不起作用，图片也同样无法正常显示。这是为什么呢？

　　当然，我们不能光想，而是要去分析，我们打开chrome浏览器的开发者模式，在右侧找到 network并点击查看 该页面的有关请求，如果没有在刷新一下，我们可以看到浏览器为了渲染页面发了三次请求：

• 第一个请求的是'/‘, 服务器给我们返回了index.html文件；
• 第二个请求的是'/index.css', 但返回内容还是index.html文件；
• 第三个请求的是'/skills.jpg', 但返回内容还是index.html文件；

　　这是为什么呢？我们先看看当下 index.js文件中内容处理的部分：

app.use(ctx => { ctx.response.type = 'html'; ctx.response.body = fs.createReadStream('index.html'); });

　　可以看到，无论我们请求的是什么内容，因为 我们的静态服务器 没有对 css 和 图片 类型 进行处理，返回的都是index.html文件。如何解决呢？

　　自己硬干：

app.use(ctx => { const url = ctx.url == '/'  ?  '/index.html' : ctx.url const fileType = path.extname( url ).slice(1); if (fileType ==='html') { ctx.response.type = 'html'; ctx.response.body = fs.createReadStream('index.html'); } else if  (fileType ==='css') { ctx.response.type = 'css'; ctx.response.body = fs.createReadStream('index.css'); } else  if  (fileType ==='jpg') { ctx.response.type = 'image/jpg'; ctx.response.body = fs.createReadStream('skills.jpg'); } else { ctx.response.body = '文件不存在'; } });

　　可以看到，外部样式和图片都正常了，但是其他文件类型或图片类型的处理呢？如果我们想再添加一张png的图片，又会不正常，还得需要去更新代码。显然，在实际工作中，如果所有功能都需要自己去实现的话，效率会很低，不仅会延期，还会有很多未知的bug。有没有更好的方式呢？

二、解决方案：

　　有经验的老司机通常会选择一些靠谱的依赖库去实现我们常用的功能，对于基于koa开发的web应用，我们一般使用koa-static:

1、安装 npm install koa-static

2、引入 const KoaStatic = require('koa-static'); 3、使用 app.use(KoaStatic('./'));

　　重启服务器上，我们看到一切都正常，外部样式和图片都能正常展示，而且我们显示任何类型的图片，基本都没问题。