vite源码解析

主题

索引

src/node/watch.ts ​

完整代码 ​

ts
import glob from 'fast-glob'
import type { WatchOptions } from 'dep-types/chokidar'
import type { ResolvedConfig } from '.'

export function resolveChokidarOptions(
  config: ResolvedConfig,
  options: WatchOptions | undefined,
): WatchOptions {
  const { ignored = [], ...otherOptions } = options ?? {}

  const resolvedWatchOptions: WatchOptions = {
    ignored: [
      '**/.git/**',
      '**/node_modules/**',
      '**/test-results/**', // Playwright
      glob.escapePath(config.cacheDir) + '/**',
      ...(Array.isArray(ignored) ? ignored : [ignored]),
    ],
    ignoreInitial: true,
    ignorePermissionErrors: true,
    ...otherOptions,
  }

  return resolvedWatchOptions
}

import glob from 'fast-glob'
import type { WatchOptions } from 'dep-types/chokidar'
import type { ResolvedConfig } from '.'

export function resolveChokidarOptions(
  config: ResolvedConfig,
  options: WatchOptions | undefined,
): WatchOptions {
  const { ignored = [], ...otherOptions } = options ?? {}

  const resolvedWatchOptions: WatchOptions = {
    ignored: [
      '**/.git/**',
      '**/node_modules/**',
      '**/test-results/**', // Playwright
      glob.escapePath(config.cacheDir) + '/**',
      ...(Array.isArray(ignored) ? ignored : [ignored]),
    ],
    ignoreInitial: true,
    ignorePermissionErrors: true,
    ...otherOptions,
  }

  return resolvedWatchOptions
}

从这里看，vite是使用chokidar这个库做文件监听的，这里是编写了一个resolvedWatchOptions函数解析和合并chokidar的配置选项

解析和合并chokidar的选项对象 ​

ts
export function resolveChokidarOptions(
  config: ResolvedConfig,
  options: WatchOptions | undefined,
): WatchOptions {
  ...
}

export function resolveChokidarOptions(
  config: ResolvedConfig,
  options: WatchOptions | undefined,
): WatchOptions {
  ...
}

该函数接受两个参数：config和options。函数的目的是解析和合并chokidar的选项对象，返回一个新的选项对象。

这个函数在src/node/server/index.ts中被调用，具体内容请查看server/index.md

导出配置项 options 中的 ignored 与其他属性 ​

ts
 const { ignored = [], ...otherOptions } = options ?? {}

 const { ignored = [], ...otherOptions } = options ?? {}

这段代码使用 JavaScript 中的解构赋值语法。它的作用是从 options 对象中提取属性值并将其赋给新的变量

  1. 使用空值合并运算符(??)来确保如果options为undefined或null，则options ?? {}的结果是一个空对象{}，以避免出现解构赋值的错误

    js
    let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误

    let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误

  2. 在解构赋值过程中，如果被解构的对象的属性不存在或值为undefined，则对应的变量将被赋予默认值，因此ignored = []表达式将为ignored变量提供默认值。这意味着在缺少ignored属性或其值为undefined的情况下，ignored将被赋予一个空数组[]。

  3. ...otherOptions的语法是对象展开运算符的一种应用，它可以用于将一个对象中的所有属性展开到另一个对象中。具体来说，它的作用是将options对象中除了ignored属性之外的所有属性展开，并将它们合并到一个新的对象中。

    js
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

  4. 解构赋值、对象展开运算符的学习可以查看阮一峰es6教程

生成一个完整的chokidar选项对象 ​

ts
  const resolvedWatchOptions: WatchOptions = {
    ignored: [
      '**/.git/**',
      '**/node_modules/**',
      '**/test-results/**', // Playwright
      glob.escapePath(config.cacheDir) + '/**',
      ...(Array.isArray(ignored) ? ignored : [ignored]),
    ],
    ignoreInitial: true,
    ignorePermissionErrors: true,
    ...otherOptions,
  }

  const resolvedWatchOptions: WatchOptions = {
    ignored: [
      '**/.git/**',
      '**/node_modules/**',
      '**/test-results/**', // Playwright
      glob.escapePath(config.cacheDir) + '/**',
      ...(Array.isArray(ignored) ? ignored : [ignored]),
    ],
    ignoreInitial: true,
    ignorePermissionErrors: true,
    ...otherOptions,
  }
  • ignored属性是一个数组，包含了要忽略的文件/目录的匹配模式。默认情况下，包括.git目录、node_modules目录、test-results目录、以及通过glob.escapePath函数对config.cacheDir进行转义后的路径，最后再根据ignored参数的类型进行合并。
  • ignoreInitial属性被设置为true，表示初始扫描时忽略文件变化事件。
  • ignorePermissionErrors属性被设置为true，表示忽略权限错误。
  1. 使用对象展开运算符(...)将otherOptions中的属性合并到resolvedWatchOptions对象中。
  2. 返回最终的resolvedWatchOptions对象作为函数的结果。

简而言之，这段代码用于根据传入的options参数和默认的忽略规则，生成一个完整的Chokidar选项对象，并将其返回。

Released under the MIT License.

Copyright © 2022.4-2023.6