# vite-plugin-vsconsole

**Repository Path**: ameegle/vite-plugin-vsconsole

## Basic Information

- **Project Name**: vite-plugin-vsconsole
- **Description**: 适用于vite的script的虚拟控制台插件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-19
- **Last Updated**: 2023-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-plugin-vsconsole

> vite plugin for vsconsole
>
> 一个适用于Vite2+的插件，帮助开发者在各个环境下方便使用VConsole的功能。可以方便配置区分环境，根据环境动态加载VConsole，支持多页面配置。

## 安装 (yarn or npm)

**node version:** >=12.0.0

**vite version:** >=2.0.0

```bash
yarn add vconsole
# or
npm i  vconsole -S
```

```bash
yarn add vite-plugin-vsconsole -D
# or
npm i vite-plugin-vsconsole -D
```

## 示例

```bash
cd ./example

npm  install

npm dev

```

## 使用

### vite.config.ts 配置

- **Vue** 简单配置

```ts
// tips: 如果引用path提示不存在，可以引入@types/node包
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteVSConsole } from 'vite-plugin-vsconsole';
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteVSConsole({
      entry: path.resolve('src/main.ts'), // 或者可以使用这个配置: [path.resolve('src/main.ts')]
      enabled: true, // 可自行结合 mode 和 command 进行判断
      config: {
        log: {
          maxLogNumber: 1000
        },
        theme: 'dark'
      }
    })
  ]
});
```

- **Vue** 多页面简单配置

```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vsconsole from 'vite-plugin-vsconsole';
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vsconsole({
      entry: [path.resolve('src/main.ts')], // 每个页面的入口文件，和上面不一样的地方，这里是一个数组
      enabled: true, // 可自行结合 mode 和 command 进行判断
      config: {
        log: {
          maxLogNumber: 1000
        },
        theme: 'dark'
      }
    })
  ]
});
```

- **React** 简单配置

```ts
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import vsconsole from 'vite-plugin-vsconsole';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    reactRefresh(),
    vsconsole({
      entry: path.resolve('src/main.tsx'),
      enabled: true, // 可自行结合 mode 和 command 进行判断
      config: {
        log: {
          maxLogNumber: 1000,
        },
        theme: 'dark'
      }
    })
  ]
});
```

- 区分开发环境和生产打包环境

```ts
// 你可以使用 command / mode 来区分是否使用
import { UserConfigExport, ConfigEnv } from 'vite';
import vsconsole from 'vite-plugin-vsconsole';
import vue from '@vitejs/plugin-vue';
import * as path from 'path'

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      vsconsole({
        entry: [path.resolve('src/main.ts')], // 入口文件
        enabled: command !== 'serve' || mode === 'test', // 打包环境下/发布测试包
        config: { // vconsole 配置项
          maxLogNumber: 1000,
          theme: 'light'
        }
      })
    ],
  };
};
```

- 自定义vsconsole插件

```ts
viteVSConsole({
  entry: path.resolve('src/main.ts'),
  enabled: true,
  config: {
    theme: 'dark',
    onReady() {
      console.log(23333);
    }
  },
  plugin: [
    {
      id: 'my_plugin',
      name: 'MyPlugin',
      event: [
        {
          eventName: 'init',
          callback: function () {
            console.log('My plugin init');
          }
        },
        {
          eventName: 'renderTab',
          callback: function () {
            console.log('My plugin renderTab');
          }
        }
      ]
    },
    {
      id: 'my_plugin2',
      name: 'MyPlugin2',
      event: [
        {
          eventName: 'init',
          callback: function () {
            console.log('My plugin2 init');
          }
        },
        {
          eventName: 'renderTab',
          callback: function () {
            console.log('My plugin2 renderTab');
          }
        }
      ]
    }
  ]
});
```

- 自定义规则使其触发销毁

```ts
// 需求: 在pc电脑端调试的时候，不希望有vconsole，因为vconsole会拦截console的log信息，不便于定位代码
// customHide: 一段可运行代码段，用于出发在浏览器端的一些api
viteVSConsole({
  entry: path.resolve('src/main.ts'),
  enabled: true,
  customHide: `/chrome\\/([\\d\\.]+)/.test(navigator.userAgent.toLowerCase())`,
  config: {
    theme: 'dark',
    onReady() {
      console.log(23333);
    }
  }
});
```

## 配置

### entry

**type:** `string | string[]`

**require:**

必须提供，支持多入口。

### enabled

**type:** `boolean`

**default:** `true`

全局属性, 是由本属性开启时, 其他的差异化功能才会有用

### cacheKey

**type:** `string`

**default:** `vconsole:enable:id`

底层使用`sessionStorage`存储, 默认的key值, 你可以通过这个属性来修改, 作用: 如在生成环境下, 可以通过隐藏位置触发特定条件来设置缓存key值, 从而实现动态加载VConsole

### config

**type:** `VConsoleOptions`

**default:** `{}`

vconsole 配置项

### customHide

**type:**`string | boolean`

**default:** `false`

### plugin

**type:** `Object`

```ts
{
  id: string;
  name: string;
  event: {
    eventName: string;
    callback: (data?: any) => void;
  }[];
}[];
```

## Typescript

添加 `vconsole` 的引用

```ts
/// <reference types="vconsole" />
```

## License

[MIT](LICENSE)