源码学习目录

1. 前言

1.1 环境

  1. 操作系统: macOS 11.5.2
  2. 浏览器: Chrome 94.0.4606.81
  3. vite 2.7.1

    1.2 阅读该文章可以get以下知识点

  • 学会 vite 简单原理

    2. 开始

    2.1 项目结构

    image.png

    2.1.1 monorepo管理方式

    从上图可以看出,这是一个monorepo项目,单仓库多包管理
    使用 pnpm 作为包管理工具,pnpm天生支持workspae,可以不需要再使用 lerna 来管理仓库了
    packages文件夹下面的每一个文件夹都是一个npm包
    playground文件夹比较特殊,里面的每个文件夹又是一个独立的npm包

    2.1.2 scripts run-s

    在dependencies找了一圈,没发现有run-s这个包,不过看到了 npm-run-all,之前有看过这个包,知道是执行多脚本的,因此在node_modules下面查看了该包的bin文件夹,发现有run-s,run-p,npm-run-all等三个脚本文件夹,恍然大悟,就是run-s就是 npm-run-all的一个bin执行文件
    image.png

    2.2 packages/vite 执行文件bin/vite.js

    ```javascript

    !/usr/bin/env node

    // node里面的性能api const { performance } = require(‘perf_hooks’) // 如果没有node_modules if (!dirname.includes(‘node_modules’)) { try { // only available as dev dependency, 使用source-map加载 require(‘source-map-support’).install() } catch (e) {} } // 全局添加参数 global.vite_start_time = performance.now()

// check debug mode first before requiring the CLI. // 找到参数是-d | —debug,另一种写法,没使用minimist来处理参数 (?:pattern) 非获取匹配 const debugIndex = process.argv.findIndex((arg) => /^(?:-d|—debug)$/.test(arg)) const filterIndex = process.argv.findIndex((arg) => /^(?:-f|—filter)$/.test(arg) ) const profileIndex = process.argv.indexOf(‘—profile’)

if (debugIndex > 0) { // 获取参数的值这里应该是用空格做分割,如 —debug xxx let value = process.argv[debugIndex + 1] // 如果不存在,或者以-开头,说明没有参数值 if (!value || value.startsWith(‘-‘)) { // 默认设置vite: value = ‘vite:‘ } else { // support debugging multiple flags with comma-separated list // 如果有多个包用逗号分隔,批量添加vite:x,vite:z value = value .split(‘,’) .map((v) => vite:${v}) .join(‘,’) } // 添加环境变量DEBUG,可以在全局用 process.env.DEBUG = value

if (filterIndex > 0) { // 过滤的值 const filter = process.argv[filterIndex + 1] if (filter && !filter.startsWith(‘-‘)) { // 这里没做处理,直接放入环境变量,全局变量可以放入环境变量中 process.env.VITE_DEBUG_FILTER = filter } } }

function start() { // 执行dist/node/cli require(‘../dist/node/cli’) } // 这个是开启分析 if (profileIndex > 0) { // 从argv中删除参数 process.argv.splice(profileIndex, 1) // 拿到—profile后面一个值 const next = process.argv[profileIndex] if (next && !next.startsWith(‘-‘)) { // 从参数中删除 process.argv.splice(profileIndex, 1) } // node调试api,可以接入到chrome const inspector = require(‘inspector’) // 放入到global全局, const session = (global.__vite_profile_session = new inspector.Session()) session.connect() session.post(‘Profiler.enable’, () => { session.post(‘Profiler.start’, start) }) } else { start() }

  1. <a name="FA8Lf"></a>
  2. ## 2.3 vite src/node/cli.ts
  3. ```typescript
  4. // cli工具
  5. import { cac } from 'cac'
  6. // log输出带颜色
  7. import chalk from 'chalk'
  8. // 性能工具
  9. import { performance } from 'perf_hooks'
  10. // 打包配置
  11. import { BuildOptions } from './build'
  12. // 服务配置
  13. import { ServerOptions } from './server'
  14. // 日志和等级
  15. import { createLogger, LogLevel } from './logger'
  16. // 解析配置
  17. import { resolveConfig } from '.'
  18. import { preview } from './preview'
  20. const cli = cac('vite')
  22. // global options 全局配置
  23. interface GlobalCLIOptions {
  24.   '--'?: string[]
  25.   c?: boolean | string
  26.   config?: string
  27.   base?: string
  28.   l?: LogLevel
  29.   logLevel?: LogLevel
  30.   clearScreen?: boolean
  31.   d?: boolean | string
  32.   debug?: boolean | string
  33.   f?: string
  34.   filter?: string
  35.   m?: string
  36.   mode?: string
  37. }
  39. /**
  40.  * removing global flags before passing as command specific sub-configs
  41.  */
  42. function cleanOptions<Options extends GlobalCLIOptions>(
  43.   options: Options
  44. ): Omit<Options, keyof GlobalCLIOptions> {
  45.   const ret = { ...options }
  46.   delete ret['--']
  47.   delete ret.c
  48.   delete ret.config
  49.   delete ret.base
  50.   delete ret.l
  51.   delete ret.logLevel
  52.   delete ret.clearScreen
  53.   delete ret.d
  54.   delete ret.debug
  55.   delete ret.f
  56.   delete ret.filter
  57.   delete ret.m
  58.   delete ret.mode
  59.   return ret
  60. }
  62. // 基础配置说明 cli.option都是用来做help说明的
  63. cli
  64.   .option('-c, --config <file>', `[string] use specified config file`)
  65.   .option('--base <path>', `[string] public base path (default: /)`)
  66.   .option('-l, --logLevel <level>', `[string] info | warn | error | silent`)
  67.   .option('--clearScreen', `[boolean] allow/disable clear screen when logging`)
  68.   .option('-d, --debug [feat]', `[string | boolean] show debug logs`)
  69.   .option('-f, --filter <filter>', `[string] filter debug logs`)
  70.   .option('-m, --mode <mode>', `[string] set env mode`)
  72. // dev
  73. // 执行cli serve 和 dev就会匹配到执行里面的action
  74. cli
  75.   .command('[root]') // default command,如果不输入命令,直接执行这个
  76.   .alias('serve') // the command is called 'serve' in Vite's API
  77.   .alias('dev') // alias to align with the script name
  78.   .option('--host [host]', `[string] specify hostname`)
  79.   .option('--port <port>', `[number] specify port`)
  80.   .option('--https', `[boolean] use TLS + HTTP/2`)
  81.   .option('--open [path]', `[boolean | string] open browser on startup`)
  82.   .option('--cors', `[boolean] enable CORS`)
  83.   .option('--strictPort', `[boolean] exit if specified port is already in use`)
  84.   .option(
  85.     '--force',
  86.     `[boolean] force the optimizer to ignore the cache and re-bundle`
  87.   )
  88.   .action(async (root: string, options: ServerOptions & GlobalCLIOptions) => {
  89.     // output structure is preserved even after bundling so require()
  90.     // is ok here 在代码里面使用import
  91.     const { createServer } = await import('./server')
  92.     try {
  93.       // 创建server对象
  94.       const server = await createServer({
  95.         root,
  96.         base: options.base,
  97.         mode: options.mode,
  98.         configFile: options.config,
  99.         logLevel: options.logLevel,
  100.         clearScreen: options.clearScreen,
  101.         server: cleanOptions(options)
  102.       })
  104.       if (!server.httpServer) {
  105.         throw new Error('HTTP server not available')
  106.       }
  108.       await server.listen()
  110.       const info = server.config.logger.info
  112.       info(
  113.         chalk.cyan(`\n  vite v${require('vite/package.json').version}`) +
  114.           chalk.green(` dev server running at:\n`),
  115.         {
  116.           clear: !server.config.logger.hasWarned
  117.         }
  118.       )
  120.       server.printUrls()
  122.       // @ts-ignore 性能监控的内容,这个值从bin/vite.js中设置的,用来获取开启服务的事件
  123.       if (global.__vite_start_time) {
  124.         // @ts-ignore
  125.         const startupDuration = performance.now() - global.__vite_start_time
  126.         info(`\n  ${chalk.cyan(`ready in ${Math.ceil(startupDuration)}ms.`)}\n`)
  127.       }
  128.     } catch (e) {
  129.       createLogger(options.logLevel).error(
  130.         chalk.red(`error when starting dev server:\n${e.stack}`),
  131.         { error: e }
  132.       )
  133.       process.exit(1)
  134.     }
  135.   })
  137. // build
  138. // 打包相关的
  139. cli
  140.   .command('build [root]')
  141.   .option('--target <target>', `[string] transpile target (default: 'modules')`)
  142.   .option('--outDir <dir>', `[string] output directory (default: dist)`)
  143.   .option(
  144.     '--assetsDir <dir>',
  145.     `[string] directory under outDir to place assets in (default: _assets)`
  146.   )
  147.   .option(
  148.     '--assetsInlineLimit <number>',
  149.     `[number] static asset base64 inline threshold in bytes (default: 4096)`
  150.   )
  151.   .option(
  152.     '--ssr [entry]',
  153.     `[string] build specified entry for server-side rendering`
  154.   )
  155.   .option(
  156.     '--sourcemap',
  157.     `[boolean] output source maps for build (default: false)`
  158.   )
  159.   .option(
  160.     '--minify [minifier]',
  161.     `[boolean | "terser" | "esbuild"] enable/disable minification, ` +
  162.       `or specify minifier to use (default: esbuild)`
  163.   )
  164.   .option('--manifest', `[boolean] emit build manifest json`)
  165.   .option('--ssrManifest', `[boolean] emit ssr manifest json`)
  166.   .option(
  167.     '--emptyOutDir',
  168.     `[boolean] force empty outDir when it's outside of root`
  169.   )
  170.   .option('-w, --watch', `[boolean] rebuilds when modules have changed on disk`)
  171.   .action(async (root: string, options: BuildOptions & GlobalCLIOptions) => {
  172.         // 调用build函数
  173.     const { build } = await import('./build')
  174.     const buildOptions: BuildOptions = cleanOptions(options)
  176.     try {
  177.       await build({
  178.         root,
  179.         base: options.base,
  180.         mode: options.mode,
  181.         configFile: options.config,
  182.         logLevel: options.logLevel,
  183.         clearScreen: options.clearScreen,
  184.         build: buildOptions
  185.       })
  186.     } catch (e) {
  187.       createLogger(options.logLevel).error(
  188.         chalk.red(`error during build:\n${e.stack}`),
  189.         { error: e }
  190.       )
  191.       process.exit(1)
  192.     }
  193.   })
  195. // optimize 优化
  196. cli
  197.   .command('optimize [root]')
  198.   .option(
  199.     '--force',
  200.     `[boolean] force the optimizer to ignore the cache and re-bundle`
  201.   )
  202.   .action(
  203.     async (root: string, options: { force?: boolean } & GlobalCLIOptions) => {
  204.       const { optimizeDeps } = await import('./optimizer')
  205.       try {
  206.         const config = await resolveConfig(
  207.           {
  208.             root,
  209.             base: options.base,
  210.             configFile: options.config,
  211.             logLevel: options.logLevel
  212.           },
  213.           'build',
  214.           'development'
  215.         )
  216.         await optimizeDeps(config, options.force, true)
  217.       } catch (e) {
  218.         createLogger(options.logLevel).error(
  219.           chalk.red(`error when optimizing deps:\n${e.stack}`),
  220.           { error: e }
  221.         )
  222.         process.exit(1)
  223.       }
  224.     }
  225.   )
  227. cli
  228.   .command('preview [root]')
  229.   .option('--host [host]', `[string] specify hostname`)
  230.   .option('--port <port>', `[number] specify port`)
  231.   .option('--strictPort', `[boolean] exit if specified port is already in use`)
  232.   .option('--https', `[boolean] use TLS + HTTP/2`)
  233.   .option('--open [path]', `[boolean | string] open browser on startup`)
  234.   .action(
  235.     async (
  236.       root: string,
  237.       options: {
  238.         host?: string | boolean
  239.         port?: number
  240.         https?: boolean
  241.         open?: boolean | string
  242.         strictPort?: boolean
  243.       } & GlobalCLIOptions
  244.     ) => {
  245.       try {
  246.         const server = await preview({
  247.           root,
  248.           base: options.base,
  249.           configFile: options.config,
  250.           logLevel: options.logLevel,
  251.           preview: {
  252.             port: options.port,
  253.             strictPort: options.strictPort,
  254.             host: options.host,
  255.             https: options.https,
  256.             open: options.open
  257.           }
  258.         })
  259.         server.printUrls()
  260.       } catch (e) {
  261.         createLogger(options.logLevel).error(
  262.           chalk.red(`error when starting preview server:\n${e.stack}`),
  263.           { error: e }
  264.         )
  265.         process.exit(1)
  266.       }
  267.     }
  268.   )
  269. // cli.js --help 可以查看上面配置的option
  270. cli.help()
  271. // cli.js --version 可以查看当前版本
  272. cli.version(require('../../package.json').version)
  274. // 获取命令的值
  275. cli.parse()

cac cli工具

2.4 vite src/node/server/index.ts

2.4.1 createServer 创建server对象

  1. import fs from 'fs'
  2. import path from 'path'
  3. import * as net from 'net'
  4. import * as http from 'http'
  5. import connect from 'connect'
  6. import corsMiddleware from 'cors'
  7. import chalk from 'chalk'
  8. // 获取ip信息
  9. import { AddressInfo } from 'net'
  10. // 监听文件变化
  11. import chokidar from 'chokidar'
  12. import {
  13.   resolveHttpsConfig,
  14.   resolveHttpServer,
  15.   httpServerStart,
  16.   CommonServerOptions
  17. } from '../http'
  18. import { resolveConfig, InlineConfig, ResolvedConfig } from '../config'
  19. import { createPluginContainer, PluginContainer } from './pluginContainer'
  20. import { FSWatcher, WatchOptions } from 'types/chokidar'
  21. import { createWebSocketServer, WebSocketServer } from './ws'
  22. import { baseMiddleware } from './middlewares/base'
  23. import { proxyMiddleware } from './middlewares/proxy'
  24. import { spaFallbackMiddleware } from './middlewares/spaFallback'
  25. import { transformMiddleware } from './middlewares/transform'
  26. import {
  27.   createDevHtmlTransformFn,
  28.   indexHtmlMiddleware
  29. } from './middlewares/indexHtml'
  30. import {
  31.   serveRawFsMiddleware,
  32.   servePublicMiddleware,
  33.   serveStaticMiddleware
  34. } from './middlewares/static'
  35. import { timeMiddleware } from './middlewares/time'
  36. import { ModuleGraph, ModuleNode } from './moduleGraph'
  37. import { Connect } from 'types/connect'
  38. import { ensureLeadingSlash, normalizePath } from '../utils'
  39. import { errorMiddleware, prepareError } from './middlewares/error'
  40. import { handleHMRUpdate, HmrOptions, handleFileAddUnlink } from './hmr'
  41. import { openBrowser } from './openBrowser'
  42. import launchEditorMiddleware from 'launch-editor-middleware'
  43. import {
  44.   TransformOptions,
  45.   TransformResult,
  46.   transformRequest
  47. } from './transformRequest'
  48. import {
  49.   transformWithEsbuild,
  50.   ESBuildTransformResult
  51. } from '../plugins/esbuild'
  52. import { TransformOptions as EsbuildTransformOptions } from 'esbuild'
  53. import { DepOptimizationMetadata, optimizeDeps } from '../optimizer'
  54. import { ssrLoadModule } from '../ssr/ssrModuleLoader'
  55. import { resolveSSRExternal } from '../ssr/ssrExternal'
  56. import {
  57.   rebindErrorStacktrace,
  58.   ssrRewriteStacktrace
  59. } from '../ssr/ssrStacktrace'
  60. import { ssrTransform } from '../ssr/ssrTransform'
  61. import { createMissingImporterRegisterFn } from '../optimizer/registerMissing'
  62. import { resolveHostname } from '../utils'
  63. import { searchForWorkspaceRoot } from './searchRoot'
  64. import { CLIENT_DIR } from '../constants'
  65. import { printCommonServerUrls } from '../logger'
  66. import { performance } from 'perf_hooks'
  67. import { invalidatePackageData } from '../packages'
  68. import { SourceMap } from 'rollup'
  70. export { searchForWorkspaceRoot } from './searchRoot'
  71. // cli里面调用的createServer
  72. export async function createServer(
  73. // 配置项
  74.   inlineConfig: InlineConfig = {}
  75. ): Promise<ViteDevServer> {
  76.   // 解析配置项
  77.   const config = await resolveConfig(inlineConfig, 'serve', 'development')
  78.   const root = config.root
  79.   const serverConfig = config.server
  80.   // 解析http配置
  81.   const httpsOptions = await resolveHttpsConfig(config.server.https)
  82.   let { middlewareMode } = serverConfig
  83.   if (middlewareMode === true) {
  84.     middlewareMode = 'ssr'
  85.   }
  87.   const middlewares = connect() as Connect.Server
  88.   // 创建http服务
  89.   const httpServer = middlewareMode
  90.     ? null
  91.     : await resolveHttpServer(serverConfig, middlewares, httpsOptions)
  92.   // 创建一个webSocket服务,用来做hrm做的
  93.   const ws = createWebSocketServer(httpServer, config, httpsOptions)
  94.     // 监听服务
  95.   const { ignored = [], ...watchOptions } = serverConfig.watch || {}
  96.   const watcher = chokidar.watch(path.resolve(root), {
  97.     ignored: [
  98.       '**/node_modules/**',
  99.       '**/.git/**',
  100.       ...(Array.isArray(ignored) ? ignored : [ignored])
  101.     ],
  102.     ignoreInitial: true,
  103.     ignorePermissionErrors: true,
  104.     disableGlobbing: true,
  105.     ...watchOptions
  106.   }) as FSWatcher
  108.   const moduleGraph: ModuleGraph = new ModuleGraph((url) =>
  109.     container.resolveId(url)
  110.   )
  111.     // 插件容器
  112.   const container = await createPluginContainer(config, moduleGraph, watcher)
  113.   // 关闭http函数
  114.   const closeHttpServer = createServerCloseFn(httpServer)
  116.   // eslint-disable-next-line prefer-const
  117.   let exitProcess: () => void
  118.     // server对象,包含的一些属性和方法
  119.   const server: ViteDevServer = {
  120.     config,
  121.     middlewares,
  122.     get app() {
  123.       config.logger.warn(
  124.         `ViteDevServer.app is deprecated. Use ViteDevServer.middlewares instead.`
  125.       )
  126.       return middlewares
  127.     },
  128.     httpServer,
  129.     watcher,
  130.     pluginContainer: container,
  131.     ws,
  132.     moduleGraph,
  133.     ssrTransform,
  134.     transformWithEsbuild,
  135.     transformRequest(url, options) {
  136.       return transformRequest(url, server, options)
  137.     },
  138.     transformIndexHtml: null!, // to be immediately set
  139.     ssrLoadModule(url) {
  140.       server._ssrExternals ||= resolveSSRExternal(
  141.         config,
  142.         server._optimizeDepsMetadata
  143.           ? Object.keys(server._optimizeDepsMetadata.optimized)
  144.           : []
  145.       )
  146.       return ssrLoadModule(url, server)
  147.     },
  148.     ssrFixStacktrace(e) {
  149.       if (e.stack) {
  150.         const stacktrace = ssrRewriteStacktrace(e.stack, moduleGraph)
  151.         rebindErrorStacktrace(e, stacktrace)
  152.       }
  153.     },
  154.     // 这里做监听,开启server
  155.     listen(port?: number, isRestart?: boolean) {
  156.       return startServer(server, port, isRestart)
  157.     },
  158.     // 关闭服务
  159.     async close() {
  160.       // 执行关闭信号量
  161.       process.off('SIGTERM', exitProcess)
  163.       if (!middlewareMode && process.env.CI !== 'true') {
  164.         process.stdin.off('end', exitProcess)
  165.       }
  166.             // 关闭所有的服务
  167.       await Promise.all([
  168.         // 监听器
  169.         watcher.close(),
  170.         // hrm服务
  171.         ws.close(),
  172.         // 插件容器
  173.         container.close(),
  174.         // 关闭http服务
  175.         closeHttpServer()
  176.       ])
  177.     },
  178.     printUrls() {
  179.       if (httpServer) {
  180.         printCommonServerUrls(httpServer, config.server, config)
  181.       } else {
  182.         throw new Error('cannot print server URLs in middleware mode.')
  183.       }
  184.     },
  185.     // 重启
  186.     async restart(forceOptimize: boolean) {
  187.       if (!server._restartPromise) {
  188.         server._forceOptimizeOnRestart = !!forceOptimize
  189.         server._restartPromise = restartServer(server).finally(() => {
  190.           server._restartPromise = null
  191.           server._forceOptimizeOnRestart = false
  192.         })
  193.       }
  194.       return server._restartPromise
  195.     },
  197.     _optimizeDepsMetadata: null,
  198.     _ssrExternals: null,
  199.     _globImporters: Object.create(null),
  200.     _restartPromise: null,
  201.     _forceOptimizeOnRestart: false,
  202.     _isRunningOptimizer: false,
  203.     _registerMissingImport: null,
  204.     _pendingReload: null,
  205.     _pendingRequests: new Map()
  206.   }
  207.     // html转换函数
  208.   server.transformIndexHtml = createDevHtmlTransformFn(server)
  210.   exitProcess = async () => {
  211.     try {
  212.       await server.close()
  213.     } finally {
  214.       process.exit(0)
  215.     }
  216.   }
  217.     // 一旦接受到信号,执行exitProcess
  218.   process.once('SIGTERM', exitProcess)
  220.   if (!middlewareMode && process.env.CI !== 'true') {
  221.     process.stdin.on('end', exitProcess)
  222.   }
  223.     // 缓存包数据
  224.   const { packageCache } = config
  225.   const setPackageData = packageCache.set.bind(packageCache)
  226.   packageCache.set = (id, pkg) => {
  227.     if (id.endsWith('.json')) {
  228.       // json文件放入watcher监听
  229.       watcher.add(id)
  230.     }
  231.     return setPackageData(id, pkg)
  232.   }
  234.   // 监听文件变化
  235.   watcher.on('change', async (file) => {
  236.     file = normalizePath(file)
  237.     if (file.endsWith('/package.json')) {
  238.       return invalidatePackageData(packageCache, file)
  239.     }
  240.     // invalidate module graph cache on file change
  241.     moduleGraph.onFileChange(file)
  242.     if (serverConfig.hmr !== false) {
  243.       try {
  244.         await handleHMRUpdate(file, server)
  245.       } catch (err) {
  246.         ws.send({
  247.           type: 'error',
  248.           err: prepareError(err)
  249.         })
  250.       }
  251.     }
  252.   })
  254.   watcher.on('add', (file) => {
  255.     handleFileAddUnlink(normalizePath(file), server)
  256.   })
  258.   watcher.on('unlink', (file) => {
  259.     handleFileAddUnlink(normalizePath(file), server, true)
  260.   })
  262.   if (!middlewareMode && httpServer) {
  263.     httpServer.once('listening', () => {
  264.       // update actual port since this may be different from initial value
  265.       serverConfig.port = (httpServer.address() as AddressInfo).port
  266.     })
  267.   }
  269.   // apply server configuration hooks from plugins
  270.   // 将插件放入postHooks队列中,执行plugin.configureServer将server实例注入到插件中
  271.   const postHooks: ((() => void) | void)[] = []
  272.   for (const plugin of config.plugins) {
  273.     if (plugin.configureServer) {
  274.       postHooks.push(await plugin.configureServer(server))
  275.     }
  276.   }
  278.   // Internal middlewares ------------------------------------------------------
  280.   // request timer
  281.   if (process.env.DEBUG) {
  282.     // 时间中间件
  283.     middlewares.use(timeMiddleware(root))
  284.   }
  286.   // cors (enabled by default)
  287.   const { cors } = serverConfig
  288.   if (cors !== false) {
  289.     // 跨域中间件
  290.     middlewares.use(corsMiddleware(typeof cors === 'boolean' ? {} : cors))
  291.   }
  293.   // proxy
  294.   const { proxy } = serverConfig
  295.   if (proxy) {
  296.     // 代理中间件
  297.     middlewares.use(proxyMiddleware(httpServer, config))
  298.   }
  300.   // base
  301.   if (config.base !== '/') {
  302.     //base不是/,添加新的base
  303.     middlewares.use(baseMiddleware(server))
  304.   }
  306.   // open in editor support,监听下面的路由,如果监听到会打开编辑器中的文件,如vscode打开一个vue文件
  307.   middlewares.use('/__open-in-editor', launchEditorMiddleware())
  309.   // hmr reconnect ping
  310.   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
  311.   middlewares.use('/__vite_ping', function viteHMRPingMiddleware(_, res) {
  312.     res.end('pong')
  313.   })
  315.   // serve static files under /public
  316.   // this applies before the transform middleware so that these files are served
  317.   // as-is without transforms.
  318.   if (config.publicDir) {
  319.     // 公共文件
  320.     middlewares.use(servePublicMiddleware(config.publicDir))
  321.   }
  323.   // main transform middleware 转换中间件,插件的加载也在这里load,如plugin-vue
  324.   middlewares.use(transformMiddleware(server))
  326.   // serve static files
  327.   middlewares.use(serveRawFsMiddleware(server))
  328.   middlewares.use(serveStaticMiddleware(root, server))
  330.   // spa fallback
  331.   if (!middlewareMode || middlewareMode === 'html') {
  332.     middlewares.use(spaFallbackMiddleware(root))
  333.   }
  335.   // run post config hooks
  336.   // This is applied before the html middleware so that user middleware can
  337.   // serve custom content instead of index.html.
  338.   // 执行插件
  339.   postHooks.forEach((fn) => fn && fn())
  341.   if (!middlewareMode || middlewareMode === 'html') {
  342.     // transform index.html
  343.     middlewares.use(indexHtmlMiddleware(server))
  344.     // handle 404s
  345.     // 添加404
  346.     // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
  347.     middlewares.use(function vite404Middleware(_, res) {
  348.       res.statusCode = 404
  349.       res.end()
  350.     })
  351.   }
  353.   // error handler 异常处理
  354.   middlewares.use(errorMiddleware(server, !!middlewareMode))
  356.   const runOptimize = async () => {
  357.     if (config.cacheDir) {
  358.       server._isRunningOptimizer = true
  359.       try {
  360.         server._optimizeDepsMetadata = await optimizeDeps(
  361.           config,
  362.           config.server.force || server._forceOptimizeOnRestart
  363.         )
  364.       } finally {
  365.         server._isRunningOptimizer = false
  366.       }
  367.       server._registerMissingImport = createMissingImporterRegisterFn(server)
  368.     }
  369.   }
  371.   if (!middlewareMode && httpServer) {
  372.     let isOptimized = false
  373.     // overwrite listen to run optimizer before server start
  374.     const listen = httpServer.listen.bind(httpServer)
  375.     httpServer.listen = (async (port: number, ...args: any[]) => {
  376.       if (!isOptimized) {
  377.         try {
  378.              await container.buildStart({})
  379.           // 运行优化
  380.           await runOptimize()
  381.           isOptimized = true
  382.         } catch (e) {
  383.           httpServer.emit('error', e)
  384.           return
  385.         }
  386.       }
  387.       return listen(port, ...args)
  388.     }) as any
  389.   } else {
  390.     await container.buildStart({})
  391.     await runOptimize()
  392.   }
  394.   return server
  395. }

2.4.2 startServer 启动http服务

  1. async function startServer(
  2.   server: ViteDevServer,
  3.   inlinePort?: number,
  4.   isRestart: boolean = false
  5. ): Promise<ViteDevServer> {
  6.   const httpServer = server.httpServer
  7.   if (!httpServer) {
  8.     throw new Error('Cannot call server.listen in middleware mode.')
  9.   }
  11.   const options = server.config.server
  12.   const port = inlinePort || options.port || 3000
  13.   const hostname = resolveHostname(options.host)
  15.   const protocol = options.https ? 'https' : 'http'
  16.   const info = server.config.logger.info
  17.   const base = server.config.base
  19.   const serverPort = await httpServerStart(httpServer, {
  20.     port,
  21.     strictPort: options.strictPort,
  22.     host: hostname.host,
  23.     logger: server.config.logger
  24.   })
  26.   // @ts-ignore 分析工具, 参数来源于cli里面配置的
  27.   const profileSession = global.__vite_profile_session
  28.   if (profileSession) {
  29.     profileSession.post('Profiler.stop', (err: any, { profile }: any) => {
  30.       // Write profile to disk, upload, etc.
  31.       if (!err) {
  32.         const outPath = path.resolve('./vite-profile.cpuprofile')
  33.         fs.writeFileSync(outPath, JSON.stringify(profile))
  34.         info(
  35.           chalk.yellow(`  CPU profile written to ${chalk.white.dim(outPath)}\n`)
  36.         )
  37.       } else {
  38.         throw err
  39.       }
  40.     })
  41.   }
  42.     // 打开浏览器
  43.   if (options.open && !isRestart) {
  44.     const path = typeof options.open === 'string' ? options.open : base
  45.     openBrowser(
  46.       path.startsWith('http')
  47.         ? path
  48.         : `${protocol}://${hostname.name}:${serverPort}${path}`,
  49.       true,
  50.       server.config.logger
  51.     )
  52.   }
  54.   return server
  55. }

上述代码执行server服务

2.5 plugin-vue插件

2.5.1 vue-project中的vite.config.js配置

  1. import { fileURLToPath } from 'url'
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   plugins: [vue()],
  9.   resolve: {
  10.     alias: {
  11.       '@': fileURLToPath(new URL('./src', import.meta.url))
  12.     }
  13.   }
  14. })

上述配置可以看出使用了vue插件,通过server服务监听路由,请求了vue文件,然后会调用插件进行处理

2.5.2 plugin-vue/src/index.tx

  1. export default function vuePlugin(rawOptions: Options = {}): Plugin {
  2.     // 插件配置,可以传空
  3.   const {
  4.     include = /\.vue$/,
  5.     exclude,
  6.     customElement = /\.ce\.vue$/,
  7.     refTransform = false
  8.   } = rawOptions
  10.   const filter = createFilter(include, exclude)
  12.   const customElementFilter =
  13.     typeof customElement === 'boolean'
  14.       ? () => customElement
  15.       : createFilter(customElement)
  17.   const refTransformFilter =
  18.     refTransform === false
  19.       ? () => false
  20.       : refTransform === true
  21.       ? createFilter(/\.(j|t)sx?$/, /node_modules/)
  22.       : createFilter(refTransform)
  24.   // compat for older versions
  25.   const canUseRefTransform = typeof compiler.shouldTransformRef === 'function'
  27.   let options: ResolvedOptions = {
  28.     isProduction: process.env.NODE_ENV === 'production',
  29.     ...rawOptions,
  30.     include,
  31.     exclude,
  32.     customElement,
  33.     refTransform,
  34.     root: process.cwd(),
  35.     sourceMap: true
  36.   }
  38.   // Temporal handling for 2.7 breaking change
  39.   const isSSR = (opt: { ssr?: boolean } | boolean | undefined) =>
  40.     opt === undefined
  41.       ? !!options.ssr
  42.       : typeof opt === 'boolean'
  43.       ? opt
  44.       : opt?.ssr === true
  45.     // 返回插件配置 
  46.   return {
  47.     name: 'vite:vue',
  49.     handleHotUpdate(ctx) {
  50.       if (!filter(ctx.file)) {
  51.         return
  52.       }
  53.       return handleHotUpdate(ctx, options)
  54.     },
  56.     config(config) {
  57.       return {
  58.         define: {
  59.           __VUE_OPTIONS_API__: true,
  60.           __VUE_PROD_DEVTOOLS__: false
  61.         },
  62.         ssr: {
  63.           external: ['vue', '@vue/server-renderer']
  64.         }
  65.       }
  66.     },
  68.     configResolved(config) {
  69.       options = {
  70.         ...options,
  71.         root: config.root,
  72.         sourceMap: config.command === 'build' ? !!config.build.sourcemap : true,
  73.         isProduction: config.isProduction
  74.       }
  75.     },
  77.     configureServer(server) {
  78.       options.devServer = server
  79.     },
  81.     async resolveId(id) {
  82.       // component export helper
  83.       if (id === EXPORT_HELPER_ID) {
  84.         return id
  85.       }
  86.       // serve sub-part requests (*?vue) as virtual modules
  87.       if (parseVueRequest(id).query.vue) {
  88.         return id
  89.       }
  90.     },
  91.         // 加载vue文件
  92.     load(id, opt) {
  93.       const ssr = isSSR(opt)
  94.       if (id === EXPORT_HELPER_ID) {
  95.         return helperCode
  96.       }
  98.       const { filename, query } = parseVueRequest(id)
  99.       // select corresponding block for sub-part virtual modules
  100.       if (query.vue) {
  101.         if (query.src) {
  102.           return fs.readFileSync(filename, 'utf-8')
  103.         }
  104.         const descriptor = getDescriptor(filename, options)!
  105.         let block: SFCBlock | null | undefined
  106.         if (query.type === 'script') {
  107.           // handle <scrip> + <script setup> merge via compileScript()
  108.           block = getResolvedScript(descriptor, ssr)
  109.         } else if (query.type === 'template') {
  110.           block = descriptor.template!
  111.         } else if (query.type === 'style') {
  112.           block = descriptor.styles[query.index!]
  113.         } else if (query.index != null) {
  114.           block = descriptor.customBlocks[query.index]
  115.         }
  116.         if (block) {
  117.           return {
  118.             code: block.content,
  119.             map: block.map as any
  120.           }
  121.         }
  122.       }
  123.     },
  124.     // 转换文件
  125.     transform(code, id, opt) {
  126.       const ssr = isSSR(opt)
  127.       const { filename, query } = parseVueRequest(id)
  128.       if (query.raw) {
  129.         return
  130.       }
  131.       if (!filter(filename) && !query.vue) {
  132.         if (!query.vue && refTransformFilter(filename)) {
  133.           if (!canUseRefTransform) {
  134.             this.warn('refTransform requires @vue/compiler-sfc@^3.2.5.')
  135.           } else if (compiler.shouldTransformRef(code)) {
  136.             return compiler.transformRef(code, {
  137.               filename,
  138.               sourceMap: true
  139.             })
  140.           }
  141.         }
  142.         return
  143.       }
  145.       if (!query.vue) {
  146.         // main request
  147.         return transformMain(
  148.           code,
  149.           filename,
  150.           options,
  151.           this,
  152.           ssr,
  153.           customElementFilter(filename)
  154.         )
  155.       } else {
  156.         // sub block request
  157.         const descriptor = getDescriptor(filename, options)!
  158.         if (query.type === 'template') {
  159.           return transformTemplateAsModule(code, descriptor, options, this, ssr)
  160.         } else if (query.type === 'style') {
  161.           return transformStyle(
  162.             code,
  163.             descriptor,
  164.             Number(query.index),
  165.             options,
  166.             this
  167.           )
  168.         }
  169.       }
  170.     }
  171.   }
  172. }

2.6 整体server流程

  1. 运行vite server命令
  2. 会启动server服务,hrm websocket服务,监听文件变化
  3. 注册一些中间件,插件初始化
  4. 当用户请求一个路由,会在http中请求一个.vue文件

  5. 会触发transformMiddleware中间件,里面做了对vue文件的处理

    3. 总结

  6. perf_hooks和inspector分别是node性能工具和调试工具,后面可以在深入了解

  7. 通过正则方式去匹配命令行参数/^(?:-d|—debug)$/.test(arg),这种写法可以不借助minimist等参数处理库,减少了包体积

  8. cac库对cli的体验不错,有命令帮助手册

    4. 参考文档

  9. https://juejin.cn/post/7021306258057592862

  10. github.com/vitejs/vite
  11. http://nodejs.cn/api/perf_hooks.html
  12. https://nodejs.org/api/inspector.html