摘要：從中間件學(xué)習(xí)搭建靜態(tài)文件服務(wù)器原文地址中有說明它只是的一個(gè)包裝查看的源碼可以發(fā)現(xiàn)，它做的工作是根據(jù)傳入的查找文件是否存在，如果存在就創(chuàng)建一個(gè)流，不存在就拋出錯(cuò)誤。

Static file serving middleware

koa-static中有說明它只是koa-send的一個(gè)包裝

const send = require("koa-send");

app.use(async (ctx) => {
  await send(ctx, ctx.path, { root: __dirname + "/public" });
})

查看koa-send的源碼可以發(fā)現(xiàn)，它做的工作是根據(jù)傳入的path查找文件是否存在，如果存在就創(chuàng)建一個(gè)流，不存在就拋出錯(cuò)誤。

send函數(shù)可以傳入第三個(gè)參數(shù)

maxage Browser cache max-age in milliseconds. (defaults to 0)

immutable Tell the browser the resource is immutable and can be cached indefinitely. (defaults to false)

hidden Allow transfer of hidden files. (defaults to false)

root Root directory to restrict file access.

index Name of the index file to serve automatically when visiting the root location. (defaults to none)

gzip Try to serve the gzipped version of a file automatically when gzip is supported by a client and if the requested file with .gz extension exists. (defaults to true).

brotli Try to serve the brotli version of a file automatically when brotli is supported by a client and if the requested file with .br extension exists. (defaults to true).

format If not false (defaults to true), format the path to serve static file servers and not require a trailing slash for directories, so that you can do both /directory and /directory/.

setHeaders Function to set custom headers on response.

extensions Try to match extensions from passed array to search for file when no extension is sufficed in URL. First found is served. (defaults to false)

可以看一下index的作用，事實(shí)上當(dāng)我們?cè)诘刂窓谳斎?/p>

http://www.aaa.com/
或者
http://www.aaa.com/index.html

可以發(fā)現(xiàn)效果是一樣的，原因就是配置了index選項(xiàng)，服務(wù)端首先檢查你的path是否以 "/" 結(jié)尾，假如你配置了index選項(xiàng)且以 "/" 結(jié)尾，那么服務(wù)端會(huì)自動(dòng)將你的path和index選項(xiàng)拼接，如下：

const trailingSlash = path[path.length - 1] === "/"

...

if (index && trailingSlash) path += index

再看一下format的作用，其實(shí)我們經(jīng)常在地址欄輸入的是

http://www.aaa.com
而不是
http://www.aaa.com/

但他們的效果也是一樣的，原因就是配置了format，經(jīng)過resolve之后的path返回的是一個(gè)絕對(duì)路徑，它是其中一種狀態(tài)（文件或者文件夾），如果是文件夾，且設(shè)置了format（默認(rèn)為true）和index,那么就自動(dòng)添加index

    stats = await fs.stat(path)

    // Format the path to serve static file servers
    // and not require a trailing slash for directories,
    // so that you can do both `/directory` and `/directory/`
    if (stats.isDirectory()) {
      if (format && index) {
        path += "/" + index
        stats = await fs.stat(path)
      } else {
        return
      }
    }

extensions的作用好像不多見，比如你的a文件夾

| - a
    | - demo.txt
    | - demo.json
    | - demo.html

假如你設(shè)置了extensions(假設(shè)為["json", "txt"])，那么你在地址欄輸入

http://www.aaa.com/a/demo

事實(shí)上等同于
http://www.aaa.com/a/demo.json

服務(wù)端會(huì)首先判斷你是否設(shè)置了extensions且path不以 ".**" 結(jié)尾

  if (extensions && !/..*$/.exec(path)) {
    const list = [].concat(extensions)
    for (let i = 0; i < list.length; i++) {
      let ext = list[i]
      if (typeof ext !== "string") {
        throw new TypeError("option extensions must be array of strings or false")
      }
      // [".js"] 或者 ["js"] 均可以
      if (!/^./.exec(ext)) ext = "." + ext
      if (await fs.exists(path + ext)) {
        path = path + ext
        break
      }
    }
  }

然后按照extensions的順序依次查找拼接的path是否存在，存在即停止查找

koa-static的只是給koa-send包了一層，koa-send的第二個(gè)參數(shù)path是ctx.path

koa-static有個(gè)defer選項(xiàng)

defer If true, serves after return next(), allowing any downstream middleware to respond first.

  if (!opts.defer) {
    return async function serve (ctx, next) {
      let done = false

      if (ctx.method === "HEAD" || ctx.method === "GET") {
        try {
          // koa-send 輸入的path不存在時(shí)拋錯(cuò)（404或者500）
          done = await send(ctx, ctx.path, opts)
        } catch (err) {
          // 如果錯(cuò)誤碼是404說明請(qǐng)求的不是靜態(tài)文件
          if (err.status !== 404) {
            throw err
          }
        }
      }

      //  請(qǐng)求不是靜態(tài)文件  繼續(xù)執(zhí)行下面的邏輯
      if (!done) {
        await next()
      }
    }
  }

  return async function serve (ctx, next) {
    await next()

    // 假如請(qǐng)求方法不是get  必然不是訪問靜態(tài)資源
    if (ctx.method !== "HEAD" && ctx.method !== "GET") return
    // 說明對(duì)請(qǐng)求已經(jīng)做了響應(yīng)
    if (ctx.body != null || ctx.status !== 404) return // eslint-disable-line

    try {
      await send(ctx, ctx.path, opts)
    } catch (err) {
      if (err.status !== 404) {
        throw err
      }
    }
  }