vite 按需编译

1、vite不同于webpack，不会将文件打包，而是按需实时加载
2、我们在index.html中设置，这样浏览器就会向服务器发送get请求来加载main.js，如果main中含有import，则会再次发送请求获取文件。
3、vite的作用就是劫持浏览器的这些请求，在服务端进行处理，将文件进行简单的分解整合，再返回给浏览器。

4、下面我们就来写一个服务，实现对文件的实时读取与解析

// 实现一个node服务器，处理浏览器的各种资源请求
// index.html
// .js
// .vue

const Koa = require('koa')
const fs = require('fs')
const path = require('path')
const compilerSFC = require('@vue/compiler-sfc')
const compilerDOM = require('@vue/compiler-dom')

const app = new Koa()

app.use(ctx => {
  const { url, query } = ctx.request
  if (url === '/') {
    // return index.html
    ctx.type = 'text/html'
    ctx.body = fs.readFileSync('./index.html', 'utf8')
  } else if (url.endsWith('.js')) {
    // handle .js file
    const p = path.join(__dirname, url)
    // console.log(p)
    ctx.type = 'application/javascript'
    ctx.body = rewriteImport(fs.readFileSync(p, 'utf8'))
  } else if (url.startsWith('/node_modules/')) {
    // get module name such as vue
    const moduleName = url.replace('/node_modules/', '')
    // find module name in node_modules
    const prefix = path.join(__dirname, '../node_modules', moduleName)
    // find "modeule" in package.json such as dist/vue.runtime.esm-bundler.js
    const module = require(prefix + '/package.json').module
    // join file address
    const filePath = path.join(prefix, module)
    // read file
    const result = fs.readFileSync(filePath, 'utf8')
    ctx.type = 'application/javascript'
    ctx.body = rewriteImport(result)
  } else if (url.indexOf('.vue') > -1) {
    // handle sfc
    // read file .vue, parse the file as type js
    const p = path.join(__dirname, url.split('?')[0])
    // get ast
    const result = compilerSFC.parse(fs.readFileSync(p, 'utf8'))
    console.log(result)
    if (!query.type) {
      // get javascript content
      const scriptContent = result.descriptor.script.content
      // replace "export default" to "const __script"
      const script = scriptContent.replace('export default', 'const __script = ')
      ctx.type = 'application/javascript'
      ctx.body = `
        ${rewriteImport(script)}
        // parse template
        import { render as __render } from '${url}?type=template'
        __script.render = __render
        export default __script
      `
    } else if (query.type === 'template') {
      const tpl = result.descriptor.template.content
      console.log(tpl)
      const render = compilerDOM.compile(tpl, { mode: 'module' }).code
      ctx.type = 'application/javascript'
      ctx.body = rewriteImport(render)
    }
  }
})

// rewrite address, handle module import
// import Vue from 'vue'
// import Vue from '/node_modules/vue'
function rewriteImport(content) {
  return content.replace(/ from ['"](.*)['"]/g, function (s1, s2) {
    // console.log(s2)
    // console.log(s1)
    if (s2.startsWith('/') || s2.startsWith('./') || s2.startsWith('../')) {
      return s1
    } else {
      // module need replace
      return ` from '/node_modules/${s2}'`
    }
  })
}

app.listen(3000, () => {
  console.log('server is starting at port 3000...')
})

以上就是我对vite解析加载文件的个人理解，欢迎指正。