この記事では、Viteがブラウザのリクエストに対して何を行うかを説明します。

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

//依存関係を導入する const Koa = require('koa')
const アプリ = 新しい Koa()
定数 fs = require('fs')
定数パス = require('path')
const コンパイラ Sfc = require('@vue/compiler-sfc')
const コンパイラ Dom = require('@vue/compiler-dom')

app.use(async (ctx) => {
 const { url, クエリ } = ctx.request
 //リクエストリソースを処理するためのすべてのコードをここに記述します})
app.listen(3001, () => {
  console.log('dyVite スタート!!')
})

 （url === '/'）の場合{
    const p = path.join(__dirname, './index.html') // 絶対パス // ホームページ ctx.type = 'text/html'
    ctx.body = fs.readFileSync(p, 'utf8')
  }

コンソール.log(1)

そうでない場合 (url.endsWith('.js')) {
   // js リクエストに応答する const p = path.join(__dirname, url)
   ctx.type = 'テキスト/javascript'
   ctx.body = rewriteImport(fs.readFileSync(p, 'utf8')) // 依存関数の処理}

'vue' から {createApp, h} をインポートします。
createApp({ render: () => h('div', 'hello dyVite!') }).mount('#app')

// 読み取り可能なファイル アドレスを相対アドレスに変換します // 通常の置換では、インポートを相対アドレスに書き換えます // import { createApp } from 'vue' => import { createApp } from '/@modules/vue'
関数 rewriteImport(コンテンツ) {
  戻り値 content.replace(/ from ['|"](.*)['|"]/g, function (s0, s1) {
    // s0 は文字列に一致し、s1 はコンテンツをグループ化します // 相対パスかどうか if (s1.startsWith('./') || s1.startsWith('/') || s1.startsWith('../')) {
      // 直接 return s0 に戻る
    } それ以外 {
      `from '/@modules/${s1}'` を返します
    }
  })
}

  そうでない場合 (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 = 'テキスト/javascript'
    ctx.body = rewriteImport(ret) //依存関係の中に依存関係がある可能性があるため、再帰が必要です}

  <スクリプト>
   window.process = { env: { NODE_ENV: 'dev' } }
  </スクリプト>

'vue' から {createApp, h} をインポートします。
'./App.vue' からアプリをインポートします。
createApp(App).mount('#app')

そうでない場合 (url.indexOf('.vue') > -1) {
    // vue ファイル App.vue?vue&type=style&index=0&lang.css を処理する
    // vue コンテンツを読み取る const p = path.join(__dirname, url.split('?')[0])
    // コンパイラSfcはsfcを解析してastを取得します
    const ret = コンパイラSfc.parse(fs.readFileSync(p, 'utf8'))
    // App.vue?type=テンプレート
    // リクエストにquery.typeがない場合、それはsfcであることを意味します
    if (!クエリ.type) {
      // 内部スクリプトを処理する
      定数scriptContent = ret.descriptor.script.content
      // デフォルトのエクスポート構成オブジェクトを定数に変換する const script = scriptContent.replace(
        'エクスポートデフォルト'、
        'const __script = ',
      ）
      ctx.type = 'テキスト/javascript'
      ctx.body = `
  ${rewriteImport(スクリプト)}
  // テンプレート解析はリソースの別のリクエストに変換されます import {render as __render} from '${url}?type=template'
  __script.render = __render
  デフォルトの__scriptをエクスポートする
`
    } そうでない場合 (query.type === 'テンプレート') {
      const tpl = ret.descriptor.template.content
      // レンダリングモジュールを含めてコンパイル const render =compilerDom.compile(tpl, { mode: 'module' }).code
      ctx.type = 'テキスト/javascript'
      ctx.body = rewriteImport(レンダリング)
    }
  }

 そうでない場合 (url.endsWith('.png')) {
   ctx.body = fs.readFileSync('src' + url)
  }