vite-plugin-istanbul-widget

集成了 istanbul-widget 和 vite-plugin-istanbul 的vite插件

额外支持astro/remix

安装

1npm install vite-plugin-istanbul-widget --save-dev

上手

vite.config

参考配置

1import { defineConfig } from 'vite'
2import { istanbulWidget } from 'vite-plugin-istanbul-widget'
3
4// example
5export default defineConfig((env) => ({
6  plugins: [
7    istanbulWidget({
8      enabled: env.mode === 'test', // 按需启用
9      istanbulWidgetConfig: {
10        plugin: {
11          report: {
12            async onReport(coverage: any) {
13              await window.__report(coverage)
14            },
15          },
16          setting: {
17            autoReport: false,
18            onLeavePage: true,
19            requireReporter: true,
20          },
21        },
22      },
23    }),
24  ],
25}))

Astro项目

astro.config

参考配置

1import react from '@astrojs/react'
2import { defineConfig } from 'astro/config'
3import { exclude, istanbulWidget } from 'vite-plugin-istanbul-widget/astro'
4import { publicTypescript } from 'vite-plugin-public-typescript'
5
6export default defineConfig({
7  integrations: [
8    istanbulWidget({
9      enabled: true,
10      istanbulWidgetConfig: {
11        theme: 'dark',
12        defaultPosition: {
13          x: 0,
14          y: 100,
15        },
16        plugin: {
17          report: {
18            async onReport(coverage: any, ...args: any[]) {
19              await window.__report(coverage, ...args)
20            },
21          },
22          setting: {
23            autoReport: false,
24            onLeavePage: true,
25            requireReporter: true,
26          },
27          buttonGroup: [
28            {
29              text: '自定义按钮',
30              onClick(...args: any[]) {
31                window.__customClick(...args)
32              },
33            },
34          ],
35        },
36        debug: true,
37      },
38      fullReport: true,
39    }),
40    react({
41      exclude,
42    }),
43  ],
44  vite: {
45    plugins: [
46      publicTypescript(),
47    ],
48  },
49})

Remix项目

vite.config

参考配置

1import { vitePlugin as remix } from '@remix-run/dev'
2import { defineConfig } from 'vite'
3import { istanbulWidget } from 'vite-plugin-istanbul-widget'
4
5export default defineConfig({
6  plugins: [
7    remix(),
8    istanbulWidget({
9      enabled: true,
10      checkProd: false,
11      istanbulWidgetConfig: {
12        defaultPosition: {
13          x: 0,
14          y: 100,
15        },
16        plugin: {
17          report: {
18            async onReport(coverage, ...args) {
19              console.log(coverage, ...args)
20            },
21          },
22          setting: {
23            autoReport: false,
24            onLeavePage: true,
25            requireReporter: false,
26          },
27        },
28      },
29      fullReport: true,
30    }),
31  ],
32})

配置项

1type VitePluginIstanbulWidgetOptions = {
2  /**
3   * 是否开启插件
4   * @default false
5   */
6  enabled?: boolean
7  /**
8   * 入口文件
9   * 对于 csr 项目，入口通常是 src/main 或 app/main
10   * 对于 remix/rr7 项目，入口通常是 app/root
11   *
12   * 默认情况自动探测 ['src/main', 'src/root', 'app/main', 'app/root']
13   */
14  entry?: string
15  /**
16   * 是否检查正式环境
17   * 若为true，则正式环境下禁用插件
18   * @default true
19   */
20  checkProd?: boolean
21  /**
22   * 全量上报
23   * @default true
24   */
25  fullReport?: boolean
26  /**
27   * vite-plugin-istanbul 配置
28   */
29  istanbulPluginConfig?: IstanbulPluginOptions
30  /**
31   * istanbul-widget 配置
32   * @description false 则关闭 istanbul-widget 控件
33   */
34  istanbulWidgetConfig: IstanbulWidgetOptions | false
35}