P16：node实现静态服务器 ~ cli/发布

XguangY
432 阅读3分钟

相关文章

实现命令行功能

Cli(command-line interface)命令行界面,简单来说就是可以通过命令行快速生成自己的项目模板等功能(比较熟悉的是vue-cli脚手架这些), 为了方便开源使用，需要将上述编写的代码做成Cli工具.

修改 readme.md

里面先注释告诉用户又那些命令行的语句具体对应哪些功能

安装yargs

我们通过process.argv 可以, 解析命令行上的参数列表，但是这个有一个问题就是分析维护起来很麻烦

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

```
npm i yargs
```

新建 src/index.js

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()

改造src/app.js

// 创建一个server 实例
const server = http.createServer((rep, res) => {
  // 拿到路径
  const filePath = path.join(conf.root, rep.url)
  route(rep, res, filePath)
})

// 监听 server 实例

server.listen(conf.port, conf.hostname, () => {
  const addr = `http:// ${conf.hostname}:${conf.port}`

  console.info(`server startd at ${chalk.green(addr)}`)
})

升级为calss =>

class Server {
  constructor(config) {
    this.conf = Object.assign({}, conf, config)
  }
  start() {
    const server = http.createServer((req, res) => {
      // 拿到文件路径
      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

src/header/route.js

由于现在的配置来源改为用户自定义配置，所以我们需要取消route.js中的默认配置，由用户提供

由用户提供

package.json添加main选项

"main": "src/app.js",

这样编写完毕后，用户既可以当做cli 也可以直接使用server。模块分离的好处就体现了出来

初步体验

node src/index.js -p 8888
或者
node src/index.js --port=8888

自动打开页面

新建 header/openUrl.js

const { exec } = require('child_process') // node 自带模块

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

执行

node src/index.js -p 7777
或者
node src/index.js --port=7777

自动打开页面

将项目搭建为cli工具

  • package.json添加bin选项
"bin": { // 此项会将配置添加到系统命令行
    "node_anydoor": "bin/node_anydoor"
}
  • 创建bin/node_anydoor
#! /usr/bin/env node
require('../src/index')
  • 给文件添加可执行权限

开源项目如何优雅的使用版本号来标记项目进度

^10.0.3
10.0.3 // 这俩有啥区别呢

  • 介绍可读化版本号 a.b.c和 ^a.b.c

    • c 是修改的bug数量，一般初版习惯上会标记0.0.1或者0.1.0
    • b 是项目发布了b个新的功能，并且新功能是兼容的
    • a 是大版本更新，可以不兼容之前的代码
    • 1.2.* 和 ~1.2.0 代表安装1.2下最新的版本。当再次下载依赖会自动拉去1.2下的最新版本
    • 2.X 和 ^2.0.0 与上面类似，锁定大版

  • 发布到gitlab

    • 这时候需要把版本号升级为0.1.0
//登录
npm login

//推上去npm
npm publish

//全局安装
npm i -g 你的文件名

close

avatar
文章
阅读
粉丝