Vite的理解与手写一个Vite(1)

• 开发阶段不需要打包,不管项目多大 速度都是最快的

当然除此之外vite还有做的就是会处理裸模块，就像import xx from 'vue' vue 这里没有给路径，所以是个裸模块，vite就会处理将这个路径改成node_modules里面或者是vite服务器里面的文件路径，还有就是在请求如app.vue这样文件的时候，将vue文件解析和转换成js文件返回给前端，就能正确的处理了。

手写一个Vite服务器

写之前我们需要知道两个库，这两个库在下载vue的时候就会一起下载的，分别是：

• @vue/compiler-sfc:用于解析vue文件中的script部分

• @vue/compiler-dom:用于解析vue文件中的 template 部分

处理裸模块

创建一个工具函数，方便复用. 主要就是为了处理裸模块，当遇到像 from ‘vue’ 这样的裸模块的时候，就重写一下路径

function rewriteFileName(filename) {

// 这个 filename 就是请求的 路径全称 如： import {createApp} from ‘vue’

return filename.replace(/ from '"['"]/g, (s1, s2) => {

// s1表示进入匹配的原字符 s2表示原子组的字符

if (s2.startsWith(‘/’) || s2.startsWith(‘./’) || s2.startsWith(‘…/’)) {

return s1

} else {

// 裸模块 就是像 vue 这样的模块 我们重新 然后让到 node_modules 里面去找

return from '/@modules/${s2}'

}

})

}

简单封装异步读文件方法

这里可以直接选择使用 fs.readFileSync 这个同步方法，但是文件如果比较大会造成阻塞，所以还是封装个异步方法比较好

const path = require(‘path’)

function getFile(url) {

return new Promise((reslove, reject) => {

fs.readFile(path.join(__dirname, url), ‘utf-8’, (err, data) => {

reslove(data)

})

})

}

在路由判断中处理.vue文件

.vue文件是是核心我们需要处理的地方，就需要用到前面提到的两个库了

if (url.indexOf(‘.vue’) > -1) {

// SFC 请求

// url 有可能是单纯的 .vue 也有可能是 .vue?type=xxx 带有查询参

let file = await getFile(url.split(‘?’)[0])

let ret = compilerSFC.parse(file)

if (!query.type) {

// 没有查询参

// 获取脚本部分的内容

let scriptContent = ret.descriptor.script.content

// 替换迷人导出为常量,方便日后修改

let script = scriptContent.replace('export default ', 'const __script = ')

ctx.type = ‘application/javascript’

ctx.body = `

${rewriteFileName(script)}

// 解析template

import {render as __render} from ‘${url}?type=template’

__script.render = __render

export default __script`

} else if (query.type === ‘template’) {

// 有查询参

const tpl = ret.descriptor.template.content

// console.log(‘tpllllllll’, tpl)

// console.log(compilerDOM.compile(tpl))

const render = compilerDOM.compile(tpl, { mode: ‘module’ }).code

ctx.type = ‘application/javascript’

ctx.body = rewriteFileName(render)

}

}

完整代码

const koa = require(‘koa’)

const fs = require(‘fs’)

const path = require(‘path’)

const compilerSFC = require(‘@vue/compiler-sfc’) // 用于解析 vue文件的 script 部分

const compilerDOM = require(‘@vue/compiler-dom’) // 用于接续 vue文件中的 template 部分

const app = new koa()

app.use(async ctx => {

const { url, query } = ctx.request

if (url === ‘/’) {

// 处理的是首页

let res = await getFile(‘./index.html’)

// console.log(res)

ctx.type = ‘text/html’

ctx.body = res

} else if (url.endsWith(‘.js’)) {

// 以js文件结尾 处理js文件加载

ctx.type = ‘application/javascript’

let res = await getFile(url)

ctx.body = rewriteFileName(res)

} else if (url.startsWith(‘/@modules/’)) {

// 裸模块架子啊处

let modeName = url.replace(‘/@modules/’, ‘’) // 重新获取裸模块名字 如 vue

let search = path.join(__dirname, ‘…/…/…/node_modules’, modeName)

let suffix = require(path.join(search, ‘/package.json’)).module

ctx.type = ‘application/javascript’

let files = fs.readFileSync(path.join(search, suffix), ‘utf8’)

ctx.body = rewriteFileName(files)

} else if (url.indexOf(‘.vue’) > -1) {

// SFC 请求

// url 有可能是单纯的 .vue 也有可能是 .vue?type=xxx 带有查询参

let file = await getFile(url.split(‘?’)[0])

let ret = compilerSFC.parse(file)

if (!query.type) {

// 没有查询参

// 获取脚本部分的内容

let scriptContent = ret.descriptor.script.content

// 替换迷人导出为常量,方便日后修改

let script = scriptContent.replace('export default ', 'const __script = ')

ctx.type = ‘application/javascript’

ctx.body = `

${rewriteFileName(script)}

// 解析template

import {render as __render} from ‘${url}?type=template’

__script.render = __render

export default __script

`

console.log(compilerSFC.parse(file))

} else if (query.type === ‘template’) {

// 有查询参

const tpl = ret.descriptor.template.content

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。