[Koa2 系列 12] Koa-static 載入靜態資源

如果資料夾中放了一個靜態資源（js、css、jpg、png）
而你希望可以使用網址去造訪，例如觀看圖片什麼的
要是在網址列上直接輸入路徑則會被當成路由的一部分

Koa2 也可以實現載入靜態資源，不過相對的麻煩與冗長
通常會使用 koa-static 這個輪子

安裝

npm install --save koa-static

使用

新建static資料夾，然後在 static 中放入圖片，css和 js 文件

const Koa = require('koa')
const path = require('path')
const static = require('koa-static')
const app = new  Koa()
const staticPath = './static'

app.use(static(
 path.join(__dirname, staticPath)
))

app.use(async (ctx) => {
 ctx.body = 'hello world'
})

app.listen(3000, () => {
 console.log('[demo] static-use-middleware is starting at port 3000')
})

首先就是使用中間件，藉由上一篇提到的 path.join 方法來取得靜態資源路徑
然後底下就是一個最簡單的 node 範例
但是不同的是，在這個情況下在網址列直接輸入靜態資源路徑
卻可以顯示出指定的圖片等

這就是利用 koa-static 來載入靜態資源的範例
看起來實在很短，但就真的沒什麼東西
卻是非常常用的功能，必須得學會

做到這邊，我們對於 Koa 已經有了基本的認識
這系列也到了尾聲，剩下的就是持續的使用跟練習了！