本篇文章帶給大家的內容是關於Node.js之靜態資源伺服器實作（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
本文介紹了一個簡單的靜態資源伺服器的實例項目，希望能為Node.js初學者帶來幫助。專案涉及到http、fs、url、path、zlib、process、child_process等模組，涵蓋大量常用api；還包括了基於http協定的快取策略選取、gzip壓縮優化等；最後我們會發佈到npm上，做成一個可以全域安裝、使用的小工具。麻雀雖小，五臟俱全，一想是不是還有點激動？話不多說，放碼過來。
文中源碼位址在最後附錄。
可先行體驗專案效果：
安裝：npm i -g here11
任意資料夾位址輸入指令：here
因為我們要發佈到npm上，所以我們先按照國際慣例，npm init，走你！在命令列可以一路回車，有些配置會在最後的發布步驟中細說。
目錄結構如下：
bin資料夾存放我們的執行程式碼，web作為一個測試資料夾，裡面放了些網頁。
靜態資源伺服器，通俗講就是我們在瀏覽器網址列輸入形如「http://網域/test/ index.html」的一個位址，伺服器從根目錄下的對應資料夾找到index.html，讀出檔案內容並傳回瀏覽器，瀏覽器渲染給使用者。
const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");
const item = (name, parentPath) => {
let path = parentPath = `${parentPath}/${name}`.slice(1);
return `<p><a>${name}</a></p>`;
}
const list = (arr, parentPath) => {
return arr.map(name => item(name, parentPath)).join("");
}
const server = http.createServer((req, res) => {
let _path = url.parse(req.url).pathname;//去掉search
let parentPath = _path;
_path = path.join(__dirname, _path);
try {
//拿到路径所对应的文件描述对象
let stats = fs.statSync(_path);
if (stats.isFile()) {
//是文件，返回文件内容
let file = fs.readFileSync(_path);
res.end(file);
} else if (stats.isDirectory()) {
//是目录，返回目录列表，让用户可以继续点击
let dirArray = fs.readdirSync(_path);
res.end(list(dirArray, parentPath));
} else {
res.end();
}
} catch (err) {
res.writeHead(404, "Not Found");
res.end();
}
});
const port = 2234;
const hostname = "127.0.0.1";
server.listen(port, hostname, () => {
console.log(`server is running on http://${hostname}:${port}`);
});以上這段code就是我們的核心程式碼了，已經實現了核心功能，本地運行即可看到返回了文件目錄，點擊文件名便可瀏覽對應的網頁、圖片、文本啦。
功能實現了，但是我們可以在某些方面做做優化，提升實用性，順便多學習幾個api（裝逼技巧）。
我們目前讀取檔案回傳給瀏覽器的操作是透過readFile一次讀取出來，一次返回，這樣當然可以實現功能，但我們有更好的方式－用stream（流）進行IO操作。 stream並不是node.js獨有的概念，而是作業系統最基本的一種操作形式，所以理論上講，任何一門server端語言都實作了stream的API。
為什麼講用stream是更好的方式？因為一次性讀取、操作大文件，內存和網路是吃不消的，尤其在用戶訪問量比較大的情況下更為明顯；而藉助stream可以讓數據流動起來，一點一點操作，從而提升性能。程式碼修改如下：
if (stats.isFile()) {
//是文件，返回文件内容
//在createServer时传入的回调函数被添加到了"request"事件上，回调函数的两个形参req和res
//分别为http.IncomingMessage对象和http.ServerResponse对象
//并且它们都实现了流接口
let readStream = fs.createReadStream(_path);
readStream.pipe(res);
}編碼實作非常簡單，在需要傳回檔案內容時，我們創建了一個可讀流，並把它直接導向了res物件。
gzip壓縮帶來的效能（使用者存取體驗）提升是非常明顯的，尤其在當下spa應用大行其道的時代，開啟gzip壓縮，可以大幅減小js、css等檔案資源的體積，提升使用者存取速度。作為一個靜態資源伺服器，我們當然要加上這個功能。
node中有一個zlib的模組，提供了很多壓縮相關的api，我們就用它來實現：
const zlib = require("zlib");
if (stats.isFile()) {
//是文件，返回文件内容
res.setHeader("content-encoding", "gzip");
const gzip = zlib.createGzip();
let readStream = fs.createReadStream(_path);
readStream.pipe(gzip).pipe(res);
}有了stream的使用經驗，我們再看這段程式碼的時候就好理解多了。把檔案流先導向gzip對象，再導向res對象。此外，使用gzip壓縮的時候還要注意一點：需要把回應頭裡的content-encoding設定為gzip。否則瀏覽器會把一堆亂碼展示出來。
快取這個東西讓人又愛又恨，用得好，可以提升使用者體驗，減輕伺服器壓力；用得不好，可能就會面臨各種各樣奇奇怪怪的問題。一般來講瀏覽器http快取分為強快取（非驗證性快取）和協商快取（驗證性快取）。
什麼叫強緩存呢？強緩存是由cache-control和expires兩個首部字段控制的，現在一般用cache-control。例如我們設定了cache-control: max-age=31536000的回應頭，就是告訴瀏覽器這個資源有一年的快取期，一年內不用向服務端發送請求，直接從快取讀取資源。
而協商性快取是使用if-modified-since/last-modified、if-none-match/etag等首部字段，配合強緩存，在強緩存沒有命中（或告知瀏覽器no-cache ）的時候，向伺服器發送請求，確認資源的有效性，決定從快取讀取或是傳回新的資源。
有了以上概念，我們便可以製定我們的快取策略：
if (stats.isFile()) {
//是文件，返回文件内容
//增加判断文件是否有改动，没有改动返回304的逻辑
//从请求头获取modified时间
let IfModifiedSince = req.headers["if-modified-since"];
//获取文件的修改日期——时间戳格式
let mtime = stats.mtime;
//如果服务器上的文件修改时间小于等于请求头携带的修改时间，则认定文件没有变化
if (IfModifiedSince && mtime <p>这样一套缓存策略在现代前端项目体系下还是比较合适的，尤其是对于spa应用来讲。我们希望index.html能够保证每次向服务器验证是否有更新，而其余的文件统一本地缓存一个月（自己定）；通过webpack打包或其他工程化方式构建之后，js、css内容如果发生变化，文件名相应更新，index.html插入的manifest（或script链接、link链接等）清单会更新，保证用户能够实时得到最新的资源。</p><p>当然，缓存之路千万条，适合业务才重要，大家可以灵活制定。</p><h4>4. 命令行参数</h4><p>作为一个在命令行执行的工具，怎么能不象征性的支持几个参数呢？</p><pre class="brush:php;toolbar:false">const config = {
//从命令行中获取端口号，如果未设置采用默认
port: process.argv[2] || 2234,
hostname: "127.0.0.1"
}
server.listen(config.port, config.hostname, () => {
console.log(`server is running on http://${config.hostname}:${config.port}`);
});这里就简单的举个栗子啦，大家可以自由发挥！
虽然没太大卵用，但还是要加。我就是要让你们知道，我加完之后什么样，你们就是什么样 :-( duang~
const exec = require("child_process").exec;
server.listen(config.port, config.hostname, () => {
console.log(`server is running on http://${config.hostname}:${config.port}`);
exec(`open http://${config.hostname}:${config.port}`);
});用process.cwd()代替__dirname。
我们最终要做成一个全局并且可以在任意目录下调用的命令，所以拼接path的代码修改如下：
//__dirname是当前文件的目录地址，process.cwd()返回的是脚本执行的路径 _path = path.join(process.cwd(), _path);
基本上我们的代码都写完了，可以考虑发布了！（不发布到npm上何以显示逼格？）
得到一个配置类似下面所示的json文件：
{
"name": "here11",
"version": "0.0.13",
"private": false,
"description": "a node static assets server",
"bin": {
"here": "./bin/index.js"
},
"repository": {
"type": "git",
"url": "https://github.com/gww666/here.git"
},
"scripts": {
"test": "node bin/index.js"
},
"keywords": [
"node"
],
"author": "gw666",
"license": "ISC"
}其中bin和private较为重要，其余的按照自己的项目情况填写。
bin这个配置代表的是npm i -g xxx之后，我们运行here命令所执行的文件，“here”这个名字可以随意起。
在index.js文件的开头加上：#!/usr/bin/env node
否则linux上运行会报错。
勉强贴一手命令，还不清楚自行百度：
没有账号的先添加一个，执行：
npm adduser
然后依次填入
Username: your name
Password: your password
Email: yourmail
npm会给你发一封验证邮件，记得点一下，不然会发布失败。
执行登录命令：
npm login
执行发布命令：
npm publish
发布的时候记得把项目名字、版本号、作者、仓库啥的改一下，别填成我的。
还有readme文件写一下，好歹告诉别人咋用，基本上和文首所说的用法是一样的。
好了，齐活。
还等啥啊，赶快把npm i -g xxx 这行命令发给你的小伙伴啊。什么？你没有小伙伴？告辞！
附
本文项目源码地址：https://github.com/gww666/here
以上是Node.js之靜態資源伺服器實作（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
