从源码分析出发，构建 bundleless 开发工程

Vite 简介

Vite 是基于浏览器元素 ES imports 的开发服务器，利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过“打包”的概念。--尤雨溪

Vite 在开发环境下没有打包和构建的过程，只有访问当前页面时，才去解析对应的依赖并加载资源。

Vite实现原理

• Vite利用浏览器原生支持ESM的特性，省略了对模块的打包过程，不需要生成bundle，因此项目启动快，HMR快。
• Vite开发模式下，启动koa服务器，在服务端完成模块的改写（如单文件的解析编译）和请求处理，实现真正的按需编译。
• Vite Server拦截请求后：
  1. 处理ESM语法
  2. 对.ts、.vue等文件进行即时编译
  3. 对Sass/Less等需要预编译的模块进行编译
  4. 和浏览器建立socket连接，实现HMR

Vite处理import方法

• 在koa中间件中获取请求path对应的body内容
• 通过es-module-lexer解析资源AST，并拿到import内容
• 如果import的资源是绝对路径，则认为该资源是npm模块，去node_modules中找到对应的npm库，返回内容。

serverPluginVue

对.vue文件请求进行处理，通过parseSFC方法解析单文件组件，并通过compileSFCMain方法将单文件组件拆分。

• 对于template，使用@vue-compiler-dom编译模板

• 对于style，调用compileSFCStyle方法编译组件样式，然后生成style标签插入到dom。

Vite HMR实现原理

• 通过watcher监听文件变动
• server端编译资源，并推送新模块内容到浏览器
• 浏览器收到新的模块内容，执行框架层面的rerender/reload