实现一个类似 http-server 的静态服务一一 ks-server

最近没事，学习了一下 node，仅仅是看看api，总是看了又忘，效率着实低下。

觉得 http-server 这个静态服务很神奇，突发奇想，自己也来实现这么一个静态服务试试。顺便巩固一下之前看过的API。暂且起名为 ks-server。

主要用到了node中的 http、fs、url、path、zlib、os等常用模块。

1. 初始化项目：

cd ks-server # cd 到我的项目中

yarn init -y

2. 将命令映射成全局命令

A、首先在 ks-server 根目录下新建 src 文件夹，再新建一个 bin/www.js 文件。

#! /usr/bin/env node

// 上面这句话，告诉命令行，我要用 node 环境来执行 www.js 这个文件

// www.js 文件

console.log('hello');

B、将如下代码添加到 package.json 中。

"bin": {

	"ks-server": ".src/bin/www.js"

}

C、将 ks-server 命令映射成全局命令

npm link # 注意这个命令是在当前目录 ks-server 下运行的

出现如下日志即表示成功!

3. 命令行参数处理

用 process.argv 来自己去解析命令行中的参数。但是我们在这儿用 commander 这个包来做参数处理。修改 www.js 文件为如下内容，测试 commander 包。

#! /usr/bin/env node

// www.js

const commander = require('commander');

const package = require('../package.json');

// 设置一个默认的值

let parser = {

	port: 10086,

	host: 'localhost',

	dir: process.cwd()	// 1. 为什么不能用 __dirname

}

// 监听一个 --help 事件，当用户输入 `ks-server --help` 时，会将一下内容追加到显示的后面。

// 这个绑定事件得放在 声明 argvs 之前

commander.on('--help', function () {

	console.log("Usage:")

	console.log("  ks-server -p 10086 --host localhost")

})

let argvs = commander

	.version(package.version)

	.option('-p,--port', 'server port')

	.option('-o,--host', 'server hostname')

	.option('-d,--dir', 'server dir')

	.parse(process.argv);

parser = { ...parser, ...argvs };

注意最后的 .parse(process.argv) 是不能少的。
绑定事件得放在声明 argvs 之前
事件绑定时，事件名不能是-h, --help,-h

解惑

为什么不能用 __dirname？

__dirname 为当前被执行的js所在目录； process.cwd() 当前node命令所在的目录

4. 起一个静态服务

在 ks-server 目录下新建一个 server/index.js 文件。

const http = require('http');

const fs = require('fs');

const url = require('url');

const path = require('path');

// 第三方模块

const mime = require('mime');

const chalk = require('chalk');	// 粉笔

const debug = console.log;

const ejs = require('ejs');	// 模板 ejs、jade、handlebar

5. 实现逻辑

本来是想把代码贴过来的，发现也挺累的，还不如放到 github 上合适。/捂脸

https://github.com/MobroChu/ks-server

顺便给颗星星激励一下奋战在坚持与放弃边界线的菜鸟。项目有结构有所调整，es6诚然方便，单考虑到低版本node兼容性、低版本浏览器兼容行，故使用babel将es6语法解析成es5，并置于dist文件夹下。

6. 目录结构

目录在原有基础进行过优化，现在目录结构及其功能如下：

|-- dist 			// 打包后的代码

   |-- bin			// 命令解析相关文件

      |-- www.js	// 命令解析

   |-- server		// 静态服务

      |-- server.js	// 静态服务类文件

|-- node_modules	// npm包

|-- src				// es6 代码

   |-- bin

      |-- www.js

   |--- server

      |-- server.js

|-- static			// 公共静态资源

   |-- font			// 字体图标

   |-- logo			// logo 图标

|-- template		// 渲染模板

   |-- template.html

   |-- template.css

   |-- template.js

|-- .babelrc

|-- .gitignore

|-- .npmignore

|-- package-lock.json

|-- package.json

|-- readme.md

|-- yarn.lock

你可知这百年爱人只能陪半途。你且迷这风浪永远二十赶朝暮。一一记昨日书