浅谈vite

在开发环境并不做打包，采用es6 中的module进行引入；具体它是怎么做？ please continue to look down~~~ 编译服务、esbild预购建、rollup打包。

npm run dev

vite会跑一个开发服务；

const {createServer} = await import('./server');
try {
    const server = await createServer({
        root,
        base: options.base,
        mode: options.mode,
        configFile: options.config,
        logLevel: options.logLevel,
        clearScreen: options.clearScreen,
        optimizeDeps: options.optimizeDeps,
        server: options.server,
        ...other
    });
    if (!server.httpServer) {
      throw new Error('httpServer is not defined');
    }
    await server.listen();
}

请求html时候，会通过ast遍历，找到所有的script,提前对这些文件做编译（css插件 esbuild插件）

esbuild js打包工具，支持如babel 压缩等功能，特点快（底层是go）

export async function traverseHtml(html, filePath,visitor) {
  const {parse} = await import('parse5');
  const ast = parse(html, {
    scriptingEnabled: false,
    sourceCodeLocationInfo: true,
    onParseError(err) {
      console.error(err)
      handleParseError(err, html, filePath)
    }
  })
  traverseNodes(ast, visitor)
}

import { transformWithEsbuild } from "node:module"
transform(code, id) {
  if (filter(id) || filter(cleanUrl(id))) {
    const result =  await transformWithEsbuild(code, id, transformOptions);
    if(result.warning.length) {
      result.warning.forEach(m => {
        this.warn(prettifyMessage(m, code))
      });
    }
    if (jsxInject && jsxExtensionsRE.test(id)) {
      result.code = jsxInject +';'+ result.code;
    }
    return {
      code: result.code,
      map: result.map
    }
  }
}

tip: 如果node_modules依赖又commonjs模块规范代码？  需要提前做一些转换，把commonjs转esm.

vite加来一个预构建功能 pre bunle. 在启动开发服务器，马上对node_modules代码做打包，也叫依赖优化。从每个依赖包作为入口打包，输出 esm 格式的模块到 node_modules/.vite 下。

之后还会生成一个 _metadata.json 文件写入 node_modules/.vite 下，为了做强缓存；

 

 vite  query 字符串带上 hash，然后用 max-age 强缓存；除非lock文件变化或者config变化需要重新build,请求资源会带上新的query 强缓存失效；

vite热更新：基于chokidar监听本地文件变动；然后在模块变动的时候通过websocket通知浏览器端；

 npm run build:

vite插件兼容rollup插件，可以用同样的插件对代码做transform处理；