引入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('./'));

　　重啟服務器上，我們看到一切都正常，外部樣式和圖片都能正常展示，而且我們顯示任何類型的圖片，基本都沒問題。