小狐狸学Vite（四、实现静态文件中间件）

文章导航

一、核心知识

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

四、实现静态文件中间件

1.使用静态文件中间件

\lib\server\middlewares\static.js

// 使用静态文件中间件
const static = require('serve-static')

/**
 * 
 * @param {*} param0 从配置文件中结构出传入的项目根目录
 * @returns 
 */
function serveStaticMiddleWare({ root }) {
  return static(root)
}

module.exports = serveStaticMiddleWare

在创建http服务的时候使用这个中间件，来映射项目根目录。

const connect = require('connect')
+ const resolveConfig = require('../config')
+ const serveStaticMiddleWare = require('./middlewares/static')

async function createServer() {
  // connect 本事也可以最为 http 的中间件使用
  const middlewares = connect()
+   const config = await resolveConfig()
  // 构造一个用来创建服务的对象
  const server = {
    async listen(port) {
      require('http').createServer(middlewares)
        .listen(port, async () => {
          console.log(`开发环境启动成功请访问：http://localhost:${port}`)
        })
    }
  }
+   middlewares.use(serveStaticMiddleWare(config))
  return server
}

exports.createServer = createServer

2.读取配置文件

lib\config.js

const { normalizePath } = require("./utils")

async function resolveConfig() {
  // 获取当前进程执行的目录
  let root = normalizePath(process.cwd())
  let config = {
    root
  }
  return config
}

module.exports = resolveConfig

lib\utils.js

/**
 * 将路径中的反斜杠统一替换成 /
 * @param {*} id 文件路径 
 * @returns 
 */
function normalizePath(id) {
  return id.replace(/\\/g, '/')
}

exports.normalizePath = normalizePath

当前的文件目录如下。

├── bin
│   └── vite3.js
├── lib
│   ├── server
│   ├── cli.js
│   ├── config.js
│   └── utils.js
├── public
│   └── index.html
├── src
│   └── demo
├── use-vite3
│   ├── src
│   ├── index.html
│   └── package.json
├── package.json
└── yarn.lock

windows下面使用 下面这个npm包来获取当前项目目录树，自带的命令行工具不太好用。

npm install -g tree-node-cli

treee -L 2 -I "node_modules|.idea|objects|.git|.history" -a --dirs-first  

// dirs-first 的意思是目录在前，文件在后（默认是字母排序）
// -a 显示所有文件
// I 忽略的文件夹
// L 显示文件夹的深度

1.用vite3命令启动项目

前面我们使用yarn link在全局创建了一个vite3的命令，下面我们新建一个项目使用，在新的项目下面使用它来试着启动当前的项目

src\mian.js

console.log('main')

cd .\use-vite3\
然后执行
vite3

接下来，就会使用 esbuild 从入口文件开始分析项目依赖了那些文件、第三方模块等。

参考文章

tree-node

点赞 👍

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