一文带你了解vite对浏览器的请求做了什么

目录

• 工作原理：
• 浏览器做的什么事啊

• 宿主文件index.html
• main.js
• 其他裸模块

• 请求首页index.html
• 请求以.js结尾的文件

• 基础js文件
• 对main中的依赖进行处理
• 处理.vue文件

<script type="module" src="/src/main.js"></script>

// 引入依赖
const Koa = require('koa')
const app = new Koa()
const fs = require('fs')
const path = require('path')
const compilerSfc = require('@vue/compiler-sfc')
const compilerDom = require('@vue/compiler-dom')
app.use(async (ctx) => {
 const { url, query } = ctx.request
 // 处理请求资源代码都写这
})
app.listen(3001, () => {
  console.log('dyVite start!!')
})

 if (url === '/') {
    const p = path.join(__dirname, './index.html') // 绝对路径
    //  首页
    ctx.type = 'text/html'
    ctx.body = fs.readFileSync(p, 'utf8')
  }

console.log(1)

else if (url.endsWith('.js')) {
    // 响应js请求
    const p = path.join(__dirname, url)
    ctx.type = 'text/javascript'
    ctx.body = rewriteImport(fs.readFileSync(p, 'utf8')) // 处理依赖函数
  }

import { createApp, h } from 'vue'
createApp({ render: () => h('div', 'helllo dyVite!') }).mount('#app')

// 把能读出来的文件地址变成相对地址
// 正则替换 重写导入 变成相对地址
// import { createApp } from 'vue'  => import { createApp } from '/@modules/vue'
function rewriteImport(content) {
  return content.replace(/ from ['|"](.*)['|"]/g, function (s0, s1) {
    //  s0匹配字符串，s1分组内容
    // 是否是相对路径
    if (s1.startsWith('./') || s1.startsWith('/') || s1.startsWith('../')) {
      // 直接返回
      return s0
    } else {
      return ` from '/@modules/${s1}'`
    }
  })
}

  else if (url.startsWith('/@modules/')) {
    // 裸模块的加载
    const moduleName = url.replace('/@modules/', '')
    const pre![1637477009328](imgs/1637477009328.png)![1637477009368](imgs/1637477009368.png)的地址
    const module = require(prefix + '/package.json').module
    const filePath = path.join(prefix, module) // 拿到文件加载的地址
    // 读取相关依赖
    const ret = fs.readFileSync(filePath, 'utf8')
    ctx.type = 'text/javascript'
    ctx.body = rewriteImport(ret) //依赖内部可能还存在依赖，需要递归
  }

  <script>
    window.process = { env: { NODE_ENV: 'dev' } }
  </script>

import { createApp, h } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

else if (url.indexOf('.vue') > -1) {
    // 处理vue文件  App.vue?vue&type=style&index=0&lang.css
    // 读取vue内容
    const p = path.join(__dirname, url.split('?')[0])
    // compilerSfc解析sfc  获得ast
    const ret = compilerSfc.parse(fs.readFileSync(p, 'utf8'))
    // App.vue?type=template
    // 如果请求没有query.type 说明是sfc
    if (!query.type) {
      // 处理内部的script
      const scriptContent = ret.descriptor.script.content
      // 将默认导出配置对象转为常量
      const script = scriptContent.replace(
        'export default ',
        'const __script = ',
      )
      ctx.type = 'text/javascript'
      ctx.body = `
  ${rewriteImport(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
      // 编译包含render模块
      const render = compilerDom.compile(tpl, { mode: 'module' }).code
      ctx.type = 'text/javascript'
      ctx.body = rewriteImport(render)
    }
  }

 else if (url.endsWith('.png')) {
    ctx.body = fs.readFileSync('src' + url)
  }