使用 tsconfig.build.ts 运行 vite 构建

Question

问题

有没有办法指定运行

tsconfig

命令时使用哪个

vite build

文件？

问题

我正在使用 Vite 和 TypeScript 构建一个组件库。我的测试套件正在运行新的赛普拉斯组件测试功能，因此我在我的

"src/**/*.cy.ts"

中包含了

tsconfig.json

。 TypeScript 需要一些类型定义，我将其放入

cypress/support/components.d.ts

中，并将

"cypress/**/*.ts"

包含在我的

tsconfig.json

中。一切都按预期工作，但是

cypress/support/components.d.ts

包含在我的构建时的

dist

目录中。

我已经浏览了 Vite 和 Rollup 的文档，但无法找到在构建时排除 Cypress 的方法。现在我只想有一个扩展

tsconfig.build.json

的

tsconfig.json

，但排除所有与 Cypress 相关的文件。剩下的唯一一件事就是告诉 Vite 我想在构建过程中使用

tsconfig.build.json

。

我想这可以通过

vite.config.ts

或作为旗帜（

vite build --config tsconfig.build.json

）来完成。

我做了一个

tsconfig.build.json

：

{
  "extends": "./tsconfig.json",
  "exclude": [
    "node_modules",
    "cypress"
  ]
}

但我不确定如何指示 Vite 在构建时使用此配置。

打字稿@4.8.4 [email protected]

Answer 1

我找到了一种通过

vite-plugin-dts

指定另一个tsconfig文件的方法。这是我已经在构建过程中用来生成类型的插件。

// vite.config.ts

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: { ... },
  plugins: [
    vue(),
    dts({
      tsConfigFilePath: 'tsconfig.build.json',
    }),
  ],
})

替代解决方案

vite-plugin-dts

选项还允许设置覆盖

tsconfig.json

的排除/包含，并使单独的

tsconfig.build.json

变得多余。

// vite.config.ts

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: { ... },
  plugins: [
    vue(),
    dts({
      exclude: [
        'node_modules',
        'cypress'
      ],
    }),
  ],
})

Answer 2

我最终编写了一个 tsconfig 文件交换插件来满足我们的需求，我相信这将是解决您问题的方法：https://github.com/alienfast/vite-plugin-tsconfig

• 允许默认

  tsconfig.json

  ，最后会被放回原位
• 允许指定

  workspaces

  以便与根同时交换 monorepo 包

我们正在处理失败的 CI 故事书/vite 构建，只是为了了解到 vite 尝试在

tsconfig.json

级别发现最近的

package.json

，无论是否存在。自述文件解释了更多。

我们的用例：我们的 monorepos 中的

tsconfig.json

是为了使用项目引用和

paths

进行开发而设置的。我们在 CI/生产构建脚本中使用

tsconfig.build.json

进行构建，无需路径依赖。 Vite 似乎是在不了解多环境类型用例的情况下进行编码的。

希望这种事情在 vite 本身中得到考虑，并且这种类型的 hack/插件可以在将来存档。

Answer 3

tsc

提供构建选项

--project

。 文档

所以你只需创建新的 tsconfig 文件，例如：

// tsconfig.build.json
{
  "compilerOptions": {
   ...
  },
  "include": ["src"],
  "exclude": ["**/cypress/*"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

然后修改您的构建脚本

package.json

:

"scripts":{
  "build": "tsc --project tsconfig.build.json && vite build -d",
}

好处是编写测试用例可以继续享受类型提示并在编译时忽略测试脚本。