vite大致原理

• 流程如下

  • 基于koa,提供静态资源服务
  • 当访问http://localhost:3000/index.html
  • 所以会返回对应的资源，index.html
  • index.html里的script然后会请求对应的js资源
  • 假如是main.ts(ps：所有的code都是基于es module)http://localhost:3000/main.ts
  • koa收到请求就去读取main.ts，然后基于一些ast第三方库，检查main.ts里的code，
  • 把import xxx from 'vue',这种不是以/ ./开头的改写成一个新的路径(换言之就是第三方包). eg：import xxx from '/node_modulse/vue/dist/vue.es.bundle.js'
  • 当然，前缀不一定是/node_modulse，这里只是为了好理解，举例映射我们自己的项目目录结构。(如有必要还会做一些转换，比如请求的vue文件，那就要使用@vue/compiler-sfc转)
  • 替换完成后返回给浏览器，浏览器拿到响应后会执行里面的js，然后遇到import xxx from '/node_modulse/vue/dist/vue.es.bundle.js'，又会发请求http://localhost:3000/node_modulse/vue/dist/vue.es.bundle.js
  • 以此类推

lerna

• 时尚就是个轮回，又流行把多个项目放一个仓库里了

额外的

• magic-string好使
• vite插件实际上就是koa中间件，可以结合babel等转换源代码，也可以干些别的
• vscode debugg command config

{
      "type": "node",
      "request": "launch",
      "name": "npm run dev",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "port": 9229,
      //跟进子进程
      "autoAttachChildProcesses": true,
      "stopOnEntry": true,
      "skipFiles": ["<node_internals>/**"]
    }