小狐狸学Vite（二、实现命令行+三、实现http服务器）

文章导航

一、核心知识

二、实现命令行+三、实现http服务器

二、实现命令行

1.package.json

  "bin": {
    "vite3": "./bin/vite3.js"
  }

2.\bin\vite3.js

#!/usr/bin/env node
require('../lib/cli')

3.lib\cli.js

console.log('vite3')

然后在命令行执行

npm link

然后在命令行运行 vite3

下面我们正式开始写代码，利用第一篇中的类库来实现vite中的功能。

三、实现http服务器

1.lib/server.js

const connect = require('connect')

async function createServer() {
  // connect 本事也可以最为 http 的中间件使用
  const middlewares = connect()

  // 构造一个用来创建服务的对象
  const server = {
    async listen(port) {
      require('http').createServer(middlewares)
        .listen(port, async () => {
          console.log(`开发环境启动成功请访问：http://localhost:${port}`)
        })
    }
  }
  return server
}

exports.createServer = createServer

1.lib/cli.js

在入口文件中执行创建http服务的代码

const { createServer } = require('./server');


(async function () {
  // 创建一个 http 服务器
  const server = await createServer()
  server.listen(8888)
})()

然后在命令行运行，

vite3

connect 实现原理

基本使用在上一节已经写过了，这块来写一下它的基本实现。我们先用http模块自己创建一个简单的服务，

const http = require('http')

const handle = function (req, res) {
  res.writeHead(200, { 'Content-type': 'text/plain' })
  res.end('hello')
}

const server = http.createServer(handle)
server.listen(3000)

接下来我们模仿用 connent创建的app来替换这个 handle函数。

const app = connect()
app.use('/', function (req, res, next) {
  console.log('中间件1执行')
  next()
})
app.use('/', function (req, res, next) {
  console.log('中间件2执行')
  next()
})
app.use('/', function (req, res, next) {
  console.log('中间件3执行')
  next()
})
app.use('/', function (req, res, next) {
  res.writeHead(200, { 'Content-type': 'text/plain' })
  res.end('hello')
})

const server = http.createServer(app)
server.listen(3000)


function connect() {
  // 声明 实例 app

  function app(req, res) {
    app.handle(req, res)
  }
  // 添加真正被调用的函数
  app.handle = function (req, res) {
    // 当有请求过来的时候，就会触发当前函数执行
    let index = 0;
    let queue = this.queue;
    function next() {
      // 从队列中取出之前添加的中间件
      let layer = queue[index++];
      if (!layer) return
      // 如果当前请求的路径和队列中取出的路径不相等，则执行执行下一个中间件，直到栈中的匹配完栈中所有的中间件  （递归）
      if (req.url !== layer.route) return next()
      // 如果匹配则调用用户传进来的中间件, 并且把 next 函数传递到中间件内部，用来决定是否执行下一个中间件
      layer.handle(req, res, next)
    }
    next()
  }
  // 用来存放中间件函数的队列
  app.queue = []
  // 调用 use 方法其实就是将 中间函数添加到上面的堆栈中去，等请求过来的时候再执行
  app.use = function (path, fn) {
    this.queue.push({ route: path, handle: fn })
  }
  return app
}

参考文章

yarn link 与 npm link 使用及原理

三面面试官：运行 npm run xxx 的时候发生了什么？

【vite 原理】connect 源码解读

点赞 👍

通过阅读本篇文章，如果有收获的话，可以点个赞，这将会成为我持续分享的动力，感谢～