ps:没配置过,先初步体验一下配置效果,不会细究其配置,说人话就是先跟着官网文档的描述走一遍配置

注意1:除了以下选项之外您还可以使用 Vite 中的任何配置选项。例如， define 定义全局变量，或 resolve.alias 定义别名。

注意2:此处列出的所有选项都位于配置内的 test 属性上：

注意3:针对于所有不支持配置工作区项目的选项旁边都有 * 符号。

include

type
- string[]
default
- [' / .{test,spec}.?(c|m)[jt]s?(x)'
功能
- 使用glob模式包含在测试运行中的文件

代码配置

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    include: ['./src/scripts/**.test.?(c|m)[jt]s?(x)']
  }
})

测试结果

不做配置的测试结果

exclude

type
- string[]
default
- [' /nodemodules/ ',' /dist/ ,' /cypress/ ',' /{idea,git,cache,output,temp}/ ',' */{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config. ']
功能
- 使用glob模式从测试运行中排除的文件
目录配置
- 在src下增加tests目录,在tests目录下新增a.test.js

代码配置1

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    include: ['./src/scripts/**.test.?(c|m)[jt]s?(x)'],
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*', './src/scripts/each.test.js(x)', './src/scripts/**.test.?(c|m)[jt]s?(x)']
  }
})

测试结果1
- 和上次结果一样

结论
- include的优先级大于exclude,如果出现配置相同的情况,则以include的情况为主

代码配置2

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*']
  }
})

测试结果2

代码配置3

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*', './src/tests/**']
  }
})

测试结果3

includeSource

Type:
- string[]
default
- []
功能
- Vitest 将运行所有包含 import.meta.vitest 的匹配文件

代码配置

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*', './src/tests/**'],
    includeSource: []
  }
})

测试结果

配置代码2

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**']
  }
})

测试结果2

server

Type:
- { sourcemap?, deps?, ... }
Version:
- Since Vitest 0.34.0

Vite-Node 服务器选项。

server.sourcemap

Type:
- 'inline' | boolean
Default:
- 'inline'
功能
- 将内联源映射注入到模块中。

配置代码1

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: true
    }
  }
})

测试结果1

配置代码2

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: false
    }
  }
})

测试结果2

配置代码3

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: "inline"
    }
  }
})

测试结果3

server.debug

Type:
- { dumpModules?, loadDumppedModules? }
dumpModules
- Type:
  - boolean | string
- 功能
  - 将转换后的模块转储到文件系统。传递字符串将转储到指定路径
loadDumppedModules
- Type:
  - boolean
- 功能
  - 只要存在，就从文件系统中读取转储的模块。通过修改文件系统的转储结果可用于调试

配置代码1

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: "inline",
      debug: {
        dumpModules: true,
        loadDumppedModules: true,
      }
    }
  }
})

测试结果1

```
![image.png](vite配置选项+a8bf5346-6dca-4e3c-8eac-a1fc6f170bc1/image 12.png)
```

server.deps

Type:
- { external?, inline?, ... }
功能
- 处理依赖关系解析。
server.deps.external
- Type:
  - (string | RegExp)[]
- Default:
  - [//node_modules//]
- 功能
  - 外部化（Externalize）是指Vite将包绕过到原生Node。
  - 外部化依赖不会应用于 Vite 的转换器和解析器，因此它们不支持重新加载时的 HMR。
  - 默认情况下， node_modules 内的所有包都被外部化。

server.deps.inline

Type:
- (string | RegExp)[] | true
Default:
- []
功能
- Vite将处理内联模块。这可能有助于处理以 ESM 格式发送 .js 的包（Node 无法处理）
- 如果 true ，每个依赖项都将被内联
- 默认情况下， ssr.noExternal 中指定的所有依赖项都将内联。

配置代码

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: "inline",
      debug: {
        dumpModules: true,
        loadDumppedModules: true,
      },
      deps: {
        inline: true
      }
    }
  }
})

测试结果

-   server.deps.fallbackCJS

    -   **Type**

        -   `boolean`

    -   Default:

        -   false

    -   功能

        -   当依赖项是有效的 ESM 包时，尝试根据路径猜测 cjs 版本。
        -   如果依赖项具有错误的 ESM 文件，这可能会有所帮助。
        -   如果包在 ESM 和 CJS 模式下具有不同的逻辑，这可能会导致一些错位

    -   配置代码

        ```
        /// <reference types="vitest" />
        import { defineConfig } from 'vite'
        import vue from '@vitejs/plugin-vue'

        // https://vitejs.dev/config/
        export default defineConfig({
          plugins: [vue()],
          test: {
            exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
            includeSource: ['./src/tests/**'],
            server: {
              sourcemap: "inline",
              debug: {
                dumpModules: true,
                loadDumppedModules: true,
              },
              deps: {
                inline: true,
                fallbackCJS: false
              }
            }
          }
        })
        ```

    -   测试结果:设置为true或者false都会报错

server.deps.cacheDir
- Type
  - string
- Default:
  - 'node_modules/.vite'
- 功能
  - 保存缓存文件的目录。
- 问题:
  - 和上一个一样,直接设置会报错

Day 5 viest 之 配置选项初体验(第一版)

include

exclude

includeSource

server

Vite-Node 服务器选项。

server.sourcemap

server.debug

server.deps

Day 5 viest 之配置选项初体验(第一版)