Vite的理解与手写一个Vite

在路由判断中处理.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

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

ctx.type = ‘application/javascript’

ctx.body = rewriteFileName(render)

}

}

})

function rewriteFileName(filename) {

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}'

}

})

}

function getFile(url) {

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

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

reslove(data)

})

})

}

app.listen(666, () => {

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）