如何使用Vite在构建时排除Cypress的.cy.tsx文件及Cypress目录

要让Vite忽略项目根目录的Cypress文件夹，以及所有后缀为.cy.tsx的测试文件，只需修改项目根目录的vite.config.ts（或vite.config.js）配置文件，添加以下规则：

完整配置示例（TypeScript） #

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  // 开发服务器监听忽略规则
  server: {
    watch: {
      ignored: [
        path.resolve(__dirname, 'cypress'), // 忽略根目录的Cypress文件夹
        '**/*.cy.tsx' // 忽略所有目录下的.cy.tsx文件
      ]
    }
  },
  // 构建阶段排除规则
  build: {
    rollupOptions: {
      external: [
        /\.cy\.tsx$/, // 正则匹配所有.cy.tsx文件
        path.resolve(__dirname, 'cypress')
      ]
    }
  },
  // 依赖预构建忽略规则
  optimizeDeps: {
    exclude: [
      path.resolve(__dirname, 'cypress')
    ]
  }
})

配置说明 #

• server.watch.ignored：开发模式下，Vite的文件监听会跳过指定路径，避免测试文件修改触发不必要的页面刷新。
• build.rollupOptions.external：告知Rollup（Vite底层打包工具）不要将这些测试相关文件打包到最终生产产物中。
• optimizeDeps.exclude：防止Vite对Cypress目录下的文件进行依赖预构建，减少不必要的构建开销。

JavaScript版本配置 #

如果你的项目使用JavaScript配置文件，写法如下：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  server: {
    watch: {
      ignored: [
        path.resolve(__dirname, 'cypress'),
        '**/*.cy.tsx'
      ]
    }
  },
  build: {
    rollupOptions: {
      external: [
        /\.cy\.tsx$/,
        path.resolve(__dirname, 'cypress')
      ]
    }
  },
  optimizeDeps: {
    exclude: [
      path.resolve(__dirname, 'cypress')
    ]
  }
})

内容的提问来源于stack exchange，提问作者IdoBa