Cli(command-line interface),中文是 命令行界面,简单来说就是可以通过命令行快速生成自己的项目模板等功能(比较熟悉的是vue-cli脚手架这些),把上述写的包做成Cli工具.

延续上一次的代码,这次现在readme.md里面先注释告诉用户又那些命令行的语句具体对应哪些功能

step1:README.md

# anydoor
Tiny NodeJS Static Web server
##安装 ```
npm i -g anydoor
```
##使用方法 ```
anydoor # 把当前文件夹作为静态资源服务器根目录
anydoor -p 3333 # 设置端口号为 3333 //手工自定义一个端口号
anydoor -h localhost # 设置host为localhost
anydoor -d /usr # 设置根目录为 /usr ```

Step2:安装yargs

yargs是什么? Yargs是通过解析参数和生成优雅的用户界面,帮助您构建交互式命令行工具。

安装yargs

npm i yargs

新建一个src/index.js,与app.js处于平级目录下,注意下面所定义的option是与defaultConfig的对应的内容

// process.argv1
// yargs
const yargs = require('yargs')
const Server = require('./app') const argv = yargs
.usage('anywhere [options]')
.option('p',{
alias:'port',
describe:'端口号',
default:9527
})
.option('h',{
alias:'hostname',
describe:'host',
default:'127.0.0.1'
})
.option('d',{
alias:'root',
describe:'root path',
default:process.cwd()
})
.version()
.alias('v','version')
.help()
.argv; const server = new Server(argv)
server.start()

app.js

const http = require('http');
const chalk = require('chalk')
const path = require('path')
const conf = require('./config/defaultConfig.js');
const route = require('./helper/route') class Server {
constructor(config){
this.conf = Object.assign({},conf,config)
}
start(){
const server = http.createServer((req,res)=>{
const url = req.url;
//拿到文件路径
const filePath = path.join(this.conf.root,req.url)
route(req,res,filePath,this.conf)
}); server.listen(this.conf.port,this.conf.hostname,()=>{
const addr = `http://${this.conf.hostname}:${this.conf.port}`;
console.log(`Server started at ${chalk.green(addr)}`);
})
}
} module.exports = Server

package.json添加main和bin两个选项

{
"devDependencies": {
"eslint": "^6.2.2"
},
"name":"anydoor",
"version":"0.01",
"main":"src/app.js",
"bin":{
"anydoor":"bin/anydoor"
}
}

新建anydoor/bin/anydoor

#! /usr/bin/env node

require('../src/index')

运行代码,成功启动服务,打开http://127.0.0.1:9999可以看到之前运行app.js的页面

--------------------------------------------------------------------------------------------------------------------

优化自动打开浏览器操作,下面修改之后运行之后会自动打开网页,非常方便

新建src/helper/openUrl.js

const {exec} = require('child_process')

module.exports = url=>{
switch(process.platform){
case 'darwin':
exec(`open ${url}`);
break
case 'win32':
exec(`start ${url}`);
break
}
}

src/app.js

const http = require('http');
const chalk = require('chalk')
const path = require('path')
const conf = require('./config/defaultConfig.js');
const route = require('./helper/route')
const openUrl = require('./helper/openUrl') class Server {
constructor(config){
this.conf = Object.assign({},conf,config)
}
start(){
const server = http.createServer((req,res)=>{
const url = req.url;
//拿到文件路径
const filePath = path.join(this.conf.root,req.url)
route(req,res,filePath,this.conf)
}); server.listen(this.conf.port,this.conf.hostname,()=>{
const addr = `http://${this.conf.hostname}:${this.conf.port}`;
console.log(`Server started at ${chalk.green(addr)}`);
openUrl(addr)
})
}
} module.exports = Server

NodeJS4-8静态资源服务器实战_构建cli工具的更多相关文章

  1. NodeJS4-7静态资源服务器实战_缓存

    浏览器发出一个请求,服务器解析出响应的结果返回给浏览器. 缓存是怎么工作的? 用户发起请求,浏览器检查本地是否存在缓存,如果第一次请求没有缓存,那就向服务器发起请求,服务器协商缓存的内容并且返回响应, ...

  2. NodeJS4-5静态资源服务器实战_优化压缩文件

    浏览器控制台看一下RequestHeader有一个Accept-Encoding,而RespondHeaders中也会有一个Content-Encoding和他进行对应. Accept-Encodin ...

  3. NodeJS4-9静态资源服务器实战_发到npm上

    登录->publish一下 ->上npm官网查看 -> 安装全局 //登录 npm login //推上去npm npm publish //全局安装 npm i -g 你的文件名

  4. NodeJS4-4静态资源服务器实战_优化引入模板引擎

    引入模板引擎(handlebars) cnpm i handlebars 结构大概是这样子的,新建模板dir.tpl文件和route.js dir.tpl <!DOCTYPE html> ...

  5. NodeJS4-3静态资源服务器实战_优化成近似同步写法

    实例3 上面有点回调,优化成近似同步的写法 route.js const fs =require('fs') const promisify = require('util').promisify; ...

  6. NodeJS4-2静态资源服务器实战_实现获取文件路径

    实例2 : 实现获取文件路径,判断是文件还是文件夹,如果是文件夹就显示里面的列表文件,如果是文件就显示里面的内容 defaultConfig.js module.exports={ root:proc ...

  7. NodeJS4-1静态资源服务器实战_实现访问获取里面的内容

    .gitignore 匹配模式前 / 代表项目根目录 匹配模式最后加 / 代表是目录 匹配模式前加 ! 代表取反 * 代表任意一个字符 ? 匹配任意一个字符 ** 匹配多级目录 统一代码风格配置可以用 ...

  8. NodeJS4-6静态资源服务器实战_range范围请求

    range范围请求:向服务器发起请求可以申明我想请求判断内容的范围,从多少个字节到多少个字节,一次要求把所有的内容拿回来,服务器在得到相应的请求之后,从拿到对应的文件,拿到对应的字节返回给客户端.要实 ...

  9. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

随机推荐

  1. ubuntu 16.04上源码编译libjpeg-turbo和使用教程 | compile and use libjpeg-turbo on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/9f626e7a/,欢迎阅读! compile and use libjpeg-turbo on ubuntu 16.04 Seri ...

  2. svn文件被锁不能提交的解决办法

    记录工作中遇到的问题,分享出来: 前端时间在提交项目到svn遇到一个问题, 提交的时候提示:文件已经锁定!如下图: 原因是我之前提交的时候不小心中途停了,导致文件被锁,然后也没在意那么多, 趁着今天有 ...

  3. 更好一点的:Vue 利用指令实现禁止反复发送请求

    理论上可以用于任何元素,生效时会在元素上出现一个同大小的灰色蒙层(button元素会该表原生的disabled属性). /** * 当元素触发发起请求后,当发起的请求中最后一个请求的结果返回(不关心返 ...

  4. vue e.path 移动端兼容

    作用 e.path 用来获取点击元素及以上所有父元素的一个数组 问题 当在移动端会有获取不到e.path的问题 不兼容 解决 let path = event.path || (event.compo ...

  5. Kotlin Coroutines在Android中的实践

    Coroutines在Android中的实践 前面两篇文章讲了协程的基础知识和协程的通信. 见: Kotlin Coroutines不复杂, 我来帮你理一理 Kotlin协程通信机制: Channel ...

  6. CCNA 之 十二 Frame Relay 帧中继

    Fram Relay 帧中继 帧中继简介 VC.LMI.DLCI的概念 帧中继映射 Inverse-ARP的操作 帧中继配置 帧中继简介 分组交换广域网接入方式的一个代表,分组交换是以分组的形式在广域 ...

  7. java静态初始化块(静态域)

    1. 类变量的初始化可通过静态初始化块来进行. 代码放在一对大括号内,大括号前用static修饰:static {……} 一个类可定义1个或多个静态初始化块. 静态初始化块会在加载时调用而且只被调用一 ...

  8. css优先级 中文版MDN补充翻译

    原文地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity css的MDN中文版,这一页是讲css的优先级的. 读到文章的最后, ...

  9. 使用PaintCode便捷地实现动画效果

    // // ViewController.m // paintCodeTestOC //gif // Created by LongMa on 2019/7/25. // #import " ...

  10. OC循环方法推荐-块循环遍历(比for循环好用)

    最近在看一本书<Effective OC 2.0>,今天看到有个tip是OC适中循环各自优劣性,作者最终推荐此块循环. 阅读时思考了下块循环是否方便实现内部循环终止外部循环的问题. 于是做 ...