一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。
搭建静态web服务器
前言
关于Vite
- Vite 是一个面向现代浏览器的一个更轻、更快的 web 应用开发工具
- 它基于 ECMAScript 标准原生魔抗系统实现、
核心功能
- 静态 Web 服务器
- 编译单文件组件
- 拦截浏览器不能识别的模块，并处理
- HMR
模拟实现 静态 Web 服务器
我们首先要实现一个可以开启静态 Web 服务器的命令行工具，Vite 内部中使用的是 koa 来开启静态 web 服务器，这里我们也是用 koa 来进行实现
初始化
npm init // -- 初始化包
在初始化完毕项目之后
npm i koa
安装完毕后，我们还需要安装静态文件中间件
npm i koa-send
完成后，结果如下
1. 起步： 导入模块和实例化
#!/usr/bin/env node
// 配置运行node的位置
// 导入所需的koa模块
const Koa = require('koa')
const send = require('koa-send')
// 创建 实例 koa
const app = new Koa()
// 使用Koa开发静态web服务器，默认返回根目录下的 index.html
2. 访问静态页面
首先创建一个中间件，默认加载当前目录下，也就是运行该命令行目录中的 index.html
app.use(async (ctx, next) => {
/**
* @param ctx 当前上下文
* @param ctx.path 请求的路径
* @param 根目录
*/
await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })
// 接下来 让他运行其他的中间件
await next()
})
app.listen(3000)
console.log('Asever running @http://localhost:3000')
到这里我们的静态服务器就暂时写完了，接下来，让我们来测试一下
测试
我们在这个文件夹的命令行中输入如下
npm link
- 测试1 能否启动脚手架 这里我们使用，本地已经准备好的项目（vue3 项目）来进行测试。。。在该文件中输入
vite cli
我们可以看见，服务已经成功启动了
- 测试2 页面是否正常
接下来我们打开http://localhost:3000/来进行查看
我们可以看见，虽然页面上什么都没有，但是body中的标签输出都是ok的，页面空白是因为我们还有部分内容没有处理
- 测试3
console是否正常
这里我们发现了很多的报错，他告诉我们解析 Vue 模块的时候失败了，相对引用必须以“/”、“./”或“../”开头。
修复bug！
修复问题的最快方法就是发现问题，我们在控制台中，开启 netWork 找到 main.js 模块
这里虽然是导入了 Vue 但是他的路径没有 “/”、“./”或“../”，所以浏览器并不能识别，我们希望他可以去node_modules中加载Vue，这是打包根据应该做的事情。
借鉴！
我们去看看 Vite 中是怎么处理的
- 当请求一个模块的时候，我们需要把模块中的
import进行处理，我们让他加载一个不存在的路径，类似这里的/@modules/vue.js - 在响应头中，对
Content-type做了处理，设置成如下的值是为了告诉浏览器，我返回给你的是一个js文件，所以一会我们可以在 web 服务器输出之前，先判断一下返回的文件是否是 js 文件，如果是的话再来处理路径 - 处理路径，如下图，
/@modules/vue.js这个文件路径是不存在的，拿在服务器上要去处理这个请求去node_modules中加载Vue模块
思路整理完毕，但是因为篇幅有限，所以我们留到下一章再说
那么下一章，我们会进入 【第三方模块的路径修改 + 第三方模块加载】 章节
别走，点个赞吧！
