前言
接上篇文章，我们了解到vite的本地构建原理主要是：启动一个 connect 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一下编译最终以 ESM的格式返回给浏览器。
基于这个核心思想，我们可以尝试来动手实现一下。
搭建静态服务器
基于koa搭建一个项目：
项目结构如上，服务使用koa搭建，bin指定cli可执行文件的位置
#!/usr/bin/env node
// 代表该脚本使用node执行
const koa = require('koa');
const send = require('koa-send');
const App = new koa()
App.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
这样一个服务就搭建好了，为了方便调试，我们在该工作目录下执行npm link，这样可以将该项目链接支全局的npm，相当于全局安装了这个npm包。
接着我们在任意项目下执行my-vite就能够启动该服务了！
处理根目录html文件
由于上面服务我们没有对任何路由进行处理，当访问http://localhost:3000会发现什么也没有，我门首先需要将项目的模版文件index.html返回给浏览器
const root = process.cwd(); // 获取当前工作目录
console.log('当前工作目录：', process.cwd());
// 静态文件服务区
App.use(async (ctx, next) => {
// 处理根路径，返回index.html
await send(ctx, ctx.path, { root: process.cwd() ,index: 'index.html'});
await next();
});
index.html模版文件如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script>
window.process = { env: { NODE_ENV: 'development' } };
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
就是以ESM的方式加载了vue的入口文件main.ts
加完这段代码，我们在vue3项目下执行一下my-vite
来到浏览器看一下此时的情况：
此时浏览器加载了main.ts，该文件如下：它通过import引入了两个模块
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
按理来说，浏览器此时应该会接着发起请求，去获取这两个模块，但现在却并没有
标签：style,const,ctx,构建,模块,path,手写,Vite,加载 From： https://www.cnblogs.com/songyao666/p/18328452