Vite

安装和配置 Vite。

创建项目

首先，使用以下命令创建一个新的 React 项目 vite。


npm create vite@latest


pnpm create vite


yarn create vite


bunx create-vite

添加 Canyon 和配置


npm install -D @canyonjs/vite-plugin vite-plugin-istanbul


pnpm add -D @canyonjs/vite-plugin vite-plugin-istanbul


yarn add --dev @canyonjs/vite-plugin vite-plugin-istanbul


bun add --dev @canyonjs/vite-plugin vite-plugin-istanbul

配置 Vite 插件

vite.config.ts


import { defineConfig } from "vite";
import istanbulPlugin from "vite-plugin-istanbul";
import canyonVitePlugin from "@canyonjs/vite-plugin";
 
const isProduction = process.env.NODE_ENV === "production";
 
// https://vite.dev/config/
export default defineConfig({
  plugins: isProduction
    ? [
        istanbulPlugin({
          forceBuildInstrument: true,
        }),
        canyonVitePlugin({
          repoID: "your-repo-id",
          sha: "your-commit-sha",
          provider: "gitlab",
          ci: true,
          keepMap: true,
        }),
      ]
    : [],
});

完成了

继续查看首次获取覆盖率数据 - 验证。