Vite 是一个面向现代浏览器的更轻、更快的 Web 应用开发工具，它基于 ECMAScript 标准原生模块系统（ES Modules）实现。它启动应用不需要像 webpack 那样先把整个项目编译打包一次，它是按需编译的，只有浏览器请求到模块的时候，才编译这个模块。热更新也是只重新编译当前修改的模块，webpack 会以这个模块为入口，把依赖也重新打包一次。

Vite 手写实现

  1. #!/usr/bin/env node
  2. const path = require('path')
  3. const { Readable } = require('stream')
  4. const Koa = require('koa')
  5. const send = require('koa-send')
  6. const compilerSFC = require('@vue/compiler-sfc')
  8. const app = new Koa()
  10. const streamToString = stream => new Promise((resolve, reject) => {
  11.   const chunks = []
  12.   stream.on('data', chunk => chunks.push(chunk))
  13.   stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
  14.   stream.on('error', reject)
  15. })
  17. const stringToStream = text => {
  18.   const stream = new Readable()
  19.   stream.push(text)
  20.   stream.push(null)
  21.   return stream
  22. }
  24. // 3. 加载第三方模块
  25. app.use(async (ctx, next) => {
  26.   // ctx.path --> /@modules/vue
  27.   if (ctx.path.startsWith('/@modules/')) {
  28.     const moduleName = ctx.path.substr(10)
  29.     const pkgPath = path.join(process.cwd(), 'node_modules', moduleName, 'package.json')
  30.     const pkg = require(pkgPath)
  31.     ctx.path = path.join('/node_modules', moduleName, pkg.module)
  32.   }
  33.   await next()
  34. })
  36. // 1. 静态文件服务器
  37. app.use(async (ctx, next) => {
  38.   await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })
  39.   await next()
  40. })
  42. // 4. 处理单文件组件
  43. app.use(async (ctx, next) => {
  44.   if (ctx.path.endsWith('.vue')) {
  45.     const contents = await streamToString(ctx.body)
  46.     const { descriptor } = compilerSFC.parse(contents)
  47.     let code
  48.     if (!ctx.query.type) {
  49.       code = descriptor.script.content
  50.       // console.log(code)
  51.       code = code.replace(/export\s+default\s+/g, 'const __script = ')
  52.       code += `
  53.       import { render as __render } from "${ctx.path}?type=template"
  54.       __script.render = __render
  55.       export default __script
  56.       `
  57.     } else if (ctx.query.type === 'template') {
  58.       const templateRender = compilerSFC.compileTemplate({ source: descriptor.template.content })
  59.       code = templateRender.code
  60.     }
  61.     ctx.type = 'application/javascript'
  62.     ctx.body = stringToStream(code)
  63.   }
  64.   await next()
  65. })
  67. // 2. 修改第三方模块的路径
  68. app.use(async (ctx, next) => {
  69.   if (ctx.type === 'application/javascript') {
  70.     const contents = await streamToString(ctx.body)
  71.     // import vue from 'vue'
  72.     // import App from './App.vue'
  73.     ctx.body = contents
  74.       .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
  75.       .replace(/process\.env\.NODE_ENV/g, '"development"')
  76.   }
  77. })
  79. app.listen(3000)
  80. console.log('Server running @ http://localhost:3000')