<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
 // 處理請(qǐng)求資源代碼都寫這
})
app.listen(3001, () => {
  console.log('dyVite start!!')
})

 if (url === '/') {
    const p = path.join(__dirname, './index.html') // 絕對(duì)路徑
    //  首頁
    ctx.type = 'text/html'
    ctx.body = fs.readFileSync(p, 'utf8')
  }

console.log(1)

else if (url.endsWith('.js')) {
 ? ?// 響應(yīng)js請(qǐng)求
 ? ?const p = path.join(__dirname, url)
 ? ?ctx.type = 'text/javascript'
 ? ?ctx.body = rewriteImport(fs.readFileSync(p, 'utf8')) // 處理依賴函數(shù)
  }

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

// 把能讀出來的文件地址變成相對(duì)地址
// 正則替換 重寫導(dǎo)入 變成相對(duì)地址
// import { createApp } from 'vue'  => import { createApp } from '/@modules/vue'
function rewriteImport(content) {
  return content.replace(/ from ['|"](.*)['|"]/g, function (s0, s1) {
    //  s0匹配字符串，s1分組內(nèi)容
    // 是否是相對(duì)路徑
    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) // 拿到文件加載的地址
    // 讀取相關(guān)依賴
    const ret = fs.readFileSync(filePath, 'utf8')
    ctx.type = 'text/javascript'
    ctx.body = rewriteImport(ret) //依賴內(nèi)部可能還存在依賴，需要遞歸
  }

 ?<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內(nèi)容
    const p = path.join(__dirname, url.split('?')[0])
    // compilerSfc解析sfc  獲得ast
    const ret = compilerSfc.parse(fs.readFileSync(p, 'utf8'))
    // App.vue?type=template
    // 如果請(qǐng)求沒有query.type 說明是sfc
    if (!query.type) {
      // 處理內(nèi)部的script
      const scriptContent = ret.descriptor.script.content
      // 將默認(rèn)導(dǎo)出配置對(duì)象轉(zhuǎn)為常量
      const script = scriptContent.replace(
        'export default ',
        'const __script = ',
      )
      ctx.type = 'text/javascript'
      ctx.body = `
  ${rewriteImport(script)}
  // template解析轉(zhuǎn)換為單獨(dú)請(qǐng)求一個(gè)資源
  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)
  }