> 極簡 Node.js 入門系列教程：[https://www.yuque.com/sunluyong/node](https://www.yuque.com/sunluyong/node) > > 本文更佳閱讀體驗：[https://www.yuque.com/sunluyong/node/static-server](https://www.yuque.com/sunluyong/node/static-server) 在[建立 HTTP 伺服器](https://www.yuque.com/sunluyong/node/http-server)實現了一個最簡單的靜態資源伺服器，可以對程式碼進行寫改造，增加資料夾預覽功能，暴露出一些配置，變成一個可定製的靜態資源伺服器模組 ## 模組化 可定製的靜態資源伺服器理想的使用方式應該是這樣的 ```javascript const StaticServer = require('YOUR_STATIC_SERVER_FILE_PATH'); const staticServer = new StaticServer({ port: 9527, root: '/public', }); staticServer.start(); staticServer.close(); ``` 這樣的使用方式就要求程式碼實現模組化，Node.js 實現一個模組非常簡單 ```javascript const http = require('http'); const fs = require('fs'); const path = require('path'); const mime = require('mime-types'); const defaultConf = require('./config'); class StaticServer { constructor(options = {}) { this.config = Object.assign(defaultConf, options); } start() { const { port, root } = this.config; this.server = http.createServer((req, res) => { const { url, method } = req; if (method !== 'GET') { res.writeHead(404, { 'content-type': 'text/html', }); res.end('請使用 GET 方法訪問檔案！'); return false; } const filePath = path.join(root, url); fs.access(filePath, fs.constants.R_OK, err => { if (err) { res.writeHead(404, { 'content-type': 'text/html', }); res.end('檔案不存在！'); } else { res.writeHead(200, { 'content-type': mime.contentType(path.extname(url)), }); fs.createReadStream(filePath).pipe(res); } }); }).listen(port, () => { console.log(`Static server started at port ${port}`); }); } stop() { this.server.close(() => { console.log(`Static server closed.`); }); } } module.exports = StaticServer; ``` 完整程式碼：[https://github.com/Samaritan89/static-server/tree/v1](https://github.com/Samaritan89/static-server/tree/v1)
執行 `npm run test` 可以測試
 ## 支援資料夾預覽 當訪問的路徑是資料夾的時候程式會報錯 ``` Error: EISDIR: illegal operation on a directory, read Emitted 'error' event on ReadStream instance at: at internal/fs/streams.js:217:14 at FSReqCallback.wrapper [as oncomplete] (fs.js:524:5) { errno: -21, code: 'EISDIR', syscall: 'read' } ``` 因為 fs.createReadStream 嘗試讀取資料夾，需要相容下訪問路徑是資料夾的時候，返回一個目錄頁，也就是在 fs.access 之後判斷檔案型別 ```javascript fs.access(filePath, fs.constants.R_OK, err => { if (err) { res.writeHead(404, { 'content-type': 'text/html', }); res.end('檔案不存在！'); } else { const stats = fs.statSync(filePath); const list = []; if (stats.isDirectory()) { // 如果是資料夾則遍歷資料夾，生成改資料夾內的檔案樹 // 遍歷檔案內容，生成 html } else { res.writeHead(200, { 'content-type': mime.contentType(path.extname(url)), }); fs.createReadStream(filePath).pipe(res); } } }); ``` > 遍歷生成 html 部分需要用到 [資料夾操作](https://www.yuque.com/sunluyong/node/qp1pcz) 章節介紹的知識，為了方便生成 HTML，demo 使用了 [Handlebar](https://handlebarsjs.com/) 模板引擎，主要邏輯 ```javascript if (stats.isDirectory()) { // 如果是資料夾則遍歷資料夾，生成改資料夾內的檔案樹 const dir = fs.opendirSync(filePath); let dirent = dir.readSync(); while (dirent) { list.push({ name: dirent.name, path: path.join(url, dirent.name), type: dirent.isDirectory() ? 'folder' : 'file', }); dirent = dir.readSync(); } dir.close(); res.writeHead(200, { 'content-type': 'text/html', }); // 對檔案順序重排，資料夾在檔案前面，相同型別按字母排序，不區分大小寫 list.sort((x, y) => { if (x.type > y.type) { // 'folder' > 'file'， 返回 -1，folder 在 file 之前 return -1; } else if (x.type == y.type) { return compare(x.name.toLowerCase(), y.name.toLowerCase()); } else { return 1; } }); // 使用 handlebars 模板引擎，生成目錄頁面 html const html = template({ list }); res.end(html); } ``` 通過 git 程式碼修改記錄可以清晰看到本次的變更：[https://github.com/Samaritan89/static-server/commit/5565788dc317f29372f6e67e6fd55ec92323d0ea](https://github.com/Samaritan89/static-server/commit/5565788dc317f29372f6e67e6fd55ec92323d0ea)

同樣在專案根目錄執行 `npm run test` ，使用瀏覽器訪問 `127.0.0.1:9527` 可以看到目錄檔案的展示
完整程式碼：[https://github.com/Samaritan89/static-server/tree/v2](https://github.com/Samaritan89/static-server/t