命令行工具 —— 手写类似 http-server 的静态服务器

阅读原文

前言

npm 里有个 http-server 的模块，是一个简单的、零配置的 HTTP 服务，它非常强大，同时非常简单，可以方便的帮助我们开启本地服务器，以及局域网共享，可以用来做测试，开发，学习时的环境配置，我们本节就模拟 http-server 实现一个自己的启动本地服务的命令行工具。

http-server 使用

http-server 服务器通过命令行启动，使用时需要安装，安装命令如下：

npm install http-server -g

启动本地服务器时在根目录下执行下面命令即可：

http-server [path] [option]

path 默认情况下是 ./public，否则是 ./，启动后可以通过 http://localhost:8080 来访问服务器，options 为其他参数， npm 官方文档 https://www.npmjs.com/package/http-server 有详细说明。

当通过浏览器访问 http://localhost:8080 以后，会将我们服务器根目录的目录结构显示在浏览器页面上，当点击文件夹时，可以继续显示内部的文件和文件夹，当点击文件时会直接通过服务器访问文件，并将文件内容显示在浏览器页面上。

实现命令行工具依赖的模块

1、chalk 模块

chalk 模块是用来控制命令行输出的文字颜色的第三方模块，使用前需要安装，安装命令如下：

npm install chalk

chalk 模块的用法如下，模块支持的颜色和更多的 API 可以在 npm 官方文档 https://www.npmjs.com/package/chalk 中查看。

// 文件位置：~static/tests/staticchalk-test.js
const chalk = require("chalk");

// 在命令行打印绿色和红色的 hello
console.log(chalk.green("hello"));
console.log(chalk.red("hello"));

在命令行窗口输入 node chalk-test.js 查看命令行打印 hello 的颜色。

2、debug 模块

debug 模块可以匹配当前环境变量 DEBUG 的值并输出相关信息，作用在于命令行工具可以根据不同情况输出的信息进行调试，是第三方模块，使用前需安装，命令如下。

npm install debug

debug 的简单使用如下，如果想了解更详细的 API 可以在 npm 官方文档 https://www.npmjs.com/package/debug 中查看。

// 文件位置：~static/tests/debug-test1.js —— 用法 1
const debug = require("debug")("hello");

debug("hi panda");

当我们在命令行中执行 node debug-test1.js 时发现命令窗口什么也没有打印，那是因为当前根目录的环境变量 DEBUG 的值必须和我们设置的 hello 相匹配才会打印相关信息。

设置环境变量，Window 可以通过 set DEBUG=hello 设置，Mac 可以通过 export DEBUG=hello 设置，设置环境变量后再次执行 node debug-test.js，我们会发现命令行打印出了下面内容。

hello hi panda +0ms

其中 hello 为我们设置 DEBUG 环境变量的值，hi panda 为调试方法 debug 方法打印的信息，+0ms 为距离上次执行的间隔时间。

// 文件位置：~static/tests/debug-test2.js —— 用法 2
const debugA = require("debug")("hello:a");
const debugB = require("debug")("hello:b");

debugA("hi panda");
debugB("hello panda");

上面的代码目的是可以让我们不同的 debug 方法可以匹配不同的环境变量，所以需要重新将环境变量的值设置为 hello:*，这样再次执行 node debug-test2.js 发现命令窗口打印了如下内容。

hello:a hi panda +0ms
hello:b hello panda +0ms

使用 debug 的好处就是可以在开发的时候打印一些调试用的信息，在开发完成后因为匹配不到环境变量，这些信息就会被隐藏。

3、commander 模块

commander 是著名的 Node 大神 TJ 的 “作品”，是一个开发命令行工具的解决方案，提供了用户命令行输入和参数解析的强大功能，commander 是第三方模块，使用时需要安装，命令如下。

npm install commander

基本用法如下：

// 文件位置：~static/tests/commander-test1.js
let commander = require("commander");

// 解析 Node 进程执行时的参数
commander.version("1.0.0").parse(process.argv);

上面文件中 version 方法代表当前执行文件模块的版本，parse 为解析参数为当前命令行进程参数的方法，process.argv 为参数集合（数组），第一个参数为执行的 node.exe 文件的绝对路径，第二个参数为当前执行文件的绝对路径，后面为通过命令行传入的参数，如 --host、--port 等。

在命令行执行 node commander-test.js --help 时默认会在命令行输出如下信息：

Usage: [options]
Options:
   -V, --version output the version number
   -h, --help output usage information

当然在我们的命令行工具中，参数不只 --version 和 --help 两个，我们更希望更多的参数更多的功能，并且可定制的描述信息，使用案例如下。

// 文件位置：~static/tests/commander-test2.js
let commander = require("commander");

// 解析 Node 进程执行时的参数
commander
    .version("1.0.0")
    .usage("[options]")
    .option('-p, --port <n>', 'server port')
    .option('-o, --host <n>', 'server host')
    .option('-d, --dir <n>', 'server dir')
    .parse(process.argv);

console.log(commander.port); // 3000
console.log(commander.host); // localhost
console.log(commander.dir); // public

在执行命令 node commander-test2.js --help 后会在命令窗口输出如下信息：

Usage: yourname-http-server [options]
Options:
   -V, --version output the version number
   -p, --port server port
   -o, --host server host
   -d, --dir server dir
   -h, --help output usage information

usage 方法可以让我们详细的定制参数的类型和描述，option 方法可以让我们添加执行 --help 指令时打印的命令以及对应的描述信息。

执行下面命令：

node commander-test2.js --port 3000 --host localhost --dir public

执行命令后我们发现其实给我们的参数挂在了 commander 对象上，方便我们取值。

在我们使用别人的命令行工具时会发现在上面输出信息的时候经常会在下面输出 How to use 的列表，更详细的描述了每条命令的作用及用法。

// 文件位置：~static/tests/commander-test3.js
let commander = require("commander");

// 必须写到 parse 方法的前面
commander.on("--help", function () {
   
    console.log("\r\n  How to use:")
    console.log("    yourname-http-server --port <val>");
    console.log("    yourname-http-server --host <val>");
    console.log("    yourname-http-server --dir <val>");
});

// 解析 Node 进程执行时的参数
commander
    .version("1.0.0")
    .usage("[options]")
    .option('-p, --port <n>', 'server port')
    .option('-o, --host <n>', 'server host')
    .option('-d, --dir <n>', 'server dir')
    .parse(process.argv);

再次执行命令 node commander-test2.js --help 后会在命令窗口输出如下信息：

Usage: yourname-http-server [options]
Options:
   -V, --version output the version number
   -p, --port server port
   -o, --host server host
   -d, --dir server dir
   -h, --help output usage information
How to use:
   yourname-http-server --port
   yourname-http-server