最近没事,学习了一下 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
你可知这百年爱人只能陪半途。 你且迷这风浪永远二十赶朝暮。 一一 记昨日书