vite原理小记

先说下vite做的两件事情

1.对裸模块的地址替换

对第三发模块进行预打包 裸模块地址替换成相对地址

import {createApp} from 'vue'

import { createApp } from '/node_modules/.vite/vue.js?v=6dc16afe'

function rewriteImport(context){
    console.log(
        context.replace(/ from ['"](.*)['"]/g,function(s1,s2){
            if(s2.startsWith('./') || s2.startsWith('../') || s2.startsWith('/')){
                return s1;
            }else{
                return ` from '@modules/${s2}'`
            }
        })
    )
}

console.log(rewriteImport("import {createApp} from 'vue'"));

然后再kvite 开启的koa上 监听请求 if(url.startsWith('/@modules/')){

找到绝对路径的moudles

然后通过模块命找到模块文件夹

读取package.json的module(里面是模块输出的相对路径)

然后返回真正模块的js（绝对路径前缀 + module路径）

}

2.对vue文件的替换成js,不打包那怎么让浏览器解析vue呢？

if(url.indexOf(.vue)>-1){

SFC请求 读取vue文件解析js

}

SFC

我们平时写的 .vue 文件称为 SFC(Single File Components)。vue 会先对 .vue 文件进行解析，分成 template、script、styles、customBlocks 四个部分，称为 descriptor。之后，再对这四个部分分别进行编译最终得到可以在浏览器中执行的 .js 文件。本文介绍将 SFC 解析为 descriptor 这一过程。

SFCDescriptor，是表示 .vue 各个代码块的对象，为以下数据格式：

// an object format describing a single-file component. declare type SFCDescriptor = { template: ?SFCBlock; script: ?SFCBlock; styles: Array; customBlocks: Array; }; vue 提供了一个 compiler.parseComponent(file, [options])方法，来将 .vue 文件解析成一个 SFCDescriptor。

render做的根据vue的模板生成vnode