Day6 viteset 之配置第二期

拒绝无效摆烂~有效摆才是真的赞

已于 2023-12-26 18:41:14 修改

阅读量1k

点赞数 26

分类专栏： vitest 文章标签：前端

于 2023-12-26 17:00:21 首次发布

本文链接：https://blog.csdn.net/m0_73653709/article/details/135226262

版权

vitest 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本节的deps配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    //提高测试性能
    //遇到Include 外部库 将其捆绑到单个文件 并作为整个模块导入
    deps: {
      optimizer: {
        web: {
          enabled: false,//不启用依赖项优化。
        },
        ssr: {
          enabled: false,//不启用依赖项优化。
        },
      },
      //当转换模式设置为 web 时应用于外部文件的选项
      web:
      {
        //Vitest 是否应该像 Vite 在浏览器中一样处理资产（.png、.svg、.jpg 等）文件并解析它们
        transformAssets: false,
        // Vitest 是否应该像 Vite 在浏览器中一样处理 CSS（.css、.scss、.sass 等）文件并解析它们。
        transformCss: false,
        //正则表达式模式匹配应转换的外部文件
        transformGlobPattern: /.vue/g
      },
      //将 CJS 模块的默认值解释为命名导出
      interopDefault: true,
      //视为模块目录的目录列表。
      moduleDirectories: ['node_modules', 'src/tests'],
    },
  }
})

本节的optimizeDeps配置

optimizeDeps: {
  //与vite项目根相关的快速全局模式或者模式数组
  entries: [''],
  //从预捆绑中排除的依赖项。
  exclude: [''],
  //强制预先捆绑链接的包
  include: [''],
  //用于dep扫描和优化期间
  esbuildOptions: [],
  //强制依赖项预捆绑,忽略先前缓存的优化依赖项(设置为true)
  force: true,
  //禁用依赖项优化
  disabled: 'build',
  //导入依赖项时强制 ESM 互操作
  needsInterop: [],

}

deps

Type: { optimizer?, ... }
目的: 处理依赖关系解析。

deps.optimizer 依赖优化器

Type: { ssr?, web? }
Version: Since Vitest 0.34.0
目的:
- 存在提高测试性能的可能(如果您有很多测试)
  - (注意:vitest 0.34.0之前,被命名为 deps.experimentalOptimizer)
- 使用 esbuild 将其捆绑到单个文件并作为整个模块导入(当vitest遇到 include 中列出的外部库的时候),好处:
  - 捆绑到一个文件中,比起导入大量的包,节省了大量的时间
  - 使得测试代码的运行方式更加接近在浏览器中的运行方式
  - 支持捆绑包的vitest的alias配置
  - 减少不适合在nodeJs中运行的UI库的高成本
注意
- 1.仅仅捆绑dep.optimizer?.[mode].include选项中的包(例如svelte回自动填充此选项)
- 2.vitest不支持disable和noDiscovery
- 3.vitest默认对jsdom和happy-dom环境使用optimizer.web配置
- 4.vitest默认对node和edge环境使用transformMode配置
- 5.此选项对于web vitest将继承optimizeDeps,对于ssr将继承ssr.optimizeDeps
- 6.在deps.optimizer中定义include和exclude选项,如果exclude中列出了相同的选项,vitest会自动从include删除它们
- 7.您无法编辑node_modules代码进行调试,因为该代码实际上位于您的cacheDir和test.cache.dir目录
- 8.如果你想要在Node_modules使用console.log语句进行调试,请直接编辑或者使用deps.optimizer?.[mode].force选项强制重新捆绑

deps.optimizer.{mode}.enabled

Type: boolean
默认值：如果使用 >= Vite 4.3.2，则为 true ，否则为 false
功能:
- 启用依赖项优化。

deps.web

Type: { transformAssets?, ... }
Version: Since Vite 0.34.2
值:当转换模式设置为 web 时应用于外部文件的选项
功能:
- 默认:
  - jsdom 和 happy-dom 使用 web 模式，而 node 和 edge 环境使用 ssr
- 影响到的文件
  - node_modules 中的文件(外部化)
  - server.deps.external 中的文件。

deps.web.transformAssets

Type: boolean
Default: true
功能:
- Vitest 是否应该像 Vite 在浏览器中一样处理资产（.png、.svg、.jpg 等）文件并解析它们。
- 如果未指定参数，此模块将具有等于资产路径的默认导出。
注意
- 目前此选项仅适用于 vmThreads 池。

deps.web.transformCss

Type: boolean
Default: true
功能:
- Vitest 是否应该像 Vite 在浏览器中一样处理 CSS（.css、.scss、.sass 等）文件并解析它们。
注意
- 如果使用 css 选项禁用 CSS 文件，则此选项只会消除 ERR_UNKNOWN_FILE_EXTENSION 错误。
- 目前此选项仅适用于 vmThreads 池。

deps.web.transformGlobPattern

Type: RegExp | RegExp[]
Default: []
值;正则表达式模式匹配应转换的外部文件。
注意:
- 默认node_modules 内的文件被外部化并且不会被转换，除非它是CSS或资产，并且相应的选项未被禁用。
- 目前此选项仅适用于 vmThreads 池。

deps.interopDefault

Type: boolean
Default: true

背景:

某些依赖项仅捆绑 CJS 模块，并且不使用命名导出，当使用 import 语法而不是 require 导入包时，Node.js 可以静态分析命名导出。当使用命名导出在 Node 环境中导入此类依赖项时，您将看到以下错误：

import { read } from 'fs-jetpack';
         ^^^^
SyntaxError: Named export 'read' not found. The requested module 'fs-jetpack' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export.

Vitest 不进行静态分析，并且在运行代码之前不会失败，因此如果禁用此功能，您在运行测试时很可能会看到此错误：

import { read } from 'fs-jetpack';
         ^^^^
SyntaxError: Named export 'read' not found. The requested module 'fs-jetpack' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export.

功能:
- 将 CJS 模块的默认值解释为命名导出
- 默认Vitest 假设您使用捆绑器来绕过此操作，并且不会失败，但如果您的代码未得到处理，您可以手动禁用此行为。

deps.moduleDirectories

Type: string[]
Default: ['node_modules']
值;视为模块目录的目录列表。
注意:
- 此配置选项会影响 vi.mock 的行为：
  - 当未提供工厂并且您正在模拟的路径与 moduleDirectories 值之一匹配时
  - Vitest 将尝试通过查看项目根目录中的 __mocks__ 文件夹来解析mock
- 此选项还会影响当外部化依赖项时是否应将文件视为模块。
  - 默认情况下，Vitest 使用原生 Node.js 绕过 Vite 转换步骤导入外部模块。
- 如果您仍希望搜索 node_modules 包，则设置此选项将覆盖默认值，包括它以及任何其他选项：
```
import { read } from 'fs-jetpack';
         ^^^^
SyntaxError: Named export 'read' not found. The requested module 'fs-jetpack' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export.
```

(Dep Optimization Options 部门优化选项)

optimizeDeps.entries

Type: string | string[]
值: 与vite项目根相关的快速全局模式或者模式数组
背景:
- vite默认会抓取你的所有的.html文件(忽略node_modules.build.outDir,_tests,coverage)来检测需要预先捆绑的依赖项
- vite在设置了build.rollupOptions.input,将抓取指定的入口点
功能
- 如果以上都不满足您的要求,您可以使用此选项指定自定义条目
效果:
- 会覆盖默认条目推断
- 显示定义该选项之后,默认只会忽略mode_modules 和 build.outDir
  - 如果需要忽略其他文件夹,可以使用忽略模式作为条目列表的一部分,并标有初识!

optimizeDeps.exclude

Type: string[]
值: 从预捆绑中排除的依赖项。
注意;
- comminJS依赖项不应搞被排除在优化之外
- 如果esm依赖项被排除在优化之外,但是具有嵌套的commonJS依赖项,应该将comonJS依赖项添加到optimizeDeps.include中

代码

export default defineConfig({
  optimizeDeps:{
    include:['esm-dep > cjs-dep']
  }
})

optimizeDeps.include

ype: string[]
功能
- vitest默认不在node_modules内的链接包不会被预捆绑,使用此选项可以强制预先捆绑链接的包
注意:
- 如果您的库具有许多深度导入,可以指定一个尾随glob模式来一次预捆绑所有深度导入
  - 目的:避免每当使用新的深度导入的时候不断进行预捆绑

代码

export default deineConfig({
    optimizeDeps:{
    include:['my-lib/components/**/*.vue']
  }
})

optimizeDeps.esbuildOptions

Type: EsbuildBuildOptions
功能
- 用于dep扫描和优化期间
注意:
- 以下选项将忽略(因为更改它们将于vite的dep优化不兼容)
  - external被忽略,使用vite的optimizeDeps.exclude选项
  - plugins与vite的dep插件合并

optimizeDeps.force

Type: boolean
功能:强制依赖项预捆绑,忽略先前缓存的优化依赖项(设置为true)

optimizeDeps.disabled(实验)

Type: boolean | 'build' | 'dev'
Default: 'build'
功能
- 禁用依赖项优化，
  - 在构建和开发期间禁用优化器(true)。
  - 传递 'build' 或 'dev' 仅在其中一种模式下禁用优化器。
  - 默认情况下，仅在开发中启用依赖项优化。
注意
- 在构建模式下优化依赖项是实验性的。
- 如果启用将消除开发和产品之间最显着的差异之一。
- 在这种情况下不再需要 @rollup/plugin-commonjs ，因为 esbuild 将仅 CJS 依赖项转换为 ESM。
- @rollup/plugin-commonjs 可以通过传递 build.commonjsOptions: { include: [] } 来删除。